如何使用 Elementor 和 PowerPack 創建登陸頁面

WordPress 讓每個人都可以輕鬆建立自己的在線形象，無論是博客、商業網站還是複雜的 ERP。 WordPress 主題和插件使用戶可以輕鬆構建自己的網站，而無需擔心聘請專家。 Page Builder 插件在改變使用 WordPress 構建網站的方式方面發揮了至關重要的作用。 Elementor 就是這樣一種流行的頁面構建器插件。

如果您是一名網頁設計師，並且希望將您的設計變為現實而不必擔心代碼，您可以使用 Elementor。 但是，如果您是開發人員呢？ 好吧，如果您是開發人員，您也可以使用 Elementor，因為它具有對開發人員友好的功能和易於擴展的 API。

在這篇文章中，您將了解有關 Elementor 的更多信息，以及如何將其與 Elementor 插件一起使用以快速構建網站、登錄頁面、彈出窗口。

什麼是元素？

Elementor 是一個流行的 WordPress 頁面構建器插件。 Elementor 提供稱為小部件的即用型內容塊以及基本結構元素，如部分和列。

您可以將這些小部件拖放到 WordPress 網站的任何頁面上，並根據需要構建自定義佈局。

Elementor Pro 附帶 60 多個小部件和大量預設計模板，您可以使用它們來設計任何頁面。

元素的特點

Elementor 具有大量特性和功能，可以使您的網站開發更加舒適和快捷。 讓我們看看 Elementor 值得擁有的所有令人印象深刻的功能。

快速和容易使用

Elementor 針對性能進行了優化。 即使您是新手用戶，您也會發現它在 Elementor 中非常易於使用和導航。 您永遠不會覺得 Elementor 將您拖回到您的設計過程中，只會讓您快速輕鬆地完成工作。

雖然 Elementor 速度很快，但當您使用 Cloudways Elementor 託管時，您可以從 Elementor 中獲得更多收益。 CW 關乎性能，並提供對服務器運行方式的超級控制。 在安全方面， Cloudways提供真正可靠和安全的服務器，由其主動安全實踐管理，以確保您的服務器安全無虞。 Cloudways 附帶的功能數量在當今行業中很難找到。

預先設計的頁面模板

使用 Elementor，您可以獲得大量預先設計的模板，只需單擊一下即可創建網頁。 幾乎每個網頁類別都有模板，如登錄頁面、關於頁面等，可以使網站設計過程更快。

如果您在 Elementor 庫中找不到好的模板，那麼您可以查看第三方 Elementor 模板。 憑藉蓬勃發展的設計師和開發人員社區，將 Elementor 提升到一個新的水平很容易。

加載了小部件

免費版和專業版 Elementor 都帶有加載功能的小部件。 從簡單的內容小部件（如標題、文本編輯器、按鈕）到高級小部件（如帖子網格、登錄表單、WooCommerce、社交共享），您可以使用 Elementor 獲得許多功能。

如果您希望在小部件方面擁有更多功能，您可以嘗試第三方 Elementor 插件。 我們建議使用 PowerPack for Elementor。 它是 Elementor 的領先插件，由流行的 PowerPack Beaver Builder 插件背後的同一團隊構建。

元素彈出生成器

彈出窗口構建器是 Elementor 構建器的最新成員之一。 彈出窗口構建器功能消除了在您的網站上使用第三方彈出窗口構建器插件的需要。 您可以使用 Elementor 設計具有高級定位規則和功能的令人印象深刻的彈出窗口。

您可以創建登錄表單、全屏墊、折扣彈出窗口，以及使用彈出窗口構建器功能無法創建的內容。

全局設置

構建網站時，保持一致的顏色設置、排版等很重要。您可以預先自定義顏色、字體甚至顏色選擇器，以使用 Elementor 中的全局設置簡化您的設計過程。

構建主題部分，如頁眉、頁腳、檔案等。

使用 Elementor，您的設計不僅限於頁面的內容區域。 您可以創建自定義頁眉、頁腳、側邊欄和網站的幾乎每個部分，而不必擔心編寫代碼。 所有這些都可以使用 Elementor Pro 中的主題生成器功能輕鬆創建。

動態內容

