如何在 Elementor 中添加自定義 CSS：4 種簡單方法

已發表: 2022-07-24

尋找在 Elementor 中添加自定義 CSS 的方法？

通過添加自定義 CSS 擴展已經令人驚嘆的 Elementor 設計，可以讓您在競爭對手中獲得無與倫比的優勢。

那麼，為什麼不使用一些 Elementor 自定義 CSS 並在這個競爭激烈的數字世界中脫穎而出，對吧？

沒有理由不應該這樣做。

但是如何將自定義 CSS 添加到拖放 Elementor 頁面構建器？

好吧，您可以通過多種方式在 Elementor 中添加自定義 CSS。 要了解有關如何在 Elementor 中添加自定義 CSS 的更多詳細信息，請繼續閱讀……

內容隱藏
什麼是 CSS？
為什麼要在 Elementor 網站中添加自定義 CSS？
如何在 Elementor 中添加自定義 CSS：3 種不同的方法
如何修復 Elementor 自定義 CSS 不起作用的問題
經常問的問題
總結 Elementor 自定義 CSS

什麼是 CSS？

什麼是 css 如何在 Elementor 中添加自定義 css

CSS（層疊樣式表）是一種基於規則的樣式表語言，用於更改使用 HTML 或 XML 等標記語言構建的網頁的佈局和外觀。 使用 CSS 是一種有效的網頁設計方式，因為它將內容和样式保存在單獨的文件中，從而為您提供最大的靈活性和易用性。

為什麼要在 Elementor 網站中添加自定義 CSS ？

好吧，這不是強制性的，因為 Elementor 本身提供了創建漂亮網站所需的所有自定義選項。 但是，如果您是一個知道如何編碼並希望利用您的創造力來增強網站外觀的人，那麼您可以在 Elementor 中添加自定義 CSS。

  • 在 Elementor 中使用自定義 CSS，您可以覆蓋主題的樣式以實現新樣式。 假設，你喜歡你的主題提供的頁面的整體外觀，但你想在一個部分中稍微改變佈局，那麼你可以藉助 Elementor 自定義 CSS 來做到這一點。
  • 同樣，您也可以使用自定義 CSS 代碼片段覆蓋 Elementor 預製模板的設計。
  • 您還可以通過向 Elementor 添加自定義 CSS 代碼片段來自定義設計您的網站，使其在不同設備上看起來不同。

檢查如何使用Elementor flexbox 容器來創建設備友好的網站。

如何在 Elementor 中添加自定義 CSS：3 種不同的方法

添加自定義 CSS 一點也不難。 事實上，您可以使用各種方法在 Elementor 中添加自定義 CSS。 在這裡我與大家分享最安全的 4 種添加 Elementor 自定義 CSS 的方法。

使用 Elementor 的自定義 CSS 代碼片段添加 CSS

Elementor 為您提供了一個高級選項，可以將自定義 CSS 添加到您的部分、列以及小部件。 但是，此選項僅適用於 Elementor Pro。

要將自定義 CSS 添加到 Elementor 網站的任何部分/內部部分，請單擊“六個點”進入編輯模式，然後移動到“高級”選項卡⇒“自定義 CSS” 。 現在展開自定義 CSS 選項卡並添加您的自定義代碼。

在 Elementor 內部部分添加自定義 css

同樣，您也可以在 Elementor 小部件中添加自定義 CSS。 為此，單擊小部件以進入編輯模式，然後移動到高級選項卡⇒自定義 CSS。 現在展開自定義 CSS 選項卡並添加您的自定義代碼。

在 Elementor 小部件中添加自定義 CSS

使用 HTML 小部件添加 Elementor 自定義 CSS

可用於將 Elementor 自定義 CSS 添加到 WordPress 網站的第二個選項是使用 HTML 小部件。 對於此選項，只需簡單地拖放 HTML 小部件，然後將 CSS 代碼添加到 Style 標記中。

Elementor Custom css 使用 html 塊添加 elementor 自定義 css

注意：您可以使用 HTML 標記添加內聯和獨立 CSS。 不用擔心，只有樣式會反映在網站上，原始代碼將不可見。

在 Elementor 網站設置中添加自定義 CSS

您還可以使用站點設置選項在 Elementor 中添加自定義 CSS。 單擊左上角的漢堡菜單，然後在設置下，單擊站點設置選項以訪問全局站點設置選項。

