什麼是 customize 自訂?
在之前，我們討論過 WordPress Customize 自訂功能。
它是一個強大且直觀的工具，讓用戶能夠即時地對網站外觀進行修改並預覽更改。它通常被稱為「外觀自訂器」，提供了網站設計的多方面控制，讓你能夠根據自己的需求輕鬆設置網站的樣式和內容，而不需要修改代碼。
所以許多的主題都是從 Customize 自訂頁面中做修改的，但是 Elementor 並不是一個主題，所以我們如果要修改設定的話，就要從要從 Elementor 的設定開始，不是由自訂去改。
什麼是全局設置?
Elementor 的全局設置（Global Settings）是一組工具和選項，用於設置整個網站的樣式和設計風格，讓你可以輕鬆地在 Elementor 網站上保持一致的視覺效果。使用全局設置可以幫助你統一網站風格，減少需要在不同頁面和元件間手動調整樣式的工作量。
在 WordPress Setting 設定：基本設置及操作 提到 WordPress 的網站應該是由「主題」（Theme）來定義 WordPress 網站外觀和設計的模板，包含佈局、顏色、字體、導航等元素。
使用 Elementor 的話，大部份的設定會由 Elementor 來處理。以 Astra Pro 為例，在自訂頁面中，可以看到許多功能。
▼ Astra Pro 主題
▼ Elementor 的 Hello 主題
為什麼功能會這麼少呢? 因為多數功能移到 Elementor 的全局設置。
我們可以在編輯頁面的左上角到找「網站設定」。
設計系統（Design System）
- 設定全局的網站顏色，這些顏色可以在網站的任何地方重複使用。更新全局顏色會影響所有使用到這些顏色的元素，使整體樣式保持一致。
- 設定網站的全局字體，方便在不同的頁面和元件中重複使用。如果想改變網站的字體樣式，只需修改一次，全站的文字樣式會自動更新。
- 這些設定允許你設置一些基礎的網站樣式，如標題（H1、H2 等）、按鈕、圖片和表單欄位的樣式。以下是子選項：
- 排版樣式：設定標題、段落等的字體大小、字型、行距等排版風格。
- 按鈕：定義按鈕的顏色、字體、大小、邊框樣式等，讓網站上的所有按鈕擁有統一風格。
- 圖片：設置圖片的顯示效果，例如邊框、陰影等。
- 表單欄位：設置表單的輸入框樣式，以保持統一的設計風格。
設定（Settings）
- 設定網站的基本識別資訊，如網站標誌（Logo）、網站標題、描述等，這些資訊會顯示在頁面標題和其他地方。
- AI Context 功能使 Elementor AI 引擎能夠理解您網站的整體上下文，使其能夠更有效地自定義文本和圖像以滿足您的特定要求。 完整內容：https://elementor.com/help/build-a-customized-website-with-ai-context/
- 設定整個網站的背景顏色或背景圖片，以增強視覺吸引力。
- 調整網站的版面配置，例如頁面寬度、內容區的間距等，以確保網站在不同屏幕上都能很好地顯示。
- 控制網站中燈箱效果的設置，燈箱是一種點擊圖片或視頻後彈出的顯示方式，能夠讓內容更好地呈現。
- 設定頁面之間的過渡效果，可以增加頁面轉換的流暢性和動態視覺效果。
- 如果需要對網站進行進一步的自定義，這裡可以添加 CSS 代碼來調整特定元素的樣式。
- 如果網站上有使用 WooCommerce 電子商務插件，可以在這裡設置相關樣式和配置，以統一商店頁面與整個網站的風格。
- 點擊後，會到後台的 Elementor Setting。
什麼是 CSS ?
CSS（Cascading Style Sheets，層疊樣式表）是一種樣式表語言，用於控制 HTML 或 XML 文件中元素的外觀和排版。它用於分離網頁的內容（通常是由 HTML 定義的）和視覺呈現（如顏色、字體、布局等），從而使網頁更具一致性且更容易維護。
傳統方式，我們會在 Html 中寫入 CSS 語法，試圖改變文字的顏色、尺寸。
這是紅色文字。
如何在 Elementor 中自定義 CSS?
如果 Elementor 元素的樣式，無法滿足你的需求的話，想要加入特殊的外觀風格或是動態設計，可能需要自行修改 CSS，而元素中的「進階」則可以幫助我們自訂 CSS 。
在 Elementor 中想要自定義 CSS 的話，方式很多，第一可以使用上面提到的「Elementor 的全局設置」裡的自訂 CSS（Custom CSS）。
第二個方法，我們在先前的 Elementor 入門教學 ：如何新增第一個 Elementor 頁面 的「如何修改元素?」單元中有指出：
元素主要分成三個部份：
選擇「進階」，可以在最下方找到 Custom CSS。
如果你沒有 CSS 的概念，也想學習 CSS 語言的話，推薦你可以看看這堂課： Hohaw – 動畫互動網頁程式入門 (HTML/CSS/JS)【吳哲宇，墨雨設計】
如何使用 Elementor 設定
在後台，我們還可以在 Elementor 功能中找到「設定」。這裡比較多的是關於 Elementor 外掛功能的設定。像是支援「內容類型」，有打勾的類型就可以使用 Elementor 來編輯。
從 Elementor 設定畫面截圖中，可以看到 Elementor 設定的幾個標籤，包括「一般」、「整合」、「進階」、「Performance」和「Features」，以下是詳細說明：
1 . 一般（General）
- 這部分允許你選擇 Elementor 可以應用到哪些內容類型。例如，你可以選擇使用 Elementor 編輯「文章」、「頁面」、或是「Landing Pages」（登陸頁）等。勾選的類型會啟用 Elementor 來設計這些類型的內容。
- 如果選擇此選項，Elementor 的全局顏色設定將被停用，並且會使用你主題中的顏色設置，這樣可以更好地保持網站風格一致性。
- 勾選此選項後，Elementor 預設的字型將被停用，會使用主題中的字型設定，確保所有文字保持與主題一致。
- 這個選項允許你選擇是否分享插件的非敏感性數據，以協助改進 Elementor。如果勾選，Elementor 團隊會獲取一些匿名的使用數據來幫助他們改進插件的性能和功能。
2. 整合（Integrations）
API 和第三方服務整合：在「整合」標籤下，你可以與其他服務進行整合，例如 Google Maps API、MailChimp 等。這些整合可以使網站具有更多功能，例如嵌入地圖或實現電子郵件訂閱。
3. 進階（Advanced）
4. Performance（性能）
- 內部嵌入：將所有 CSS 直接嵌入到 部分，這樣有助於在故障排除時提高可見性，但可能會導致初次加載時間增長。
- 外部文件：使用外部 CSS 文件來提供樣式，通常可以提高網站性能，因為可以更好地利用瀏覽器的快取功能。
- 根據需求，你可以選擇最適合網站的 CSS 載入方式。
- 啟用後，這個選項會對最重要的圖片（LCP，Largest Contentful Paint）使用 fetchpriority=”high”，並對頁面下方的圖片設置 loading=”lazy” 以延遲加載。這樣可以優化圖片的加載，減少初次加載時間，提高用戶體驗。
- 啟用此選項將會禁用不必要的 Gutenberg 塊編輯器腳本和樣式的加載，以減少渲染阻塞，從而提高網站的加載速度和性能，特別是在 Elementor 和 Gutenberg 一起使用時。
- 啟用後，這個選項會對背景圖片（除了第一張）設置延遲加載，以提高初始頁面的加載性能，這樣只有當背景圖片出現在視窗中時才會進行加載。這有助於減少網站的初始加載負擔，特別是當網頁上有很多圖片時。
5. Features（功能）
Ongoing Experiments（進行中的實驗）
這些是 Elementor 團隊正在測試的新功能，可能尚未完全穩定。
- 這是一個性能優化實驗，通過只在需要時加載控制項來改善網站性能。啟用後有助於減少網站的控制載入時間。
- 這個功能允許在 Elementor 中創建「登陸頁」（Landing Pages），可方便地設計專門用於推廣和行銷活動的頁面，並簡化頁面製作流程。
- 允許在其他元素中嵌套更多的元件，這樣可以創建更加複雜和靈活的設計。例如，可以將一個小工具嵌套在選項卡中，從而實現更豐富的佈局。
- 延伸閱讀：https://elementor.com/help/accordion-widget-with-nested-elements/
- 這個功能通過對元素進行快取以減少每次加載時的渲染時間，從而提高網站性能。啟用後，Elementor 將決定哪些元素適合靜態加載。
- 啟用此功能後，你可以創建精美的選單和 Mega Menu。這對於擁有複雜導航結構的網站非常有用，能夠提供更清晰和易於訪問的用戶體驗。
Stable Features（穩定功能）
這些功能已經過測試並且相對穩定。
- 這個功能可以使圖標作為嵌入的 SVG 而不是從外部載入（如 Font Awesome）。這樣做可以減少外部資源請求，進而提升網站的加載速度。
- 允許添加最多六個自定義響應中斷點，這樣可以根據不同設備（例如平板、筆記型電腦等）的大小來設置不同的設計樣式，以實現完全的像素級設計控制。
- 啟用後可以使用新的 Flexbox 容器，來構建高級的、響應式的設計。這是一種取代傳統的段落/欄位結構的更靈活的佈局方式，提供更好的控制和響應性。
- 此功能允許使用 CSS Grid 布局來精確排列頁面中的元素，為容器元素啟用後可以創建更加自定義化的網格佈局。
- 升級 Swiper 庫，用於改進輪播功能的未來性能。此更新可能需要更新自定義代碼並解決與第三方插件的兼容性問題。
- 當進入主題構建器時，會默認打開新的 Theme Builder 界面，這個界面具有更直觀的編輯體驗。
- 此功能讓你可以直接自訂 Hello Elementor 主題的網站首頁及頁尾。
- 此功能利用 AI 快速創建和自訂容器，並提供生成、變體和 URL 引用的能力，進一步增強設計的靈活性。
- 新的編輯器上方工具列，提供一個更加美觀和精簡的編輯體驗，使常用工具更容易訪問。
- 為每個小工具定義一個或多個顯示條件，控制它們何時可見。這非常適合於根據特定情況（例如日期、用戶角色等）來顯示特定內容。
- 此功能讓你可以選擇將所有表單提交保存在內部資料庫中，不再丟失任何表單提交資料。