Elementor 中如何使用自訂 CSS 增強網站外觀【2026 更新版】

學習如何在 Elementor 中使用自訂 CSS，提升網站設計與外觀，適合 WordPress 初學者的完整教學。

什麼是自訂 CSS？

自訂 CSS（Cascading Style Sheets）是一種用於描述 HTML 文件外觀的樣式表語言。透過 CSS，使用者可以控制網站的字體、顏色、間距、佈局等視覺元素，從而提升網站的整體設計。

自訂 CSS 的優勢

在網站設計中，自訂 CSS 讓設計師能夠創造獨特的風格，並確保網站在不同設備上都能保持一致的外觀。透過自訂 CSS，使用者可以針對特定元素進行微調，增強用戶體驗。

Elementor 中的自訂 CSS 應用場景

在 Elementor 中，自訂 CSS 可以用於改變字體樣式、調整按鈕樣式、設計背景與邊框等，幫助使用者打造獨特的網站外觀。

如何在 Elementor 中添加自訂 CSS

在 Elementor 中添加自訂 CSS 的過程相對簡單，以下是具體步驟：

使用 Elementor 編輯器添加 CSS

  1. 首先，登入 WordPress 後台，前往「頁面」或「文章」，選擇要編輯的頁面，並點擊「使用 Elementor 編輯」。
  2. 在 Elementor 編輯器中，選擇想要添加 CSS 的元素，然後在左側的編輯面板中，找到「進階」選項卡。
  3. 在「進階」選項卡中，找到「自訂 CSS」區域，撰寫你的 CSS 代碼。例如，若想改變字體顏色，可以使用以下代碼：
selector {
  color: #ff0000;
}

撰寫完成後，點擊「更新」以保存變更。

全局自訂 CSS 設定

如果希望在整個網站中使用相同的 CSS 設定，可以在 Elementor 的全局設置中添加自訂 CSS。前往「Elementor」>「設定」>「自訂 CSS」，在此處撰寫你的 CSS 代碼，這樣所有使用 Elementor 的頁面都會應用這些樣式。

單一元素自訂 CSS 設定

對於特定元素的樣式調整，使用單一元素的自訂 CSS 設定是最佳選擇。選擇元素後，依照前述步驟在「進階」選項卡中添加 CSS 代碼。

常見的自訂 CSS 實例

改變字體樣式

要改變字體樣式，可以使用以下 CSS 代碼：

selector {
  font-family: 'Arial', sans-serif;
  font-size: 16px;
}

調整按鈕樣式

若要調整按鈕的顏色和邊框，可以使用：

selector {
  background-color: #007bff;
  border: 2px solid #0056b3;
}

自訂背景與邊框

要自訂元素的背景和邊框，可以使用：

selector {
  background-color: #f8f9fa;
  border-radius: 10px;
}

測試與驗證自訂 CSS 的效果

使用瀏覽器開發者工具

在瀏覽器中，右鍵點擊要檢查的元素，選擇「檢查」或「檢查元素」。這將開啟開發者工具，讓你查看 CSS 代碼及其效果。

確保響應式設計

使用開發者工具的響應式設計模式，檢查在不同設備上的顯示效果，確保網站在手機、平板和桌面上都能良好顯示。

解決常見問題

自訂 CSS 不生效的原因

如果自訂 CSS 沒有生效，可能是因為選擇器不正確或 CSS 優先級問題。確保使用正確的選擇器，並檢查是否有其他 CSS 規則覆蓋了你的樣式。

如何排除 CSS 衝突

為了避免 CSS 衝突，建議使用更具體的選擇器，或使用 !important 標記來強制應用樣式。例如：

selector {
  color: #ff0000 !important;
}

結論與後續學習資源

透過本文的教學，你應該能夠在 Elementor 中有效地使用自訂 CSS 來增強網站的外觀。建議持續學習 CSS 的相關知識，以提升網站設計的能力。

相關教學