轉到站點設置如何在 Elementor 中添加自定義 CSS

現在向下滾動到自定義 CSS 選項，打開選項卡並在此處添加您的自定義樣式。

在站點設置中添加 Elementor 自定義 css

通過 WordPress 自定義設置在 Elementor 中添加自定義 CSS

您不必一定要使用 Elementor 提供的選項來添加自定義 CSS。 您還可以使用 WordPress 自定義選項添加自定義 CSS。

為此，請轉到WordPress 儀表板 ⇒ 外觀 ⇒ 自定義。

轉到 WordPress 自定義選項 Elementor 自定義 css

現在您會發現許多可用於自定義 WordPress 網站的設置。 向下滾動並打開Additional CSS 選項卡以將自定義 CSS 添加到您的站點。

從 WordPress 定制器添加 CSS

如何修復 Elementor 自定義 CSS 不起作用的問題

有時，由於某些技術問題，在 Elementor 中添加自定義 CSS 可能不會立即反映在網站上。 您可以採取以下步驟來解決此問題：

重新生成 CSS

重新生成 CSS 可以解決這個問題。 要重新生成 CSS，請導航到Elementor ⇒ 工具並單擊重新生成 CSS 和數據，然後單擊保存更改。

重新生成 Elementor 自定義 css Elementor 自定義 css

清除網站緩存和瀏覽器緩存

使用任何 WordPress 緩存插件清除網站的緩存。 如果你有一個，你也可以清除任何服務器級緩存。 清除網站緩存後，清除瀏覽器緩存並刷新網站以檢查 CSS 是否正常工作。

主題不兼容

有時 Elementor 主題不兼容可能是自定義 CSS 未顯示在前端的原因。 您可以嘗試切換到任何默認主題以檢查 CSS 是否正常工作，如果 CSS 以默認主題顯示在前端，則與您的主題開發人員討論兼容性問題。

將另一個頁面構建器與 Elementor 一起使用

同時使用多個頁面構建器可能會導致您的自定義 CSS 不起作用。 原因很簡單，來自不同頁面構建器的 CSS 可能會相互衝突，並且其他頁面構建器可以覆蓋 Elementor 自定義 CSS。 在這種情況下，您應該只使用 Elementor 頁面構建器。

注意：如果您想在不使用其他頁面構建器的情況下擴展 Elementor 頁面構建器的功能，那麼您可以選擇 Elementor 插件。

試試ElementsKit——Elementor 的終極插件，它帶有85 多個小部件和 500 多個就緒部分，因此您可以構建具有現代外觀的 Elementor 網站。

目前有超過700k+人使用這個可愛的插件來創建令人驚嘆的網站以及高級頁眉和頁腳。

現在，您可以使用community20代碼以 20% 的折扣獲得 ElementsKit 的 Pro 版本。 要購買 ElementsKit 專業版，請單擊此處。

經常問的問題

查看與 Elementor 自定義 CSS 相關的一些最受歡迎的問題及其答案：

如何在 Elementor 中使用自定義 CSS？

您可以通過 4 種方式在 Elementor 中添加自定義 CSS。 這些方法是使用 HTML 塊、Elementor 自定義 CSS 片段、WordPress 自定義選項和 Elementor 站點構建設置。

如何免費向 Elementor 添加自定義 CSS？

從 WordPress 自定義選項中，您可以在 Elementor 網站中免費添加自定義 CSS。

想要將高級表單添加到您的 Elementor 網站？ 查看我們的表單構建資源：

如何在 WordPress 中添加多步驟表單
如何構建 Elementor 條件邏輯表單
如何在 Elementor 中創建 WordPress 調查表

總結 Elementor 自定義 CSS

現在您知道了在 Elementor 中添加自定義 CSS 的 4 種方法。 雖然您可以使用所有這些，但您應該記住 CSS 的優先級層次結構。 例如，內聯樣式總是比在頁面級別或網站級別編寫的 CSS 具有更高的優先級。

因此，我建議僅在您非常了解 CSS 時才使用自定義 CSS。 否則，您可能弊大於利，最終破壞您網站的外觀和佈局。

話雖如此，如果您是 CSS 專業人士，那麼您無需擔心，請隨意使用本博客中描述的方式添加您的自定義 CSS，以成功改變您網站的外觀。