了解使用 Elementor 在 WordPress 中構建美觀而有效的登錄頁面的簡單，直觀和不需要程式碼的方法。
有很多方法可以構建成功的登錄頁面。
為什麼要遵循此特定教程，而不要遵循其他教程？
您可能會問，本分步教程具有幾個關鍵優勢：
讓我們首先快速瀏覽一下今天將要構建的登錄頁面。
著陸頁是您網站上專門為特定營銷活動創建的頁面。著陸頁是在考慮明確的號召性用語 (CTA) 目標的情況下完成的，它們通常比常規博客文章或網站頁面產生更高的轉化率。它們也是生成潛在客戶和創建用於營銷目的的電子郵件列表以及加強社交媒體中的存在的良好來源。
著陸頁和常規頁之間有一些區別，例如首頁，它們的頁首和頁尾 選單 鏈接較少或沒有，它們更具可視性，並且往往具有清晰的消息傳遞。對目標網頁進行分類的最常見方法是潛在客戶生成網頁和點擊型網頁。
要成功遵循本指南，您需要：
您可以在域名和託管下使目標網頁處於活動狀態，也可以使用諸如 Flywheel 的 Local 之類的軟件將其本地存儲在電腦之上。
您將創建一個頁面，其中包括：
在開始實際的著陸頁設計之前，正確設置 視覺編輯器 很重要。
我們首先選擇 Elementor Canvas 頁面佈局。這為我們提供了一個乾淨的頁面，沒有頁首，頁局或 資訊欄。建立目標網頁時，這是一個不錯的選擇。
然後，我們將默認顏色設置如下：主要顏色是白色，次要顏色和文本-黑色。添加新的小部件時，將自動設置默認顏色，從而使我們的工作更加輕鬆。
讓我們對字體做同樣的事情。我已經將主要和輔助標題字體設置為 Adobe Typekit 字體，但是您可以根據需要設置自己的字體。
關於顏色選擇器，我們設置了顏色，因此在構建頁面時可以快速訪問它們。
登陸頁面主視覺
我們頂部的淺藍色部分包括標題，文本編輯器和按鈕工具件。
這裡有什麼特別之處：背景圖像混合模式和重疊的標題。
我們是如何做到的：我們將背景色設置為藍色。背景疊加層為我們提供了在頂部設置另一層的選項，這一次是設置圖像疊加層。混合模式是 Elementor 2.1 中的新選項。它的作用是將覆蓋層與淺藍色背景混合。我們選擇相乘或加深，然後檢查這如何影響圖像。
為了使標題重疊，我們轉到第一個標題的高級設置，並在底部添加一個負邊距。
著陸頁頁首，導航區域有 3 列，包括一個圖像小部件，一個選單小工具和一個按鈕。
這裡的特殊之處：導航鏈接可幫助訪問者滾動到頁面中的相關點。
我們是如何做到的：我們稍後將使用 錨點 (Anchor) 小部件實現此功能。菜單有 3 個鏈接：關於，功能和圖庫。每個鏈接都使用井號標籤連接到相關部分。
登陸頁面關於
關於區域將是一個單列區域。它將包括圖標，標題 和文本編輯器小部件。這部分很簡單。標題與頂部標題具有相同的樣式，我們只更改了陰影一點。
這裡有什麼特別的：圖標顯示為被標題覆蓋
我們是如何做到的：我們減小了圖標的大小，並設置了一個底邊減去負的邊距。
此功能部分包括左側的大 Vespa 圖像和右側的 3 個服務列表。
此處有什麼特別之處：對於此功能部分，我們重複上一部分中使用的背景圖標效果。
我們如何做到的：為了獲得這種效果，我們將圖標小部件的邊距設置設置為底部邊距 40px，左側邊距 -20。我們可以將此首次服務重複 3 次。
提示 — 如果您要復制的部分或任何其他元素，請首先使其可 移動，然後再進行複制。
登陸頁面畫廊
我們要添加的下一個區域是 圖片庫。在這裡，我們有一個大標題，還有一個由號召性用語和其他小部件組成的網格。這裡有什麼特別之處：畫廊網格由各種小部件組成
我們如何做到的：
為了創建這個像畫廊一樣的網格，我們將使用欄位 (Columns) 小部件來創建一個內部部分。 我們將結合幾個小部件和一個背景視頻，以創建一個風格獨特的畫廊。 我們使用 空白欄位 (Spacer) 小部件，因此我們可以在左列設置背景顏色。我們對中心列執行相同的操作。
我們還添加了另一個列小部件部分，這一次我們將在樣式下設置影片的背景類型。在新的 Elementor 2.1 中，您可以設置視頻的開始時間和結束時間。這對於創建後台循環非常有用。
登陸頁面號召性用語表格
這是我們的聯繫區域，它是每個頁面的重要組成部分，允許訪問者與網站所有者進行交流。使用 Elementor 的可視表單構建器，我們可以輕鬆設置聯繫表單並自定義其樣式以適合整個頁面。我們還可以使用 Elementor 的內置表單集成功能將其無縫連接到諸如 MailChimp 的電子郵件營銷服務。
這裡有什麼特別之處：背景混合模式效果
我們是如何做到的：添加圖像疊加層並使用混合模式乘以設置進行設置。
我們希望菜單保持粘性並在向下滾動時保持在頂部。
這裡的特別之處：帶有 導航超連結 的便利選單
我們是如何做到的：我們將通過選擇編輯部分，高級，滾動效果，固定頂部來進行設置。我們可以設置將其粘在哪些設備上，以及與頂部的間距。我們還添加了錨點，以便訪問者能夠輕鬆瀏覽頁面。為此，我們在每個部分中拖動錨點小部件。
現在有關導航的一些技巧；如您所見，導航區域在整個站點中都是可見的，但是如果我們想稍微隱藏一下該怎麼辦？
這裡有什麼特別之處：當用戶滾動到頁面上的某個點時，隱藏導航。
我們是如何做到的：我們將選擇導航部分，高級，在 z-index 下給它一個
在 Gallery 區域設置下，給它一個樣式，給它一個白色背景。在高級選項卡下，z-index 將其設置為 2。這意味著它應該覆蓋菜單部分。讓我們看看這是否有效。我們將向下滾動並簽出-導航已結束。
讓我們來看看我們已經創建了什麼。看起來很酷吧？
登陸頁面 WordPress
使用著陸頁範本而不是從頭開始構建
在本文中，您學習了從頭開始構建登錄頁面的過程，這是我們完成了登錄頁面每個部分的創建過程的過程。
另一種方法是使用 Elementor 的登錄頁面模板並根據需要自定義它們。您可以在 Elementor 的免費和 Pro 範本庫中找到一百多個全頁範本。瀏覽列表，然後選擇最適合您的列表。
另一個選擇是使用 Elementor 塊來快速構建著陸頁的各種元素。阻止類別包括英雄，號召性用語，常見問題，服務以及您可能需要的其他部分。
我們遇到的一個常見問題是哪個 WordPress 佈景主題 最適合 Elementor。但是，答案實際上是任何主題。
由於您使用的是 Canvas 空白範本，因此整個登錄頁面都是內置的 Elementor。選擇一個簡單的主題是確保快速加載目標頁面的好方法。
這些主題還帶有 Elementor 範本，可用於您的目標網頁。
動態內容-從一個地方控制多個登陸頁面
本教程的重點是創建靜態登錄頁面，但您可以輕鬆創建登錄頁面模板，並使用 Elementor 的動態內容功能將該模板屬性應用於多個登錄頁面。這樣，您可以對單個模板進行更改，並使它影響您的登錄頁面。
引用官方文獻和參考來源：
如何使用 Elementor 建立 Landing Page 教學
iThome鐵人賽
看影片追技術