WordPress頁面編輯器-Elementor,簡單創建高端網站-Elementor教學

WordPress頁面編輯器-Elementor,簡單創建高端網站-Elementor教學

使用Elementor插件在WordPress任何主題上,創建高端頁面設計

Elementor教學

Elementor是什麼

人們常常會遇到在WordPress上建立網站,頁面設計只局限WordPress主題預定的介面,有遇到所選的WordPress主題設計上有個別部份不合心水嗎?接下來會介紹一個強大的WordPress插件,Elementor。
Elementor可幫助您在WordPress網站添加高級樣式,主題,佈局和設計元素,而您不需要懂得編寫代碼。你在其他的網站上看到的介面,設計,都能使用Elementor輕鬆幫你實現,絕對是你創建聯盟行銷及網上賺錢網站一個好好的工具!
你有煩惱著為何人家的WordPress主題首頁設計,總是比我漂亮嗎?Elementor正是你想要的東西!而且Elementor易於上手,你不用再周圍找建網的教學!

Elementor教學

更具體地說,Elementor就是所謂的可視化拖放頁面構建器插件。我們分兩點去描述:

  • 可視化編輯意味著在WordPress設計網站內容時,您可以準確地看到訪問者將看到的內容。一旦發布頁面,您的頁面看起來就不會有任何混淆。
  • 拖放意味著您可以通過拖放來移動各種設計元素(如按鈕,表單,圖像或彈出式視窗等等)。無需編寫代碼!

Elementor是一個WordPress插件工具,可以幫助您構建WordPress網站看起來是用你想要的專業及多元化方式而無需聘請開發人員。
Elementor主要分成”Elementor Free”及功能強大的”Elementor PRO”。
快速導覽功能介紹:

使用Elementor在WordPress輕鬆創做高端頁面設計

Elementor & Elementor PRO功能介紹

Elementor Free功能

Elementor Free簡介影片:

Elementor界面劃分

首次啟動Elementor編輯器時,您會看到如下內容:

  • (1) – 內容區域。您將在此區域外看到常規主題,並且您將在標有灰色虛線的區域中大致構建自己的設計。
  • (2) – 元素/小部件。這些是您將用於設計頁面的構建塊。
  • (3) – 設置。這些功能可幫助您撤消更改,在不同設備上預覽設計等。

為您的設計構建佈局

雖然您可以立即開始使用元素,但在執行此操作之前,您可能希望為頁面構建基本結構。
Elementor為您提供兩個可以幫助您的結構元素:

  • 位置元素
  • 樣式元素作為一個組(例如,為頁面的整個部分添加背景)

這些結構要素是:

  • 部分 – 最廣泛的佈局塊。
  •  – 位於一個部分內。您可以擁有一列或添加多列。

例如,這是它的樣子:

  • (1) – 一個部分,用藍色標記
  • (2) – 該部分內的兩列,標有黑色

在設計中添加新元素

要將新元素添加到部分或列,只需將其從左側邊欄拖到頁面的可視預覽中:​

雖然標題元素是一個非常基本的例子,但您還有許多其他選項可以讓您把WordPress網站設計更強大/靈活/專業。體驗100%視覺設計的力量!


樣式元素(列或佈局)

要進一步設置和控制任何元素,列或佈局,您可以單擊所需內容,然後使用側欄中的選項卡:

Elementor難以學習嗎?

與其他頁面構建器相比,Elementor是最容易掌握的一個。但無論您選擇哪個頁面構建器插件,在開始創建真正華麗的頁面之前總會有一個適應時間。
Elementor還有一個強大的功能,是可以導入預先構建的Elementor模板(僅在五秒鐘內完成),然後解構它以查看設計器如何構建頁面。通過這種方式,您可以看到更高級的選項,可幫助您構建非常華麗的東西。


五個特定的Elementor功能,把你的WordPress變得更完善

現在您已經了解了基本界面,讓我們更多地了解Elementor,並深入研究一些有助於使Elementor如此成功的特定功能。

1. Elementor模板庫

雖然Elementor確實能讓您從頭開始創建完整的設計……但由於Elementor模板庫,您並不總是需要自己完成所有工作。
該庫包含一組模板,您只需單擊即可插入這些模板:

從Elementor 2.0開始,這些模板現在有兩種格式:

  • 頁面 – 這些是您可以導入的整頁設計,然後根據需要進行調整。
  • 區塊 – 這些是特定“部分”的設計,而不是整個頁面。例如,如果您只想將預先構建的聯繫人部分放入現有佈局,則可以幫助您執行此操作。

