如何使用 Elementor Pro 的主題編輯器建立一個 Header?
Header 是網站的頂部部分，通常包含了標題、標誌、導航菜單等元素。
它是網站的重要組件，用於引導用戶、展示品牌和提供導航功能。
通過使用 Elementor Pro 的 Header 主題編輯器，你可以輕鬆地設計和自定義獨特而精美的標頭，以提升網站的視覺吸引力和用戶體驗。
如果要用 Elementor Pro 來打造自己風格的 Header 的話，可以這樣做。
Step1.開啟 Elementor Pro 主題建構器
從 WordPress 的後台點擊 Elementor → 主題建構器 。
如果你找不到「主題建構器」的功能不要害怕，你不是中毒了，主題建構器是 Elementor Pro 其中一項功能，你必須安裝 Pro 版本以及認證許可證 ( License Key )。
如果你還沒有 Elementor Pro 的話，可以參考我的讀者優惠。
Step2. 點擊「頂部」並新增 Add New
進入頁面後，在左側的功能欄找到「頂部」並點擊，再按一下右上角的 Add New，就會進入編輯頁面，就可以開始設計我們的 Header 。
Step3. 選擇範本
進入編輯頁面後，映入眼簾的是一堆的 Elementor Pro 的 Header Template ，所以你也可以在當中找到喜歡的模板，直接使用不用廢話，當然你很可能在當中找不到喜歡的風格，選擇一個簡單風格的，我們再來修改吧。
Step4. 修改設計
再來，我們使用 Elementor 元素打造以及修改內容。
大致上完成後樣子就像下面，整個操作流程下來，其實可以發現 Elementor 並不難學習，而真正花費時間的是在調整「樣式」。
Step5. 發佈 Header
完成後，只需要發佈設計，就可以讓整個網站套用新的 Header。操作如下：
如何新增一個彈出式視窗(Popup)?
彈出式視窗(Popup) 常見於行銷活動中， Elementor 可以讓我們輕鬆打造自己的彈出式視窗。
Step1. 新增「彈出性視窗」
路徑：由範本 → 彈出式視窗
點擊上方的：ADD New Template
Step2. 命名
為新建的彈出性視窗命名吧，點擊建立版型。
Step3. 選擇範本
我們可以先由左上角的分類，再選擇喜歡的彈出式視窗模板。
如果你對自己的設計功力很有自信的話，也可以從零開始設計。
Step4. 設定顯示
完成設計後，我們要設定彈出式視窗要顯示在什麼地方。請點擊圖片紅框的位置，找到「display conditions」，然後點擊。
點擊「Conditions」→「add conditons」可以選擇包含「整個網站」。
我們也可以單獨選擇「文章列表」的某個分類，就可以提高行銷的精準度。
Step5. 進階設定： Triggers & Advanced Rules
Elementor 頁面設計工具中的「發布設置」選項，包含三個主要部分：「條件」、「觸發器」和「進階規則」。
Triggers (觸發器)：用戶需要執行什麼操作才能觸發彈出窗口。以下是可用的觸發條件：
進階規則 (Advanced Rules)」的選項，這些設定可以控制彈出窗口（popup）顯示的條件。以下是各個選項的簡要說明：
如何新增一個 Elementor 表單(Form)?
Elementor 表單（Form）是使用 Elementor 頁面構建器中的一個功能，可以幫助你在網站上輕鬆創建和設計各種自定義的表單。
它可以用來建立聯絡表單、訂閱表單、問卷調查、報名表、以及其他用於收集用戶資料的表單。Elementor 提供直觀的視覺化編輯界面，使得不具備編碼能力的用戶也可以輕鬆設計出專業的表單。
Step1. 開啟編輯頁面
在元素中找到「表單」，並拖曳到編輯區。
Step2. 調整表單內容
依我們的需求來調整表單的內容。
在表單欄位中，我們可以點擊「新增項目」來增加更多欄位。
Elementor 表單中可以選擇的欄位類型選單，這些欄位可以用來設計表單的不同組成部分，以下說明：
Step3. 設定提交後的動作
提交後的動作就是用來決定用戶提交表單後會發生什麼，選項可以複選。一般我們可能會將用戶的資料蒐集並儲存，然後發一封電子郵件給對方和管理者等。
以下是一些選項的簡要說明：
這些提交後的動作使 Elementor 表單不僅能夠收集信息，還能進行後續的自動化處理，從而提高效率，並幫助更好地管理和利用提交的數據。
Step4. 針對提交後的動作的做更細部的設定
完成「提交後的動作」之後，我們可以對其動作做更細部的設定。
像是「電子郵件」，就需要設定收件人、標題、訊息等內容。但如果要使用系統發送「電子郵件」的話，還需要做 WordPress 的 SMTP 的設定。
請留言告訴我：「我想知道更多電子郵件 SMTP 的相關內容。」
如何建立一個 Elementor Preloader ?
Elementor Preloader 是一種用於提升網站使用者體驗的工具。
當網站在載入內容時，Preloader 會顯示一個載入動畫或圖像，讓使用者知道網站正在處理他們的請求。
這可以避免使用者在等待網頁載入時感到困惑或不耐煩。Elementor Preloader 可以在 Elementor 網頁編輯器中設定和自定義，讓你可以選擇符合你的網站風格和品牌形象的載入動畫或圖像。
加入網站的 Preloader（預加載器）可以有助於減少離開率，原因主要有以下幾點：
然而，值得注意的是，Preloader 並不適合所有類型的網站。對於需要快速展示內容的網站，例如新聞或即時信息網站，過度依賴 Preloader 可能會影響用戶體驗。因此，選擇是否使用 Preloader 應根據網站的具體需求和用戶行為來決定。
如何建立一個 Elementor Preloader?
Step1.在編輯頁面中點擊左上角的「漢堡圖示」。
Step2. 點擊「網站設定」
Step3. 點擊 Page Transitions 進入 Preloader 的設定頁面
Step4. Page Transitions & Preloader 的設定
Page Transitions 是戴入時的背景動畫，完成後才會出現 Preloader 動畫。
Preloader 類型有：動畫、圖示、圖片。可以調動適合網站的色調和延遲時間。
Elementor reCAPTCHA
reCAPTCHA 是由 Google 提供的一種反垃圾機器人服務，用於防止網站表單被自動化工具（即機器人）濫用或攻擊。它的目的是確保表單的提交者是人類，而不是惡意腳本或自動程序。reCAPTCHA 通常被應用於網站的註冊、登錄、聯繫表單等，防止機器人濫發垃圾訊息，保護網站安全。
將金鑰貼到 Elementor 整合的設定中。
如何使用 Elementor Custom Code? 以 JS 為例
進入 Custom Code 編輯器非常簡單。
在 WordPress 的後台管理界面中，選擇 Elementor > Custom Code，即可進入 Custom Code 編輯器。在編輯器中，用戶可以添加 CSS 和 JS 代碼，並將其分配到他們想要的位置。
Step.1 新增自定義的 JS
從後台找到 Elementor 的下拉選擇點擊「Custom Code」，然後點擊上方「ADD NEW」。
Step2. 添加自定義的 JS ( 以 Google Adsense 為例)
以 Google Adsense 的廣告 JS 程式為例，將程式置於網頁中就會出現廣告，並獲得廣告分潤。
將程式複製貼上到中間的框框裡，然後選擇放置的位置 head。
放在 head 是指讓 JS 比內容更早去讀取。
好了後，點擊發佈。
Step3. 設定顯示位置
點擊發佈後，會出現 Publish Settings 的跳窗，問我們程式要出現在網站什麼地方。我們可以選擇「整個網站」，也可以調整成只出現在某些文章或是頁面中。
最後不要忘記回到網站看看有沒有出現設定好的 JS 程式。
連絡我
如果對內容有什麼疑問，歡迎留言討論。
https://lashiblog.notion.site/12af1617f1c680d7a7c6dd8ccda8eeb7