WooCommerce + Elementor：讓我們構建很酷的東西

已發表: 2022-07-27

您想在不聘請開發人員的情況下調整和設計您的 WordPress 網站嗎？好消息：使用 WordPress 頁面構建器插件完全可以實現。

WordPress 頁面構建器插件帶有直觀的拖放界面，可以創建漂亮的自定義頁面和網站。因此，無論您的技能或技術知識如何，頁面構建器插件都可以讓您輕鬆設計理想的網站，而無需編寫任何代碼。

現在，如果您想知道應該考慮使用哪個 WordPress 頁面構建器插件，那麼您來對地方了。在本文中，我們將回顧最流行的選項之一：Elementor，它被認為是黃金標準。 Elementor 是安裝量第二多的 WordPress 插件，有 200 萬次活動安裝——大約 15.9% 的 WordPress 網站使用。

我們將從 Elementor 的簡要概述開始，並進一步審查插件的界面、功能和定價，以幫助您確定它是否是您網站的正確選擇。我們走吧！

Elementor 插件：簡要概述

Elementor 是一個可視化拖放式 WordPress 頁面構建器插件，與 WooCommerce 或 WordPress 主題附帶的標準頁面模板相比，它可以讓您創建獨特的網頁和帖子。

它不需要編碼，允許您輕鬆配置設置並使用拖放工具組織頁面的內容和元素。

讓我們通過查看 Elementor 界面的工作原理來開始插件審查。

了解 Elementor 插件界面

與許多其他頁面構建器插件相比，Elementor 擁有最簡單、最無縫的界面之一。首次啟動插件時，您將進入如下頁面：

點狀灰色區域是您的內容區域。在此區域之外，您的常規主題將出現，而在虛線區域內，您可以添加小部件並構建您自己的設計。

在左側，您會看到小部件，它們充當構建塊，您可以將它們放在一起來設計您的頁面。在這些小部件下方，您將找到用於預覽設計、撤消更改或打開響應模式的常規設置，如圖所示。

以下是在頁面上拖放所需元素的簡單方法：

當您在頁面上放置元素時 - Elementor 將元素分為兩個佈局結構，給出兩個不同的結構元素，如下所示。

這些結構要素包括：

部分：標有藍色。
列：位於用黑色標記的部分內。您可以根據需要在該部分中添加任意數量的列。

放置元素後，您可以通過調整寬度和更改列間距和高度來輕鬆自定義其佈局。

此外，您還可以根據您的特定要求選擇合適的部分結構，並在列中添加其他元素，如圖像、視頻或圖標。

例如，我添加了一張圖片，並從默認的 Elementor 圖片庫中選擇了一張，如下圖所示。您可以更改圖像的大小和對齊方式、添加標題並鏈接合適的 URL。

要進一步設置元素、結構或列的樣式 - 您可以使用側邊欄中的樣式和高級選項卡。只需單擊要設置樣式的內容，然後單擊側邊欄選項卡即可進行更改。

您還可以通過單擊顯示在側邊欄右上角的方形圖標從選項卡導航到元素側邊欄。

因此，Elementor 非常易於使用，並且具有簡單的拖放和簡單的自定義選項 - 您可以立即構建您夢想中的網站。

現在不用花太多時間，讓我們直接進入 Elementor 頁面構建器的功能。

使其成為 WooCommerce 的出色頁面構建器的頂級 Elementor 功能

以下是 Elementor 的一些出色優勢，使其成為 WordPress 和 WooCommerce 網站中最受歡迎的頁面構建器之一。

廣泛的預製模板庫

Elementor 提供了廣泛的模板。單擊下面的添加模板圖標以添加模板。

從Elementor 模板庫中選擇 300 多個模板，只需單擊一下即可將它們添加到您的頁面。

自 Elementor 2.0 發布以來，這些模板有兩種格式：

塊：為特定部分而不是整個頁面提供設計。例如，您可以使用塊將關於公司部分或預構建的聯繫人部分添加到現有頁面佈局。

頁面 -提供整頁設計，您可以通過單擊導入並根據需要進行調整。

您還可以將一些設計保存為塊和模板，以便以後在其他頁面或網站上重複使用——這使得在整個網站中維護通用模板設計變得超級方便。

它還消除了每次從頭開始構建新頁面設計的麻煩。

響應式設計控件和移動預覽

移動設備的使用量每個月都在持續增長，大約 73.1% 的網頁設計師認為無響應的頁面設計是網站放棄的最大原因之一。