一旦你擁有了自己的一些設計,你也可以將它們保存為模板或塊,以便以後輕鬆重複使用。


2.移動預覽和響應式設計控制

現在,隨著手機用戶上極大的流量,您的WordPress網站設計上必須考慮手機上的外觀。
帶給你一個好消息:
您使用Elementor創建的所有設計都是自動響應桌上型電腦,PAD及手機面版也就是說,網頁在移動設備上看起來會十分美觀及靈活設定介面)。
如果您想要查看設計在不同設備上的外觀,Elementor可讓您快速啟動預覽而無需離開界面:

Elementor還允許您在某些設備上顯示/隱藏單個小部件。
例如: 如果您的頁面有著特大的圖像或背景,可能你不希望在網站的手機版本上顯示該圖像。Elementor的響應式選項讓您可以通過單擊切換將其隱藏在手機介面:


3.詳細的佈局控制

由於很多頁面構建器不需要自定義代碼,因此有時您必須犧牲一點靈活性來定位元素以實現這種簡單性能。
但是,Elementor的優點在於它為您提供了大量直觀的控件,以確保您可以將每個小部件,部分和列精確放置在您想要的位置。您可以:

  • 手動調節,列和小部件設置填充和邊距
  • 只需在列之間拖動分隔線即可調整列寬
  • 將小部件垂直放置在列中(或節內的列)
  • 在列間距可調的列之間創建空格

4.內聯文本編輯

內聯文本編輯是編輯頁面上文本的便捷方法。而不是像其他頁面構建器那樣需要使用彈出窗口,Elementor讓您只需單擊頁面並開始輸入:

5.輕鬆撤消/重做和完整修訂歷史記錄

在設計頁面時,當您嘗試新的設計方法,你可能會覺未如理想。
如果你搞砸了,Elementor可以通過兩種不同的方式輕鬆解決你的錯誤。
首先,記錄您執行的每個操作,並根據需要還原:

其次,每次保存設計時,您還將獲得一個全新的版本,如果需要,您可以恢復。
*退出界面時,將清除這些單獨的操作。因此,這是您在特定設計會話期間執行的每個操作。但是,保存的修訂始終是可訪問的。

Elementor PRO功能

Elementor PRO 簡介影片:

Elementor Pro可通過拖放型式建立更多高端設計構建主題

核心Elementor頁面構建器插件是100%免費和開源的。但Elementor團隊還出售了一個名為Elementor Pro的附加組件。這個附加組件為您提供了許多有用的功能,起價只是為$49美元/一年 , 無錯是一年。


有更多的小部件來構建您的內容

Elementor Pro just plain添加了新的小部件。除了為您提供更多靈活性外,這些還可以幫助您更換其他插件。例如,Elementor Pro有以下小部件:

  • 表格(包括聯絡表格)
  • 滑塊
  • 社交分享按鈕
  • 倒計時器
  • 定價表
  • 登錄表格

請參閱以下Elementor Pro小部件的完整列表:


大量的高級模板

購買Elementor Pro時,可以解鎖庫中的所有模板和塊。除了獲得“更多”之外,Pro模板通常也更加詳細和復雜。所以這更像是“ 更多+更高質量”的情況
在撰寫此Elementor評論時,這已超過100個模板。

全局窗口小部件可幫助您在多個頁面上重用相同的元素

有時,您可能希望在多個頁面上重複使用相同的元素。例如,您可能有一個聯繫人部分,需要在每個頁面上包含相同的內容。
全局小部件讓您更輕鬆:

  • 將該窗口小部件另存為模板,以便在多個頁面上重用
  • 只需編輯一次即可自動更新該全局窗口小部件的每個實例

接下來我會介紹三個我個人為何升級Elementor Pro主要功能:

  • 主題生成器(使用Elementor,創建WordPress整站主題)

  • 彈出式生成器(網上營銷賺錢利器)


主題生成器

你知道當你找到一個你真正喜歡的主題時,你還需要調整它的某些方面才能讓它看起來恰到好處嗎?
特別是頁眉或頁腳,因為它們看起來不像你想要的那樣。
如果……有某種工具允許您構建自定義頁眉,頁腳和其他佈局元素,該怎麼辦?
如果您只需點擊幾下即可在整個網站上部署它們,該怎麼辦?
是的,我正在說:Elementor Theme Builder
它是怎樣工作的?
像往常一樣,Elementor保持這個簡單 – 你從WordPress儀表板啟動它:

