Elementor 入門教程

世界領先的 WordPress elementor使用指南

Elementor是一款非常現代的頁面編輯器,作為最流行的免費頁面編輯外掛程式,
它改變了WordPress建站的方式,讓我們可以無需代碼便能自己構建網頁

Elementor 介紹

WordPress上面有很多優秀的視覺化網頁設計工具(Website Builder),而Elementor更是這些頁面構建器中的佼佼者,我們可以透過Elementor一步步的設計出優質的網站。

Elementor是WordPress平台上的一款視覺化頁面構建器外掛程式,使用者不需要具有專業的程式設計能力,就可以透過Elementor拖拽式設計和生成網頁(或一頁式的銷售頁)。

Elementor分為免費版和付費版,付費版也就是 Pro版,價格為49美元/網站/年,Pro版擁有更多的小部件、網頁範本、設計素材,並且支援生成WooCommerce頁面,能更加完全的定制網站外觀和功能。

如果對網站設計要求不高,免費版的elementor就夠用了,可以再善加利用 Ultimate Addons For Elementor 這個插件,做出來的網頁效果一樣令人驚豔。

Elementor只是眾多頁面構建器的其中之一,新手直接從elementor入門是一個不錯的選擇。
如果您對網站設計很有想法,但不會寫代碼,建議使用elementor!任何效果都可以實現的唷!

Elementor介紹
Elementor介紹

一學就會用Elementor建站!

跟著流程走,很快就可以搞定一個網站。

安裝 Elementor 插件

首先、安裝Elementor插件:

進入WordPress後台,選擇外掛程式,安裝,然後搜索elementor,找到截圖中的這個圖示,安裝並且啟動。
(或者從這裡下載安裝包後上傳到網站上安裝。)

安裝Elementor插件_01

安裝Elementor插件立即啟動

安裝完成後,直接啟動,在網站後台左邊的功能表裏,就可以看到Elementor的功能表了

安裝Elementor插件_02

開始進行網站介面設計

完成 Elementor 安裝後,創建第一個elementor頁面

一、創建第一個 Elementor頁面:

1、在WordPress後台,選擇新建,頁面。

2、出現新的空白頁面,點擊「使用 Elementor 編輯」,將會出現前台的 Elementor 工作界面。

Elementor新增頁面_01
Elementor新增頁面_02

3. Elementor工作區介紹:頁面的左邊,是Elementor的小工具,小工具右上方帶鎖的就是Pro版本的功能,需要付費購買。
右邊是網站頁面的視覺化編輯區。

Elementor新增頁面_03

4. 接下來開始使用Elementor設計頁面,當然,設計的前提是自己心中已有網頁的想法,可以先畫一個草圖,然後慢慢用elementor設計出來。

使用Elementor設計頁面有兩種方法:
1、完全自己設計;
2、導入設計好的範本修改。




最基礎的elementor使用方法如右圖:

①、在左邊的這些元素,你需要使用什麼,就按住直接拖動到右邊的視覺化編輯區域。
②、這個加號可以新增段,你可以理解成新增加一塊內容區域,和上一塊內容分開。
③、這裡是添加範本,點擊後,範本有分為:模組、網頁、我的範本。

Elementor新增頁面_03
Elementor新增頁面_04

用Elementor製作頁面時,可以直接從頭開始編輯,自己設置每個元素樣式;

或者調用模版,在模版上進行修改與替換,這樣完成頁面是一種非常高效的方式,

Elementor提供了各種模組和100+的模版,不管是免費版還是Pro版本都可以調用演示。

Elementor模版庫

我們導入一個模版來作為演示並修改。

點擊「插入」,
需要使用elementor帳號進行連接,
(沒有elementor帳號的跟著步驟流程註冊一個即可)

成功導入後,就如右圖的樣子。

導入Elementor模版

我們把需要修改的地方,滑鼠輕輕滑過該區域,在左邊上方處會看到一支筆,代表點擊後可以修改編輯。
如果碰到不想要的部分,直接右鍵點擊刪除就可以了。

如果需要新增內容,就點擊加號,然後選擇段,再把要添加的內容拖進去,例如圖片、文本、標題、視頻這些內容。

使用現有模版庫裏的頁面進行設計,相對來說更加簡單,便於新手學習和研究,當一切就緒後,點擊發佈/更新按鈕,就可以完成一個頁面的設計了。

Elementor模版修改_01
Elementor模版修改_02
Elementor模版修改_03

Elementor Pro 高級功能介紹

使用elementor pro你可以完全從頭規劃你網站的各種配置,例如主題顏色、文字、排版、按鈕的樣式,如圖所示:

Elementor Pro高級功能介紹_01
Elementor Pro高級功能介紹_02

設置好全域樣式之後,可以回到主題構建器,自己拼湊一個想要的網站設計。

您可以自己設計網站的 header(頁頭)、footer(頁尾)、Single Post(文章)、Single page(頁面),讓整個網站的佈局充滿一致性。如果安裝了 WooCommerce 電子商務外掛程式,電商頁面也可以自己設計。

Elementor 主題建構器

在Elementor的左側工具列最底下,點擊電腦圖示,切換到手機端,就可以編輯網頁在手機上的顯示效果了。

Elementor 手機版效果