借助 Elementor Pro 中的動態內容功能，您可以顯示來自 WordPress 自定義字段、ACF、工具集、Pod、MetaBox 或任何其他自定義字段插件的動態數據/內容。 您可以使用自定義字段中的數據，並在站點的任何部分使用 Elementor 小部件顯示它們。 您可以在此處了解有關動態內容的更多信息。

精簡版和專業版

雖然 Elementor 有很多東西可以提供，但用戶沒有必要支付巨額費用才能訪問它。 實際上，Elementor 有兩個版本，Lite 和 Pro。 您可以在 lite 版本本身中訪問 Elementor 的許多功能。 兩個版本都有自己的功能。 這是 Elementor Lite 和 Pro 的詳細比較，可以幫助您做出決定。

用於 Elementor 的 PowerPack

Elementor 絕對是整個包。 以最小的學習角度開始設計網頁所需的唯一工具。

有時您在使用 Elementor 時可能會感到有些受限。 為此，諸如PowerPack Elementor附加組件之類的編碼良好的第三方附加組件可以派上用場。 該插件是同類插件中最好的插件之一，它提供了出色且令人印象深刻的小部件，並為用戶提供了大量自定義選項。

目前，PowerPack 專業版中有 50 多個小部件，並且團隊不斷添加新的小部件，使其成為 Elementor 插件中的絕佳選擇。

PowerPack 由專業的 WordPress 開發人員和設計師團隊構建，並考慮到性能。 該插件編碼良好並定期更新，以兼容最新版本的 Elementor 和 WordPress

讓我們看看如何結合使用 Elementor 和 PowerPack 插件來創建出色的網頁。

創建登陸頁面

在本教程中，您將學習如何使用 Elementor 和 PowerPack Elementor 插件創建快速登錄頁面。 Elementor 入門很容易，這一切都歸功於用戶友好的界面。

請確保您的站點上同時安裝了 Elementor 和 PowerPack。 您可以從以下鏈接獲取免費版本：

1. 元素
2. Elementor 的 PowerPack Lite

使用 Elementor 創建頁面

登錄到您的 WordPress 管理儀表板，然後單擊Pages下的Add New選項。 現在為您的頁面指定一個標題/名稱，然後單擊“使用 Elementor 編輯”按鈕。

在本教程中，我們將為比薩店創建一個登錄頁面，因此我們將相應地命名我們的頁面。 我們的最終結果應該是這樣的：

讓我們從第一部分開始。 在我們這樣做之前，通過單擊編輯器左下角的小設置圖標將佈局更改為Elementor Canvas 。

第 1 步：英雄部分

英雄部分包括背景圖片、兩個標題小部件和一個 CTA 按鈕。

首先，單擊加號圖標並從選項中添加單列結構。 現在轉到部分設置並啟用拉伸部分選項，然後從高級選項卡將底部和頂部填充設置為250 。

現在，您可以從樣式選項卡 > 背景類型 > 經典中選擇所需的背景圖像，然後從媒體顯示中選擇圖像。

我們已經準備好了背景。 現在讓我們將標題和按鈕添加到我們的英雄部分。

將雙標題小部件拖放到頁面上並分別更改文本。 現在，確保您相應地劃分第一個和第二個標題，以更加強調價格，如下圖所示。 改變標題的兩個部分的排版。

您還可以進行許多其他更改，使您的英雄稱號成為您想要的方式。

進行更改後，將另一個標題小部件拖放到雙標題下方，並根據需要更改文本和排版設置，這裡我將文本大小更改為90 ，字體更改為Elsie ，字體粗細更改為600 。

現在我們將添加 CTA 按鈕。

將 Elementor Button 小部件拖放到 Heading 小部件正下方的部分。 現在我們將開始更改按鈕的設置。

以下是我對按鈕所做的更改：

• 將文本更改為立即訂購！
• 按鈕居中對齊。
• 添加了CTA 鏈接
• 將排版更改為 Elise； 24;600 分別用於字體、大小和粗細。
• 將背景顏色更改為紅色（ #ff0000 ），將字體顏色更改為白色（ #ff0000 ）。
• 加入填充18,40，18，40為上，右，下，左分別。

進行更改後，這就是英雄部分的樣子。

第 2 步：關於部分

現在我們將處理關於部分，繼續並通過單擊“+”圖標向頁面添加兩列結構。

現在我們的目標是創建一個與此類似的佈局，因此我們將向左列添加標題小部件、文本編輯器小部件和推薦小部件。 在右側的列中，我們將添加一個 Heading 小部件、Text 小部件和 Button 小部件。

