如何在 WordPress 中使用 Elementor 頁面構建器

當我們談論 WordPress 頁面構建器時，最受歡迎、活躍安裝數量最多、社區最大的絕對是 Elementor。 到目前為止，大約有 800 萬多個站點使用 Elementor 構建。 許多專家推薦使用它，因為它在構建 WordPress 網站時易於使用、速度快和巨大的可能性。

我已經測試了 Elementor 的 Pro 版本並構建了一個登陸頁面。 它帶有拖放功能，適用於任何主題，您可以同時使用所有 Free、Pro 和 WordPress 小部件。 讓我們閱讀本文以了解有關使用 WordPress 安裝和配置 Elementor 的更多信息。

為什麼選擇 Elementor 頁面生成器？

Elementor 是目前市場上第一個也是最先進的 WordPress 頁面構建器之一。 它還擁有一個龐大的生態系統，許多較小的作者正在構建有用的附加組件和模板，您可以使用它們來減少最終結果所需的時間。

在 Elementor 的情況下，最終結果可能是一個非常棒的網站，設計精良，具有您需要或可能需要的所有功能。 您不會找到任何無法使用 Elementor 構建的 WordPress 網站。 如果您需要一些額外的功能，可以使用短代碼輕鬆實現。

Elementor 頁面生成器的功能

Elementor 的免費版本提供的 Elements 數量有限，但使用 Pro 版本，您可以獲得諸如 QI、Ultimate Add Ons 等附加組件。此外，您將擁有大量有用的元素和模板來輕鬆構建您的網站.

忽略 Gutenberg 和 Elementor 的 Crocoblock 插件是不公平的，這是大多數 Elementor 用戶最喜歡的工具之一，因為它擴展了原生 Elementor 的功能。

Elementor 將其功能分為 4 類。

1. 基本小工具

Basic Widgets 隨免費版本一起提供，它們足以構建一個令人驚嘆的網站，不需要目錄、投資組合或表單等高級選項。 此外，在免費版本中，您無法構建標題/導航菜單，您可能需要找到一些帶有您喜歡的導航菜單的酷 WordPress 主題。

2. 專業小工具

帶有 Elementor Pro 的 Pro Widgets 幾乎涵蓋了構建任何類型網站所需的每個方面和每個小部件。 添加和選擇來自不同類別、帖子類型的帖子或簡單地列出最新的帖子、價格表、圖庫、翻轉框、輕鬆嵌入的社交媒體網絡、各種媒體輪播、Lottie Widget 和 HotSpot（我將在稍後討論這個）。

3. 主題元素

主題元素也隨 Elementor Pro 一起提供，當然它們對於構建所有模板頁面和單個帖子模板很重要。 如您所知，有些頁面會動態填充類別、標籤、作者等內容。

對於這些頁面，您需要使用主題元素創建模板。 單個帖子也是如此，您可以在其中為您的帖子設計一個漂亮的模板，所有帖子都將使用該模板，而無需每次都創建它們。 只需添加您習慣的內容即可。

4. WooCommerce 小部件

最後但並非最不重要的是，WooCommerce 小部件。 這些小部件允許您使用 WooCommerce 元素輕鬆地再次創建類似於 Theme Builder、模板頁面和單個產品模板。

Elementor Page Builder 的定價和計劃

Elementor Pro 附帶 5 種不同的計劃，所有計劃都包含相同的 Elementor Pro 頁面構建器和功能，例如：

• 拖放實時編輯器
• 響應式設計
• 90 多個基本和專業小工具
• 300 多個基本和專業模板
• 主題生成器

最低的計劃是 Essential for 1 個站點，價格為 49 美元。 使用此計劃，您可以獲得高級支持，這意味著您可以在 24 小時內獲得響應。 下一個計劃是高級計劃，它以 99 美元的價格涵蓋 3 個站點的許可證，並提供相同類型的支持。

可能最受歡迎的是 Expert，25 個站點售價 199 美元。 此外，您將獲得 Elementor 專家檔案，您可以在其中發佈在 Elementor 中完成的項目並獲得一些新客戶。

頂部之前的一個是 100 個站點的 Studio，價格為 499 美元，您可以享受 VIP 支持的額外好處，這意味著您有優先權，您的票將在 30 分鐘內得到答复。 以 1000 美元的價格購買 1000 個站點的最昂貴的計劃代理也是如此。

所有計劃都是年度計劃，如果您想知道訂閱到期後網站會發生什麼情況，答案是，網站看起來和以前一樣，但您將無法編輯或使用 Elementro Pro 中的元素和模板。

Elementor 的系統/託管要求

根據 Elementor 的系統要求頁面，即使使用 128MB 的 PHP、MySQL 5.6 或更高版本或 MariaDB 10.0 或更高版本，它也應該可以工作。 此外，它應該適用於任何 PHP 7+。 出於測試目的，我使用了帶有 2GB PHP 內存的 VultrHF。

當然，您需要最新的 WordPress 版本和所有其他插件。

安裝和配置 Elementor 頁面生成器

安裝 Elementor 的免費版本與安裝 WordPress 插件存儲庫上的任何其他插件相同，轉到 WordPress 儀表板 → 插件 → 添加新，瀏覽 Elementor，安裝並激活插件。

對於 Pro 版本，您需要購買將在 Elementor 自動創建帳戶的計劃。 當您登錄時，您將看到下載按鈕以下載最新的 Pro 版本。