您在 Elementor 上創建的所有設計和頁面都會自動響應，並且在移動設備上看起來很棒。此外，您無需離開界面即可快速預覽您的網站在其他設備上的外觀。

單擊側邊欄底部的響應模式按鈕，然後通過單擊下圖中突出顯示的按鈕預覽您網站的桌面、移動和平板電腦版本。

它允許您根據設備類型自定義頁面設計，並允許您在某些設備上顯示或隱藏某些小部件。例如，如果您網站的桌面版本有一張巨大的英雄圖片，您可能會避免在您網站的移動版本上顯示該圖片。您可以選擇該圖像或您希望隱藏的任何部分，並使用Elementor 的響應式設計控件在移動設備上隱藏它們，只需單擊一下即可。

因此，它可以確保您的網站 100% 響應 - 所以它在所有設備上看起來都很棒，包括台式機、平板電腦和移動設備。

無限的定制選項

Elementor 的定制是無限的，並且沒有限制您如何設計您的網站及其元素。

Elementor 編輯器中的樣式和高級菜單提供了大量的樣式自定義選項。您可以根據多個屬性設置內容的樣式，包括顏色、寬度、大小、CSS 過濾器和邊框。

同時，高級菜單允許您管理佈局、運動效果、背景、邊框、屬性和其他因素，如下圖所示。

詳細的佈局控件

深入了解自定義選項，Elementor 讓您可以詳細控制佈局設計，因此您不必因為無法編寫自定義代碼而在設計靈活性上妥協。

Elementor 通過許多直觀的控制選項，可以輕鬆地將您的部分、小部件和列準確地定位在您想要的位置。

使用高級菜單中的佈局控件，您可以：

手動設置部分、小部件和列的邊距和填充。
選擇部分的寬度- 默認、全寬、內嵌和自定義。
調整小部件在列中的位置- 默認、固定和絕對。
調整列之間的間隙並為乾淨的佈局創建一個空白區域。

因此，無需編碼技能，您就可以輕鬆調整小部件的位置並根據需要自定義列和部分。

帶有撤消/重做更改的完整進度修訂歷史記錄

Elementor 的最佳功能之一是它可以讓您預覽您所做的所有更改的整個歷史記錄，從而記錄歷史記錄中的每個操作。

此外，您可以在必要時輕鬆撤消更改並恢復到以前的版本。此外，每當您保存新設計時，如果需要，您可以輕鬆恢復到全新的版本。

留下乾淨的代碼

如果您將來出於某種原因希望停用 Elementor，則不必擔心它會留下大量短代碼，例如 Divi Builder。

Elementor 留下乾淨的代碼，確保最佳性能和頁面速度。

Elementor Pro 評論

雖然核心 Elementor 頁面構建器是開源且免費的，但您可以升級到 Elementor Pro 版本——它提供了額外的有用功能。

以下是新 Elementor Pro 插件的一些功能的簡要介紹：

它使您可以構建整個 WordPress 主題。
它有更多令人興奮的小部件，包括滑塊、社交分享按鈕、表單、倒數計時器和登錄表單。
它提供了大量優質的優質 Elementor Pro 模板。

因此，如果您想要更多功能、高級模板和全局小部件——您可以購買 Elementor Pro 插件，起價僅為 49 美元。

Elementor 定價審查

如果您想構建簡單且基本樣式的網站，該插件的免費版本應該足以滿足您的需求——考慮成為功能最豐富的免費頁面構建器。

但是，為了創建更專業的網站，Elementor 提供了四個具有高級功能的高級計劃，例如 VIP 支持和 Elementor Expert Profile。

Elementor 插件的 Essential、Expert、Studio 和 Agency 計劃每年收費 49 美元、199 美元、499 美元和 999 美元。因此，Elementor 適合所有人，無論您是網頁設計師、開發人員還是代理所有者 - Elementor 都提供滿足各種需求的功能。

結論：最終判決

經過全面審查，可以肯定地說 Elementor 提供了構建 WordPress 或 WooCommerce 網站所需的所有基本功能。

它帶有輕巧、簡單、易於理解和不臃腫的界面，讓沒有編碼經驗的網站設計師可以構建漂亮的網站。最好的部分是它帶有滿足每個人需求的定價計劃。此外，Elementor 開發人員繼續發布和推出新功能和改進。

在審查了插件的易用性、整體功能、性能、支持、界面和定價之後，我們將 Elementor 排在 WordPress 頁面構建器插件的頂部。因此，請自行查看並嘗試 Elementor 插件，然後選擇適合您特定業務需求的計劃。