只需開始在該部分拖放小部件並將它們更改為與上面提供的圖像中的一樣。 添加標題並更改相同的排版。

這是它的樣子：

現在在左列的標題下方添加文本編輯器，並將排版更改為下面顯示的相同。

現在我們將在文本編輯器小部件下方添加推薦輪播小部件。 添加“項目”或推薦以顯示在您的網站上。 您還可以使用 PowerPack 的 Testimonials 小部件，它提供了更多的自定義功能。

完成更改後，關於部分的左列應如下所示。

現在對於右列，添加背景以向該部分添加一點對比。

現在創建我們在左列上創建的標題的副本，並將其拖放到右列上。 對文本編輯器執行相同操作，因為這將使您免於不必要的冗餘並節省時間。 現在對於按鈕，只需從 Hero 部分複制按鈕並將其拖動並移動到 About 部分的右列。

從編輯列> 佈局> 垂直對齊將右列垂直對齊到中間，您的“關於”部分已準備就緒！

這是關於部分的最終結果：

第 3 步：“了解更多”CTA 部分

我們將添加另一部分談論比薩店。 這部分將類似於我們之前創建的部分，但結構會略有不同。

所以，我們希望我們的最終結果是這樣的：

你有沒有註意到這裡有類似的東西？

是的！ 標題、文本編輯器與我們之前創建的類似。 因此，我們不會重新設計所有小部件，而是簡單地複制它們並將它們拖動到位。

我們開始做吧！

首先，添加一個新的兩列結構並轉到部分設置並添加媒體窗口中的背景圖像並添加100 的頂部填充以使面板看起來更寬敞。 此外，從設置中啟用拉伸部分選項。

現在轉到上一部分並複制標題、文本編輯器和按鈕小部件。 您可以通過右鍵單擊小部件並選擇重複選項來簡單地執行此操作。 複製後，將復制的小部件拖放到新位置。

這是該部分的樣子：

現在對於右列，拖放圖像小部件並從媒體庫中選擇圖像。 根據圖像大小等調整圖像，完成後，這就是該部分的樣子。

第 4 步：聯繫/訂單部分

這是幫助用戶下訂單的 CTA 部分。 現在，這部分應該包括什麼？ 讓我們看看我們的目標是在這裡做什麼。

我們需要通過 PowerPack 創建兩個標題和文本編輯器小部件、一個聯繫表單和價目表菜單小部件。

首先，我們知道我們必須保持標題和文本編輯器的設計和外觀相同。 您可以繼續從上一節複製它們並將它們放在此處。 現在用你想要的文本更改那裡的文本。

您可以使用 Elementor Pro 中的表單小部件通過簡單的拖放過程創建聯繫表單。 完成此操作後，聯繫表格將出現在頁面上。 現在您可以對錶單進行進一步的自定義。 以下是我所做的更改：

• 添加了表單字段並更改了字段大小。
• 更改了按鈕的文本、大小和對齊方式。
• 添加電子郵件作為提交按鈕操作並添加電子郵件詳細信息。
• 調整了列間距並重新設計了文本和字段的排版和顏色
• 使聯繫表看起來更吸引人的其他必要更改。

如果您使用任何联系表單插件，如 Gravity Forms、WPForms、Ninja Forms 等，那麼您可以使用 PowerPack 的表單樣式器小部件來使用 Elementor 設置表單樣式。

現在，在右欄中，我們將添加產品的價格表。 為此，我們將使用 PowerPack 的價格菜單小部件。 只需拖放它，添加細節並更改設計和佈局。 這就是整個部分的樣子：

立即進入贈品！

Cloudways 主辦的 PowerPack 贈品

收緊！

進行所有更改後，這就是我們整個佈局的樣子。

現在，您也可以使用 Elementor 和 PowerPack for Elementor 為自己製作漂亮的佈局。 雖然 Elementor 提供了許多功能，但 PowerPack 通過創造性的、面向功能的小部件進一步擴展了它。 工具包中有 50 多個非常有用的小部件，您可以更快地構建網站。

Elementor 和 PowerPack 可以為您節省時間、精力並幫助您擴大網頁設計業務。 不僅如此，這兩種產品都得到了 WordPress 專家團隊的支持，因此您可以完全放心。