當您仍然登錄到 Elementor 儀表板時，登錄到您的 WordPress 儀表板 → 插件 → 添加新並選擇上傳，從您的計算機瀏覽下載的 Elementor Pro 文件，安裝並激活它。

在 WordPress 儀表板的左側邊欄中完成後，轉到 Elementor → 單擊許可證 → 單擊連接和激活按鈕。

單擊後，它會自動將您重定向到 Elementor 上的儀表板以激活它。 單擊綠色的激活按鈕，您就完成了。 您的 Elementor Pro 已連接並激活。

激活後，您將看到確認您的 Elementor 已激活。 但是，如果您已經在臨時域上構建了站點並且您不想購買另一個實時許可證，您可以輕鬆地斷開臨時帳戶並在實時域上激活它。

是時候開始使用 Elementor 並構建您的網站了。 我的建議是使用 Elementor 專門為 Elementor 構建的 Hello 主題。

為此，讓我們首先創建一個頁面“主頁”並使用 Elementor 對其進行編輯。 轉到頁面 → 添加新，將其命名為主頁並發布，然後單擊使用 Elementor 編輯按鈕。

在“編輯”頁面上，您將看到無法編輯的元素，因為佈局設置為默認值。 要在空畫布上使用 Elementor，請通過單擊左下角的齒輪圖標來選擇 Elementor Full Width 或 Elementor Canvas。

在開始構建站點之前，請確保單擊左上角的漢堡圖標並設置其餘工作所需的所有全局設置。

站點設置與設置主題非常相似。 在這裡，您可以為每個 HTML 標籤選擇全局顏色、您將使用的字體以及完整的站點版式。

除此之外，您還可以設置全局按鈕樣式、頁眉、頁腳、自定義 CSS（如果需要），以及您需要設置的所有內容，並在整個站點中保持相同以保持一致性。

第二個選項是 Theme Builder，它允許您創建模板頁面和單個帖子/產品模板，這些模板將由特定的動態生成的頁面、帖子或產品自動使用。 就像每個 WordPress 主題都需要有模板文件來顯示上述所有內容一樣，Elementor 讓您無需編寫任何代碼即可完成。

最後一個選項是用戶首選項，您可以在其中設置 Elementor 中的工作環境，不會影響站點本身，只會影響您作為管理員的 UI。

要啟動您的網站，所有可用的小部件都放置在左側邊欄中，所有內容都可以通過拖放進行可視化編輯。 如果您想要一種更簡單的方法，您可以通過單擊文件夾圖標使用預製塊或模板之一開始。

文件夾圖標將打開一個彈出窗口，您可以在其中看到預製的塊和模板，以及您之前保存的塊和模板。 您還可以保存您創建的塊或整個模板，並在其他一些內部頁面上重新使用它。 將您保存的塊用於推薦是很常見的，一些特定的號召性用語不應顯示在每個頁面上，而是顯示在某些頁面上。

當您在沒有任何經驗的情況下開始構建網站時，您還需要了解一件事，它易於使用，非常直觀，並且在幾天內無需任何經驗，您將完全有能力為自己構建一個漂亮的網站，我什至可以說看起來很專業。

但是，您的網站需要在所有設備尺寸上看起來都很棒，並且與編輯桌面版本的方式相同，您可以編輯所有其他尺寸。 請注意，元素和小部件只能添加到桌面版本，然後您可以欺騙較小尺寸的外觀。

此外，您可以輕鬆設置小部件或部分在不同設備上的可見性，這樣您就可以在相似的部分中包含不同的內容，方法是讓一個部分在桌面上可見，但在平板電腦和移動設備上隱藏。 同樣，另一個隱藏在桌面上但在平板電腦和移動設備上可見。

要編輯手機和平板電腦版本，請單擊左側邊欄底部的圖標響應模式，它將在移動設備上顯示您的網站。 在頂部，您可以在不同的屏幕尺寸之間切換。

為更清晰起見，我添加了兩個部分，其中一個在移動設備和平板電腦上隱藏，另一部分在台式機上隱藏。 請看下面的例子。

最終結果是在移動設備上。

桌面上的最終結果只有一個部分，但不同的部分。

Cloudways 上的 Elementor 頁面構建器性能

Elementor 表現相當不錯，在 GTMetrix 上得分為 100，其他測試工具表現出非常出色的表現。 請注意，對於我們所做的所有測試，我尚未優化任何圖像以具有完全相同的頁面大小和圖像。

– Elementor 在 GTMetrix 上的結果

– Pingdom 工具上的 Elementor 結果

– Elementor 在 WebPageTest 上的結果

概括

如果您需要一個直觀且易於使用的頁面構建器，Elementor 可能涵蓋構建一個漂亮網站所需的所有方面。 如果您對 CSS 有任何了解，那麼從設計中構建像素完美的網站並不難。

憑藉龐大的社區和數百個擴展基本 Elementor 功能的附加組件和外部插件，我看不到任何類型的網站都無法使用 Elementor 構建。

我們經常看到 Elementor 是如何臃腫的，加載了很多不必要的代碼，很難優化，但是從測試中可以看出，Elementor 在 Cloudways 上的表現似乎相當不錯。 我已經測試了包含 25 張圖片和 7 個部分 + 頁眉和頁腳的登錄頁面，這高於主頁的平均水平。

Elementor 的另一個優點是學習曲線不陡峭但很輕鬆，通過使用一些預製模板或塊，只需幾分鐘，您就可以擁有一個設計精美、外觀現代的網站。