然後,您只需單擊“添加新”並選擇模板類型,然後單擊“創建模板”。
出於本次審核的目的,我們將創建一個新標題。

然後,您可以選擇從頭開始創建自己的標頭,或者使用一個方便的默認標頭模板,然後您可以根據自己的喜好重新設置。

只需點擊幾下鼠標,您就可以創建一個外觀和感覺更像您的徽標。

然後,您需要做的就是單擊“發布”並使用“添加條件”功能告訴Elementor您希望部署新標頭的位置:
Hey – 您的新標題發佈到您網站的每個頁面。
您可以按照完全相同的過程為整個站點創建一個時髦的新頁腳。
如果您犯了錯誤,您可以隨時備份並更改標題的“顯示條件”。
所以,現在你可以使任何彎曲主題到你的設計。
很強大吧,Elementor pro。Good Job!!


彈出式生成

Elementor最近推出了他們的彈出式構建器。
那麼你如何使用它?
您可以假設此功能可用作窗口小部件,但您必須返回到WordPress儀表板才能在模板下找到它。

Elementor-popup教學

現在,奇怪的是,您從WordPress儀表板而不是從Elementor中啟動彈出窗口創建過程…但您可以在常規Elementor工作區內編輯彈出窗口。

看起來將它結合了界面反而更有意義,不是嗎?
當然,彈出構建器位置背後的原因可能是基於普通Web開發人員創建彈出窗口的頻率?
也許每週一次?
您可以隨時使用新的“Finder”功能在需要時跳回儀表板。

許多不同的彈出模板可供選擇,幾乎適合所有人,包括我們做聯盟行銷的類型。
一個不錯的選擇是你可以從下拉菜單中選擇你想要的彈出類別
只需單擊您選擇的模板,然後單擊綠色的“插入”按鈕,如下圖所示:

另一種選擇是關閉視窗,然後直接進入Elementor編輯器。
從這裡你可以從頭開始設計你自己的彈出視窗:

注意:這裡有一個的麻煩,那就是你只能在編輯器窗口中編輯彈出視窗中的文本,而不能從彈出元素中編輯。
希望元素師能夠在未來的更新中補救。
為了操作更暢順,我們將使用現成的彈出模板。
您可以獲得令人眼花繚亂的設計選項,不僅可以調整彈出窗口的內容,還可以調整其尺寸,形狀,配色方案等。

“高級”選項卡中的一些非常有趣的功能包括能夠阻止訪問者使用轉義鍵關閉彈出窗口,並禁用頁面滾動,直到您與彈出窗口進行交互。

您還可以在主彈出設置選項卡下獲得數十種進場動畫 – “Lightspeed”是我目前的最愛。

一旦您對彈出窗口的佈局感到滿意,就可以單擊“發布”。
您可以在此處了解各種設置以控制新創建的行為:
條件 – 您可以選擇彈出視窗顯示的位置,例如一頁與整個站點。您還可以為同一彈出窗口設置多個條件。
觸發器 – 這是導致彈出窗口首先觸發的原因。所有常見的嫌疑人都包括在內,包括“滾動”,“點擊”和“頁面退出意圖”等。
高級規則 – 具有覆蓋諸如僅在訪問者讀取x個頁面後顯示彈出窗口或已訪問過您的站點x次數之類的事情的設置。

Elementor &Elementor pro那個適合你?

現在我已經涵蓋了Elementor的不同特性和功能,權衡利弊並提供我的經驗 。
與任何工具一樣,Elementor 不會成為每個人的選擇,但我真心推薦

普通Blogger

如你只是一個普通Blogger,建設整個網站不想花上任何成本,我可回答你Elementor Free已十分足夠使用,因普通版功能開放性已極大

網上賺錢及進行營銷者

如你是想用個人網站去進行,聯盟行銷,開設網店及其他網上營銷活動,賺取被動收入的人,Elementor Free應不能滿足你!因進行營銷活動時以下Elementor PRO功能是你必須的:

  • Mailchimp 自動回覆機器人(需通過API結合)
  • 電子郵件營銷
  • 彈出式視窗
  • 全站個人化主題
  • 網上商店功能

結論

毫無疑問,Elementor是2019最好的頁面構建器,甚至是最好的免費頁面構建器。
這個功能豐富的WordPress插件甚至可以與許多優質,更成熟的頁面構建器保持領先地位,而且還在不斷開發。

主要功能比較

Elementor

Elementor PRO

發佈留言