使用Elementor等頁面構建器的最大賣點之一 是您可以訪問預構建的頁面元素或“小工具”。Elementor小工具包括大量自定義和樣式選項。但是，有時應用特定樣式的唯一方法是使用層疊樣式表 (CSS)。
CSS為您提供了對網站每個元件的驚人控制程度。如果您熟悉該語言，將其新增到WordPress很簡單。Elementor還提供了幾個用於新增自定義CSS的選項。
在本文中，我們將討論CSS是什麼以及如何向Elementor新增自定義樣式。最後，我們將討論一些在WordPress中使用CSS的最佳實踐。
什麼是CSS？
CSS是我們所說的“樣式表”語言。您可以使用CSS樣式表向HTML或XML文件新增自定義樣式。通過使用CSS，您可以將基本的HTML頁面轉換為具有現代外觀的設計。
將CSS視為一種描述元素應如何在瀏覽器上顯示的語言。它適用於所有瀏覽器，是網際網路的核心語言之一。
例如，這是您用來為HTML文件的正文分配背景顏色的CSS程式碼：
body {
background-color: red;
}
您可以使用CSS將樣式應用於HTML中的特定元件、類和ID。例如，下面的程式碼片段會為頁面上的所有H2應用特定的文字顏色和對齊方式：
h2 {
color: black;
text-align: left;
}
通常，當您載入HTML頁面時，它還會載入包含所有CSS程式碼的單獨樣式表。這意味著您可以跨多個頁面重複使用樣式表。
您可以自由地將CSS程式碼直接應用於任何HTML頁面。您也可以“內聯”使用它。這是一個術語，指的是適用於單個HTML元素並駐留在該檔案中的CSS程式碼。
以下是特定H2的內聯CSS示例：
h2 {
color: black;
text-align: left;
}
將CSS新增 到單獨的樣式表被認為是最佳實踐。但是，使用WordPress和Elementor的眾多優勢之一 是您無需手動編輯檔案即可新增CSS。讓我們仔細看看它是如何工作的。
Elementor中的自定義CSS選項
如果您熟悉Elementor，您就會知道構建器使用部分、列和小工具來幫助您組合頁面。部分包含一列或多列，每列可以有幾個模組：
Elementor中的列和模組
使用Elementor的最佳部分之一是您可以在部分、列和小工具級別新增單獨的CSS程式碼。當您將滑鼠懸停在某個部分上時，您可以選擇六點圖示以開啟螢幕左側的“Edit Section”選單：
在部分、列和小工具級別新增單獨的CSS程式碼
如果您移動到“Edit Section”選單中的“Advanced”選項卡，您將看到一個Custom CSS部分。在內部，您會找到一個欄位，可讓您為該特定部分新增程式碼：
自定義CSS選項位於“高階”選項卡下
當您編輯列和小工具時，您會注意到您可以在各自的設定選單中訪問相同的三個選項卡。部分、列和小工具都包括佈局、樣式和高階設定。
要將自定義CSS新增到列，請將滑鼠懸停在該列上，然後選擇元素右上角的兩列圖示。然後，導航到Advanced選項並開啟Custom CSS部分：
將自定義CSS新增到單個列
您可以按照相同的過程將自定義CSS新增到Elementor小工具。只需選擇您要自定義的小工具，然後直接移至“Advanced”>“Custom CSS”選項卡：
您也可以將CSS新增到小工具
將自定義CSS新增到Elementor頁面構建器中的特定元素非常簡單。但是，請記住，樣式僅適用於這些元素。如果要新增影響整個站點的自定義CSS，則需要使用不同的方法。
如何使用Elementor新增自定義CSS
在本節中，我們將探索新增Elementor自定義CSS的其他方法。我們將介紹在整個網站、特定頁面和Elementor小工具中應用CSS的方法。
方法 1：使用Elementor HTML小工具
Elementor使您能夠將自定義CSS新增到其任何小工具。但是，在某些情況下，您可能希望使用HTML和CSS手動新增元素。在這些情況下，您需要使用HTML小工具：
使用HTML小工具
HTML小工具可以解析HTML、CSS和JavaScript。您可以在HTML Code欄位中新增您想要的任何程式碼，如果它有效，Elementor會將其顯示為小工具：
在小工具內新增任何程式碼
HTML小工具支援內聯和獨立CSS。您使用小工具新增的任何程式碼都只會影響該單個元素。
方法 2：使用Elementor站點設定選單
Elementor包含一組全域性設定，類似於您可以在WordPress定製器中找到的選項。要訪問Elementor Site Settings選單，請開啟編輯器並單擊螢幕左上角的漢堡選單：
點選可用的漢堡選單
在下一頁上，選擇Site Settings選項：
點選“Site Settings”選項
在裡面，您將看到一組設定，使您能夠自定義網站的樣式。您在此選單中所做的任何更改都將應用於您的整個網站，即使您在技術上只是編輯一個頁面。
您可以在Elementor官方網站上閱讀有關如何使用“站點設定”選單自定義頁面的幫助文件。目前，我們唯一關心的部分是Custom CSS選項卡。開啟它，你會看到一個欄位，看起來就像部分、小工具和列的自定義CSS選項：
在此處新增自定義CSS會影響整個站點
您在此處新增的任何自定義CSS都會影響您的整個網站。如果您只打算自定義特定元素，我們建議您使用更有針對性的方法（例如將CSS直接新增到小工具）。
方法 3：使用WordPress定製器
WordPress定製器還使您能夠在整個站點範圍內新增自定義CSS。為此，請轉到外觀 > 自定義並在左側選單中選擇額外CSS選項：
使用WordPress定製器新增CSS
但是，值得注意的是Elementor程式碼欄位比定製器中可用的程式碼欄位更加使用者友好。如果您已經在使用Elementor進行網站構建，則沒有理由通過定製器新增自定義CSS。
方法 4：將自定義CSS檔案排入佇列
如果您喜歡編輯WordPress檔案並通過檔案傳輸協議 (FTP)客戶端訪問您的網站，則可以將CSS樣式表排入佇列以使用 Elementor 載入。這種方法需要您將程式碼新增到WordPress functions.php檔案中。
要訪問functions.php檔案，請通過FTP連線到您的網站並轉到WordPress根資料夾。開啟資料夾，找到functions.php檔案，然後編輯它。
這是您要新增到檔案中的程式碼示例：
add_action( 'elementor/frontend/before_enqueue_scripts', function() {
wp_enqueue_script(
'custom-stylesheet',
get_stylesheet_uri()
);
} );
該程式碼使用before_enqueue_scripts掛鉤來載入名為custom-stylesheet的樣式表。 我們還使用get_stylesheet_uri函式來指向樣式表在伺服器中的位置。
理想情況下，您將在子主題的目錄或主題資料夾本身中新增自定義樣式表。樣式表可以包含您想要的任何Elementor CSS程式碼。您新增到functions.php的程式碼片段可確保僅當Elementor在您的網站上處於活動狀態時才載入程式碼。
方法 5：使用CSS外掛
有幾個外掛可以讓您在不使用定製器或頁面構建器的情況下將自定義CSS新增到您的網站。我們最喜歡的工作工具之一是Simple Custom CSS and JS：
Simple Custom CSS and JS
使用Simple Custom CSS and JS，您可以選擇將程式碼直接新增到主題的頁首和頁尾元素。首先，轉到Simple Custom CSS and JS > Add Custom CSS，然後單擊Add CSS Code。
一個基本的CSS編輯器將出現在左側。在右側，您可以配置是在外部樣式表中 還是在內部載入CSS程式碼。您還可以決定程式碼應該放在頁首還是頁尾：
在外部樣式表上載入程式碼
完成CSS程式碼編輯後，點選釋出按鈕。您可能需要切換到前端檢視才能檢視正在執行的程式碼。
使用Elementor建立自定義CSS的最佳實踐
每當您處理自定義CSS或向您的網站新增任何型別的程式碼時，您最好牢記以下最佳實踐。讓我們從使用子主題開始。
使用WordPress子主題
如果您想使用CSS更改主題樣式的任何部分，我們建議您使用子主題。“子”主題是繼承指定主題的所有樣式的模板。
這樣，如果您對原始主題進行任何更改，它們將不會影響您新增到子項的自定義設定。此外，當您更新主題時，它會保留這些更改。
使用程式碼前處理器更容易編寫
在WordPress中新增程式碼或使用Elementor的最大挑戰之一是您無法訪問現代程式碼編輯器提供的所有功能。我們建議您使用您最喜歡的前處理器（HTML編輯器），而不是使用基本的現場編輯器來處理程式碼。然後，您可以簡單地將程式碼複製並貼上到WordPress中。
考慮使用臨時網站
每當您計劃對WordPress進行任何重大更改時，我們建議您使用臨時網站。臨時站點使您能夠測試樣式和功能的更改，而不會破壞實時站點上的任何內容。
如果您的網路主機不提供暫存功能，您可以使用本地WordPress開發環境進行測試。或者，您可能需要考慮更換託管服務提供商。
小結
新增Elementor自定義CSS比您想象的要容易。頁面構建器提供了多種方法來向部分、列、小工具和整個網站新增程式碼。
回顧一下，以下是向Elementor（或您的網站）新增自定義CSS的五種主要方法：
- 使用Elementor HTML小工具。
- 使用Elementor站點設定選單。
- 使用WordPress定製器。
- 將自定義CSS檔案排入佇列。
- 使用CSS外掛。
評論留言