Elementor評論:使用此頁面構建器設計博客

已發表: 2020-11-10

想建立自己的網站嗎?

使用Elementor之類的工具,您不需要任何Web開發技能即可創建外觀精美的網頁。

Elementor構建器提供了一個拖放界面,使您可以構建外觀專業的網站,而無需編寫任何行代碼。

此Elementor評論將幫助您確定是否值得為您選擇。 我們將探討其功能,可用的定價計劃,使用方法以及應由誰獲得。

我們有很多工作要做,所以讓我們開始吧。

目錄

  • 1.什麼是Elementor?
  • 2.基本要素
  • 3.熟悉Elementor界面
  • 4. Elementor定價:專業版vs免費版
  • 5. Elementor很難掌握嗎?
  • 6.誰應該獲得Elementor?
  • 7.基本問題
  • 8.最後的想法

    什麼是Elementor?

    什麼是元素

    當我第一次開始使用WordPress建立網站時,我認為這個過程再簡單不過了。

    您只需輕拍一個預先構建的主題,然後在此處和此處應用一些自定義項,然後直接創建內容。

    但是,不可避免的是,您需要學習一些編碼來構建100%原始站點。

    儘管WordPress的庫中包含數千個主題,但仍有數百萬個網站在該平台上運行。 結果,很容易最終獲得具有大量外觀的通用網站。

    如果您想要看起來完全獨特的東西,則必須使用代碼對網站進行精確調整。

    那是在諸如Elementor之類的頁面構建器出現之前。

    使用Elementor,您可以通過將視覺元素從字面上拖放到頁面中來進行操作-隨心所欲地調整大小和位置。

    這是Elementor界面的先睹為快:

    元素預覽

    Elementor的主要功能

    為了使這篇評論能夠順利開始,讓我們快速快速地了解Elementor的主要功能。

    1.實時拖放式編輯器

    您想了解創建網站的最佳過程嗎?

    點擊保存並預覽更改。

    通過實時編輯器工作時,Elementor可以讓您體驗成就感。 它使用軟件界稱為“所見即所得”或所見即所得的編輯器。

    從添加新按鈕到調整文本對齊方式,您所做的一切都將實時預覽。

    Elementor Live編輯器

    這也使調整元素的屬性(例如尺寸,不透明度和邊框樣式)變得容易。

    使用代碼時,您需要輸入值並預覽頁面以查看是否正確。 借助Elementor實時頁面構建器,您可以在第一時間獲得正確的結果-無需反複試驗。

    Elementor Live編輯器的一部分

    2.大量的小部件

    在Elementor上,可以混合和匹配的視覺元素稱為小部件。

    當前的Elementor版本支持90多個小部件,您可以使用它們將網站的完美頁面拼湊在一起。

    在幾秒鐘內,您可以插入一個作者框,一個動畫標題,一個輪播-實際上是您在網站中所需的任何內容。

    只需使用“搜索小部件”字段來查找要添加到頁面的特定元素。

    如何搜索Elementor小部件

    3.預先設計的塊和頁面

    想要節省更多的Web開發時間嗎?

    您可以使用Elementor的預先設計的內容塊和頁面來構建網站的基本區域。

    要查看可用的塊和頁面,請單擊任何小部件區域上的文件夾圖標。 這將拉動Elementor的“圖書館”。

    Elementor Library快捷方式

    相應於常見問題,聯繫信息,推薦書,號召性用語等各個頁面部分的塊。 就像小部件一樣,您可以使用內置的搜索欄找到所需的塊。

    元素塊庫

    另一方面,頁面基本上是模板,可以幫助您可視化頁面設計的方向。

    一些示例是“正在建設中”頁面,登錄頁面和“關於”頁面。

    Elementor頁面模板

    4.建立在任何WordPress主題之上

    如果您不熟悉頁面構建器,您可能會擔心Elementor是否與您當前的WordPress主題兼容。

    請放心,它旨在與任何WordPress主題無縫協作。

    並且,如果您尚未完成博客主題的確定,請選擇其中任何一個Elementor主題。

    例如,編輯帖子可讓您將元素編織到指定的內容區域,而不會破壞主題的設計。

    內容區域可以根據您選擇的“結構”具有多個列。

    基本內容部分的結構

    5.彈出窗口生成器

    在網頁設計中,重要的是要確定頁面的關鍵元素以及如何突出顯示它們。

    如果您想將訪問者轉換為客戶,則希望他們看到諸如CTA和選擇加入表單之類的轉換元素。

    一種有效的方法是通過不會干擾用戶體驗的智能“彈出窗口”呈現這些元素。

    你猜怎麼了? 您也可以使用Elementor進行製作。

    甚至唾手可得的整個定制化彈出模板庫。

    Elementor彈出模板

    通過Elementor Popup Builder,您可以通過彈出窗口呈現從電子郵件訂閱框到“退出意圖”表單的所有內容。

    為確保彈出窗口不會惹惱讀者,您可以設置特定的觸發器來控制它們的出現時間。 例如,您可以將彈出窗口設置為在用戶滾動到某個元素時或退出時顯示。

    6. WooCommerce Builder

    是否想通過出售東西來通過WordPress網站獲利?

    Elementor還可以在沒有專業開發人員任何幫助的情況下幫助您建立在線商店。

    該平台通過WooCommerce運作, WooCommerce是專門為WordPress設計的電子商務平台。

    借助Elementor的WooCommerce Builder,您可以使用優雅的單個產品和產品歸檔頁面模板。 還有一堆WooCommerce小部件,可用於為虛擬店面增添趣味。

    這裡有些例子:

    • 產品圖片小部件
    • “添加到購物車”按鈕小部件
    • 產品定價小部件
    • WooCommerce麵包屑小部件
    • 產品圖片小部件

    自然,您需要準備好WooCommerce方面的內容才能創建由Elementor支持的在線商店。 準備工作包括將產品添加到WooCommerce目錄,配置付款系統等等。

    既然我們已經介紹了Elementor的一些關鍵功能,那麼讓我們深入了解該平台的功能。


    熟悉Elementor界面

    Elementor擁有乾淨的用戶界面,任何人都可以在不到一天的時間內學會。

    如果您已有WordPress網站,請考慮安裝免費版本的Elementor並隨本教程一起學習。

    您應該可以從官方插件存儲庫中找到它。

    如何在WordPress上安裝Elementor

    發射元素

    有兩種方法可以從WordPress儀表板啟動Elementor。

    激活後,您可以通過單擊WordPress頁面編輯器中的“使用Elementor編輯”來使用實時編輯器。

    使用Elementor按鈕編輯

    您還可以通過單擊“創建新帖子”直接從WordPress儀表板啟動實時編輯器。 但是,這僅在您要使用Elementor創建博客文章時才有用。

    創建新帖子按鈕

    無論您是在編輯帖子還是頁面,Elementor實時編輯器都應該看起來相同。


    使用元素

    在左側,您會找到主面板,您可以在其中找到小部件,更改設置等。

    全面披露:我在OS的“暗”模式下使用Elementor,這就是為什麼屏幕截圖看起來可能不同的原因。

    Elementor主面板

    要將小部件或元素添加到頁面,只需將其從主面板拖到現有部分中即可。

    可以在頁面的實時預覽中創建和管理版塊。 這些是帶有虛線邊框,兩個按鈕和“在此處拖動小部件”提示的空間。

    使用Elementor創建新帖子時,頁面內容區域的中間會有一個默認部分。 這是您無法刪除或移動的唯一部分。

    實時編輯器部分

    您可以參考下面的動畫,以了解如何使用Elementor向頁面添加元素。

    為了本指南的方便,讓我們添加一個動畫標題。

    添加動畫標題

    添加元素後,您可以在左側面板中更改其屬性。

    只需單擊要配置的元素以顯示適當的設置。

    如何編輯元素的設置

    當然,您可以在左側面板中訪問的設置取決於您可以選擇的元素。

    對於動畫標題的內容,您可以更改動畫樣式,形狀,文本,對齊方式,鏈接和HTML標籤。

    即使對於不懂技術的用戶,該界面也應該足夠簡單。

    編輯動畫標題

    您可以通過切換到“樣式”和“高級”選項卡來更改更多設置。

    同樣,可用設置取決於您正在編輯的元素。

    在“樣式”標籤下,您可以更改動畫形狀的顏色,厚度和行為。 您還可以為標題選擇新的字體和文本顏色。

    樣式和高級標籤

    容易吧?

    我很想探索Elementor的90多個小部件的設置。 不幸的是,這只會使這篇評論變得無聊。

    我的建議是通過自己下載插件來檢查免費的Elementor塊。

    繼續,讓我們談談管理頁面的內容部分。


    調整內容部分

    請注意,將元素添加到頁面的主要部分將為其創建一個新部分。

    例如,通過添加動畫標題,您現在在頁面上有兩個活動部分。

    Elementor Live編輯器部分

    向頁面添加部分的一種方法是單擊現有元素頂部的“加號”按鈕。

    添加部分按鈕

    應該在所選元素的頂部創建一個新的內容部分。

    關於上面的示例,您的新內容部分應顯示在動畫標題的正上方。

    添加了新部分

    您還可以通過將新的窗口小部件拖放到頁面中來創建新部分。

    這樣,Elementor會將其放在您先前創建的元素的底部。

    查看下面的動畫以了解其工作原理。

    添加新部分

    就是這樣-您現在知道如何為要使用的元素添加更多的內容部分。

    如果要並排放置元素,則需要在部分中添加列。

    為此,請右鍵單擊左上角的“編輯列”按鈕,然後單擊“添加新列”。

    如何添加新列

    重複此步驟,直到達到您的節中想要的列數。

    這是包含三列的部分:

    三欄式

    現在,您可以將新的窗口小部件拖動到這些列中的任何一個中。

    您還可以直接在實時編輯器窗口中調整每列的寬度。 只需單擊列邊框並向左或向右拖動-取決於您要實現的佈局。

    如何直接調整列邊框

    要修改列的外觀,請點擊“編輯列”按鈕。

    您可以從左側面板更改列的佈局,樣式和高級設置。 您可以調整的一些選項是列的背景,邊框,特殊效果和自定義CSS。

    列樣式設置

    是否需要更快的創建列的方法?

    您可以通過將“結構”應用於一個節來節省時間,該節可以包含多個具有不同佈局的列。

    創建新部分後,您可以通過單擊中心的“加號”按鈕來選擇結構。

    如何向部分添加結構

    將顯示可用結構的預覽,以幫助您選擇要使用的結構。

    選擇你的結構

    請記住,您仍然可以將結構應用於已經具有窗口小部件的部分。

    選擇一個部分後,單擊頂部欄中的“編輯部分”按鈕。

    更改部分結構的選項應顯示在左側面板上。

    變更部門結構

    還可以使用與單獨添加常規列相同的方式來調整結構列。 您可以使用鼠標或通過手動調整左側面板上的數字來完成此操作。


    創建全局小部件

    像您到目前為止所看到的一樣嗎?

    Elementor仍然有很多技巧。

    首先,您可以創建“全局窗口小部件”,可以在網站的多個區域中復制和粘貼這些窗口小部件。

    假設您要為電子書創建唯一的CTA按鈕。

    使用全局小部件,您不必每次在頁面上使用該按鈕時就創建該按鈕。 您只需要從左側面板轉到“全局”標籤,然後從那裡使用它即可。

    如果要將讀者吸引到網站的特定區域,這將非常有用。 它可以是產品頁面,訂閱表單,資源頁面​​或任何與轉換有關的內容。

    為了給您一個想法,我創建了一個全局小部件,該小部件將讀者指向我的逐步博客指南

    學習博客全局小部件

    要創建全局窗口小部件,請從一個基礎元素開始。

    假設您想像我一樣製作一個可重複使用的CTA按鈕。

    在Elementor主面板中,搜索“按鈕”小部件並將其添加到您的頁面。

    創建一個全局小部件

    然後,您可以按照自己的方式開始自定義小部件。

    讓我們通過更改CTA按鈕的顏色和字體來保持簡單。

    如果您一直在關注,您會知道我們可以通過導航到“樣式”標籤來做到這一點。

    自定義小部件樣式

    要將元素另存為全局窗口小部件,請將鼠標懸停在該元素上,然後右鍵單擊“編輯”按鈕。 在上下文菜單中,單擊“另存為全局文件”以創建全局窗口小部件。

    另存為全局窗口小部件上下文菜單

    下一步是為全局窗口小部件命名。 只需輸入您想記住小部件的方式,然後點擊“保存”即可。

    保存全局小部件

    恭喜,您剛剛使用Elementor創建了第一個全局小部件。

    現在,您應該可以在我之前向您顯示的“全局”標籤下找到它。

    全局小部件選項卡

    是否要更新您的全局小部件?

    將其放在頁面上的任何位置以打開左側面板中的“全局編輯”部分。 從那裡,單擊“編輯全局窗口小部件旁邊的“編輯”。

    編輯全局小部件

    無論何時要進行更改,都不必擔心更新全局小部件的每個副本。

    Elementor中全局小部件的每個實例都會實時更新。

    如果希望全局窗口小部件的此特定實例唯一,也可以單擊“取消鏈接按鈕。 您對該窗口小部件所做的任何更改都不會影響該全局窗口小部件的所有其他副本。


    Elementor定價:專業版vs免費版

    到現在為止,您應該對Elementor足夠了解,以決定是否值得您花費時間和金錢。

    看看到目前為止我們討論的功能,您很有可能至少正在考慮它。

    我知道我是第一次聽到Elementor音樂主題。

    有空的時候看看吧。 主題不僅引人注目,而且還封裝了您可以使用Elementor進行的操作。


    無論如何,您可能會對它要花多少錢感到好奇。

    好消息是,Elementor附帶了一個免費版本,您可以無限期使用它無限的頁面數。

    壞消息?

    它遠沒有Elementor Pro強大。

    為了幫助您決定是否要升級Elementor,讓我們比較一下免費版和專業版。


    Elementor Pro功能

    首先,如果您堅持使用Elementor的免費版本,則會錯過以下內容:

    • 全局小部件—對使用Elementor製作的全局小部件有一些想法嗎? 然後您必須為Elementor Pro掏錢,因為免費版不提供全局小部件。
    • Popup Builder-創建智能彈出窗口以吸引潛在客戶的注意也僅對Elementor Pro用戶可用。 對我而言,能夠確保您的CTA和價值主張的可見性是一個巨大的優勢。
    • 自定義字體-有時,唯一性只是選擇其他字體的問題。 Elementor Pro可讓您直接將自定義字體上傳到WordPress網站或從現有的800多個選項中進行選擇。
    • 主題生成器-使用Elementor的免費版本,您的主題的某些方面無法編輯。 Elementor Pro可以解鎖對主題的頁腳,頁眉和其他區域的完全控制,同時將設計保存為可重複使用的模板。
    • Pro模板套件-通過獲取Elementor Pro,您可以訪問由其內部專業設計師團隊創建的高級網站模板。 這些模板將快速跟踪您網站的發展,因此您可以快速進行內容創建。
    • WooCommerce Builder-是的-如果獲得Pro版本,則只能使用Elementor的WooCommerce Builder工具。 這包括各種WooCommerce小部件,這些小部件將改善WordPress網站上的在線商店體驗。

    Elementor Pro元素

    還值得指出的是,Elementor Pro升級允許訪問一長串有用的小部件。

    以下是示例:

    • 動畫標題
    • 帖子小部件
    • 照片庫
    • 投資組合小部件
    • 自訂表格
    • 登錄表單
    • 滑梯
    • 價目單價目表
    • 價格表
    • 翻蓋盒
    • 導航菜單
    • 視覺CTA
    • 塊引用
    • 媒體輪播
    • 推薦輪播
    • 倒數
    • 用戶評論
    • Facebook評論
    • Facebook嵌入
    • WooCommerce小部件
    • 倒數

    您可以在Elementor主面板的“ Pro”部分下找到這些小部件。

    Elementor Pro小部件

    您可以免費使用Elementor獲得什麼?

    因此,我們確定Elementor Pro可以使您完成很多出色的工作。

    問題是,Elementor的免費版本會帶來什麼?

    實際上有很多功能。

    使用免費版的Elementor,您仍然可以使用它的相當大的基本小部件集合。 您可以輕鬆插入視頻,按鈕,分隔符,圖標,圖像輪播,進度條等。

    Elementor免費小部件

    除了免費的小部件之外,Elementor還使您可以利用以下功能,而無需支付一分錢:

    • 維護模式-尚未準備好炫耀您的WordPress網站嗎? Elementor可以幫助您建立漂亮的“即將推出”頁面,以在工作中保持進度的私密性。
    • 修訂歷史記錄-在網站上工作時,會有一些想法只能在紙上看起來不錯。 使用修訂歷史記錄工具,您可以放心地建立自己,知道可以還原到網站的舊版本。
    • 移動編輯-即使使用Elementor的免費版本,您也可以完全控製網站在較小屏幕上的顯示方式。 您可以微調元素的可見性,背景圖像的顯示選項等。

    說到移動編輯,請記住,您始終可以預覽網站在其他設備上的外觀。

    在Elementor主面板的底部,單擊“響應”模式,然後單擊要模擬的設備。

    在撰寫本文時,您可以預覽您的網站在個人計算機,平板電腦和智能手機上的外觀。

    響應模式視圖

    確保網站的移動友好性是SEO或搜索引擎優化的重要一步。

    您的網站針對搜索引擎的優化程度越高,其產生的自然流量就越多。

    Elementor可以幫助您進行頁面優化  努力不止一種。

    它還與Rank Math集成  —一個流行的插件,可以幫助改善WordPress網站的SEO。

    不管您使用的是Elementor Pro還是免費版本。

    Rank Math通過搶先分析您的網站的SEO友好性並檢測有問題的問題來工作。 它還使您可以執行諸如編輯內容的元描述,指定架構類型以及編寫SEO標題之類的任務。

    通過Elementor集成,您可以通過從左側面板轉到“ SEO”選項卡來訪問Rank Math的功能。

    排名數學SEO功能

    印象深刻了嗎?

    Elementor的免費版本附帶許多其他有用的功能。 加上免費的價格標籤和用戶友好性,使頁面構建器成為我書中的必備條件。

    但是,如果您正在考慮購買Elementor Pro,那麼您可能會對一件事感到好奇。


    Elementor Pro多少錢?

    現在-百萬美元的問題。

    Elementor Pro多少錢?

    每年的Elementor Pro費用取決於您要使用它的網站數量。

    • 個人(適合1個網站)-每年$ 49美元
    • 加號(適用於3個網站)-每年$ 99美元
    • 專家(適合1,000個網站)-每年199美元

    不管您選擇哪種價格,隨附的Elementor Pro功能在所有方面都是相同的。 這些計劃之間的唯一區別是Elementor Pro許可證密鑰可以使用的站點數量。

    初級定價

    好的-您現在可能會期望獲得Elementor Pro的巨大折扣。

    不幸的是,我現在無法為您提供Elementor折扣代碼。 但是,我所能做的只是放入我個人的現成模板集合中。

    如果您從我的鏈接購買Elementor Pro並出示收據,您將獲得我個人用來設計博客上每個頁面的所有模板,包括首頁,關於頁面,電子書銷售頁面,頁眉和頁腳,工具頁面等。 。

    要使用這些免費贈品,請使用此鏈接。


    Elementor很難掌握嗎?

    Elementor絕對不難學習。

    實際上,我相信您可以在購買一個小時後建立一個令人驚嘆的網頁。

    但是,Elementor是否難以掌握的問題取決於您對“掌握”的定義。

    我自己仍然每次學習使用Elementor的新方法。 當涉及顏色組合,位置,邊框樣式和運動效果時,可能性是無限的。

    還有諸如Popup Builder之類的功能,可增強網站構建的動力。

    長話短說,我相信您將需要很長時間才能將自己稱為Elementor“大師”。 但是絕對可以很快,您可以使用它來完成一些令人驚奇的事情。


    誰應該獲得Elementor?

    每個博客作者都應嘗試使用免費版本的Elementor來真正欣賞該平台可以為他們做的事情。

    即使是初學者,在開發過程中,您也不會遇到用Elementor生成高質量網頁的問題。 零價格標籤也意味著涉及零風險。

    在對Elementor進行了自己的測試之後,您應該能夠確定是否需要Pro版本。 這正是我自己購買Elementor Pro並在我的網站上使用它之前所做的。

    為簡化起見,如果您是以下人士,則應認真考慮購買Elementor Pro:

    • 建立適當的流量獲利策略的博客
    • 使用WooCommerce的電子商務企業家
    • 想要加快潛在客戶產生和轉換結果的Blogger
    • 需要更簡化工作流程的Web開發人員

    單擊此處獲取Elementor Pro。


    Elementor常見問題

    Elementor可以使用我的主題嗎?

    是的-Elementor被設計為自適應的。 您可以使用它將新的視覺元素合併到帖子或頁面中,而不會影響主題的設計。

    什麼是Elementor Pro?

    Elementor Pro為已經具備功能的Elementor頁面構建器帶來了許多附加功能和小部件。 它的起價為每年49美元(最多一個站點)。

    有Elementor免費試用嗎?

    Elementor Pro沒有免費試用版,但是有一個免費版本,功能有限。 但是,他們確實為Elementor Pro新客戶提供30天退款保證。

    Elementor會減慢我的網站速度嗎?

    否。如果有的話,安裝Elementor這樣的多合一插件可以提高性能,因為您需要的WordPress插件更少。


    最後的想法

    Elementor是一個很棒的頁面構建器,我會自信地推薦任何想要構建一個漂亮網站的人。

    仍然不確定這是否對您的博客工具箱有用嗎?

    也許我親自在自己的博客上使用Elementor的事實會讓您信服。

    事實上,您在此博客中找到的所有登錄頁面都是使用Elementor創建的。

    請記住,在Master Blogging中,我的首要任務是為讀者提供成功所需的工具。

    Elementor是這些工具之一。

    使用此工具,您只需幾個小時即可發佈設計精美的網頁。 您甚至不需要花費一個角錢就可以看到它的核心功能。

    對於問題,建議和一般反饋,請在下面留下評論。 如果您已經親自測試過Elementor,也可以隨時分享您的經驗。

    開始使用Elementor設計頁面

    初級獎金

    我的Elementor評論是否使您對採用專業版感興趣?

    為什麼不享受額外的幫助,以這些獨家的Elementor獎金開始您的Elementor旅程。

    這是您將得到的:

    • 獎金#1:Readymade Elementor模板:您將獲得我個人用來設計博客上每個頁面的所有模板,包括首頁,關於頁面,eBook銷售頁面,頁眉和頁腳,工具頁面等。您只需要將其導入您的帳戶,您將立即擁有一個類似於我的博客的網站。 隨時在這里和那裡進行調整,使您的博客具有獨特的外觀。
    • 獎金2:價值47美元的Elementor培訓課程:一旦我確認您的購買記錄,我還將授予您訪問Elementor培訓課程的權限(4-5天之內),以便您可以學習如何充分利用Elementor pro 。

    有興趣獲得這些獎金嗎? 從此鏈接獲取Elementor Pro,然後從此處在我的電子郵件中轉發您的購買收據。

    初學者評論