Elementor教學-不會寫程式也能架出精美網站,1款讓500萬人愛上的頁面編輯器!

Elementor教學

你是否曾經…

  • 花了很多時間挑選一個精美的Wordpress佈景主題,卻怎麼挑都挑不到自己喜歡的外觀設計
  • 想讓自己的網站外觀更符合自己所想要的樣子,但苦於不會寫程式而放棄了
  • 想要在自己的網站加上特殊功能,卻不知從何下手

其實只要你學會使用Elementor這款超好用的Wordpress視覺化頁面編輯器,這些煩惱就再也不是煩惱了!

這篇Elementor教學,會帶你了解Elementor的操作介面、使用邏輯、基本&進階元素以及其他好用的功能,就算你完全不懂前端程式語言,你也能跟專業網頁設計師一樣,製作出設計感十足又實用的網站!

Elementor 是什麼

Elementor視覺化頁面編輯器外掛是在2016年推出的,這款外掛推出的初衷是為了要縮短網頁工程師們在開發網站的時間、簡化開發流程,讓製作網站變得更輕鬆。

這款視覺化頁面編輯器在短短的幾年內就達到500萬次的下載數量!

為什麼Elementor這麼受歡迎?

使用Elementor,能透過拖拉的方式,在不用寫任何程式語言的情況下,也能製作出功能強大又美觀的網站。搭配內建的許多功能元素,需要什麼功能就直接將該元素拖拉到自己的網站上,操作起來非常直覺、簡單!

以往要製作網頁,需要寫HTML&CSS來呈現出想要的網站內容及外觀,只有學過程式語言或有工程背景的人才能辦到

現在,不論你是行銷人、業務人員、部落客、醫生、律師、學生,你都能透過Wordpress搭配Elementor輕鬆架出符合自己需求的專業網站!開始在網路上累積自己的影響力,對於生活在這個自媒體時代的我們來說,真是一大福音呀!

Elementor 優缺點分析

優點

  • 100% 支援繁體中文
  • 不需要會寫程式:
    如果你是Wordpress架站新手,不會任何程式語言,Elementor將會是你最得力的架站工具,用拖拉的方式就能輕鬆將腦海中網站的樣貌實際呈現出來
  • 加快架站流程
    比起Coding,Elementor提供多種樣板讓你直接套用,再將內容、顏色修改成自己想要的樣子,可以大幅縮短開發網站的時間
  • 非常直覺化的操作
    在Elementor的操作介面,你可以很輕易地用滑鼠拖拉需要的網站元素到頁面上,需要什麼就直接放到頁面上,想要網站元素放在網頁的哪個位置一樣都能輕鬆拖拉完成,真的非常直覺好上手!
  • 即時預覽模式
    當你在製作或修改網頁的時,你可以即時預覽剛剛加入的網頁元素,在整體頁面呈現的樣子,如果排版有問題,都能立刻回到編輯介面修改
  • 可以高度客製化自己的網站
    不論是網站的佈局、外觀樣式,包含頁首、頁尾、側邊欄、內容,你都能透過Elementor提供的50多種元素,設計出自己想要的樣子
  • 響應式設計:
    Elementor可以讓你調整不同裝置上的排版、樣式,讓你以符合不同裝置的大小設計頁面,不論讀者使用哪一種裝置觀看你的網頁,都能有良好的體驗
  • 保留完整修訂紀錄:
    在編輯介面的下方,可以看自己修改的歷史紀錄,如果有不小心刪除的區塊都能馬上復原,不用花時間重新製作
  • 遇到問題找得到解法:
    Elementor已經有超過500萬的下載次數,你遇到的問題,也會有人遇過,所以只要Google搜尋一下就能到解決方案
  • 多種擴充外掛:
    因為有太多人在使用這一款頁面編輯器,基本上Elementor已經自成一個生態系,有許多不同功能的擴充外掛,可以滿足你各種網站功能的需求
  • 可以製作各種類型的網站:
    Elementor有很多區塊模板、頁面樣板、網站元素給你使用,作品集網站、形象網站、部落格網站、電商網站(付費版有支援WooCommerce)、新聞媒體網站、活動網站…等,都可以透過它來製作
  • 豐富的Demo樣板:
    超過300種頁面樣板供你選擇,找出自己喜歡的樣式,再加上不同的網站元素,就能輕鬆製作出功能強大又兼具設計感的網站
  • 支援多種佈景主題:
    幾乎所有的Wordpress佈景主題都能跟Elementor搭配使用

延伸閱讀:
如果你還找不到適合自己的Wordpress佈景主題
可以參考我寫的這篇Astra主題教學:
Astra主題教學-1款幫你搞定各類型網站的WordPress佈景主題
因為Astra輕量、乾淨簡潔的主題架構,真的非常推薦搭配Elementor一起使用

缺點

  • 完整功能需付費:
    免費版本不但功能較陽春、樣板較少,有許多實用的功能是沒有包含在內的。
  • 佔主機空間:
    Elementor是一款大型外掛,佔據較多的主機資源,也因此在選佈景主題時,要選擇較輕量的主題,才不會拖慢了網站的載入速度,進而影響使用者體驗

延伸閱讀:
使用Elementor這種大型外掛,你需要穩固且強大的Wordpress主機,確保網站的載入速度不會被拖慢
Cloudways完整教學:架設WordPress網站的No.1主機!

Elementor 方案介紹

Elementor頁面編輯器有分為免費版本&付費版本

下面我將為你詳細介紹4個版本之間的差異

2

免費版功能

  • 拖拉式編輯器
  • 響應式編輯
  • 40+種網站基本功能元素
  • 30+種基本模板

付費版功能

  • 拖拉式編輯器
  • 響應式編輯
  • 50+種網站進階功能元素
  • 300+種進階模板
  • 10+種全站模板套件
  • 主題建構器
  • 表單建構器
  • WooCommerce建構器
  • 彈出式視窗建構器
  • 1年客服支援
  • 1年外掛更新

這些功能都會在下面的教學詳細介紹呦!

付費版價格

Elementor只有年費制,沒有買斷方案

這3個付費方案的差別只在於,可以將Elementor使用在多少個網站上

  • US$49/年:1 個網站
  • US$99/年:3 個網站
  • US$199/年:1000 個網站

免費版本的功能相對比較少,除了網站功能元素、模板較少外,像是主題建構器、WooCommerce建構器等需要付費才能使用。

想要真正體會Elementor到底強大在哪裡,真的非常建議直接購買付費版本。或是需要架設一個電商網站,購買付費版本使用WooCommerce建構器,可以幫助你更快速架設出一個功能&美感都兼具的電商網站。

如果你跟我一樣是個WordPress接案工作者,直接購買US$199/年:1000 個網站的方案可以說是最划算,才不用每接一個案子就要另外再花錢購買Elementor。

安裝&啟用Elementor教學

下載 Elementor

前往 WordPress 後台 > 外掛 > 安裝外掛 > 輸入Elementor > 立即安裝 > 啟用

3

購買 Elementor Pro

記得要先下載Elementor外掛才能使用Elementor Pro呦!

選擇自己需要的方案

4

填入基本資料付款成功後,先到信箱收確認信

登入帳號 > My Account

點擊 Download ZIP 將檔案下載至電腦桌面

5

啟用 Elementor (Pro License)

回到 WordPress 後台 > 外掛 > 安裝外掛 > 上傳外掛檔案 > 啟用外掛

6

接這你會看到後台上方出現這個畫面

點擊 Connect & Activate

7

Elementor就會自動幫你把網站&你的License連線

點擊 Activate

8

當你看到這個畫面時,代表你已成功激活你的License了

9

如果還是有問題可以參考這個安裝Elementor Pro的教學影片

Elementor 基本設定

前往 WordPress後台 > Elementor > 設定

  • 內容類型
  • 停用預設顏色
  • 禁用預設字型

內容類型的地方選擇你想要用Elementor編輯的選項(開啟權限)

建議 “文章” 不要勾選,編輯文章用Wordpress內建的古騰堡區塊編輯器就好,不然之後文章多了,每篇都用Elementor編輯會拖慢網站整體速度

若勾選 “停用預設顏色&禁用預設字型”,你網站的預設字型&預設顏色會是你佈景主題的預設樣式

Elementor頁面編輯器&佈景主題都有各自一套預設的樣式,可以依照自己的偏好選擇要用哪一套 在設計網站時,每個元素的樣式、字型還是能獨立設定,這邊指的是預設樣式

如果想要知道怎麼設定佈景主題字體&顏色的預設樣式,可以參考我寫的這篇 Astra教學文(章節8.2)

10

延伸閱讀:
WordPress後台教學:新手使用WordPress的完整攻略

Elementor 操作介面導覽

如何進入Elementor操作介面

Step 1

首先,我們要先新增一個頁面

前往 WordPress 後台 > 頁面 > 新增頁面

11

Step 2

在右側的地方先設定你要的頁面屬性,共有4個選項

12
  • 預設範本:
    呈現你使用的佈景主題的頁面佈局方式
  • Elementor 畫布:
    呈現一個空白頁,沒有頁首、頁尾、側邊欄,讓你可以很自由地發揮創意,設計出自己要的頁面樣式
  • Elementor 全寬:
    只保留頁首、頁尾,內容區塊呈現100%全寬
  • Theme:
    這個選項跟預設範本一樣,會呈現你使用的佈景主題的頁面佈局方式

Step 3

選好頁面屬性後,記得按發佈頁面,並且到Worpress 後台 > 外觀 > 選單將該頁面新增至主選單

13

若之後有修改頁面屬性,也記得要按右上角的更新呦!

Step 4

點擊 使用Elementor 編輯按鈕,就可以開始使用Elementor設計你的頁面囉!

接著你就會進入到這個畫面

14

Elementor全局設定

點選左上角的漢堡icon

15

你會進到這個畫面

接下來會先介紹Site Settings 網站設定User Preferences使用者偏好有哪些功能可以使用,Theme Builder主題建構器會放在後面獨立一個章節做介紹

16

Site Settings 網站設定

17

在Site Settings 你可以設定網站整體的顏色、字型、排版(標題排版、顏色)、按鈕樣式、圖片、表單欄位、網站Logo、網站名稱、背景顏色、網站寬度、燈箱、加入客製化CSS語法

這邊你所設定好的每一個細節都會成為你的網站預設樣式,當你在設計網站時,若有元素想要呈現特定樣式或顏色,都可以再各別設定

需要特別注意的是,Global Colors &全域字型,如果你有在前面Elementor基本設定中,勾選停用預設顏色&禁用預設字型,你的網站會使用你在佈景主題設定的顏色&字型

若你想用Elementor設定網站字型及顏色,這兩個選項就不要勾選

18

User Preference 使用者偏好

  • UI Theme:
    可以選擇Elementor操作介面呈現白底黑字&黑底白字
  • Panel Width:
    這邊可以調整Elementor操作介面的寬度
19

Elementor操作介面-底部功能介紹

接下來,我們要來看Elementor底部的功能列表

由左到右分別是:設定、Navigator、修訂紀錄、響應模式、預覽變更、更新按鈕

20.0

設定

這邊你可以設定頁面標題、頁面的發佈狀態、精選圖片、頁面佈局(預設值、Elementor畫布、Elementor全寬、Theme)

20.1

Navigator 頁面結構導覽

這邊你可以看到整個頁面的結構,每個區塊的結構Navigator都幫你一一列出
有時候當頁面的元素多了,會不方便編輯,你就可以使用Navigator,直接點擊該元素進行修改

20.2 1

修訂紀錄

修訂紀錄會記錄下每個你在設計網站時的動作,如果有不小心誤刪的元素,你可以到修訂紀錄還原,只要點擊該動作,元素就會重新顯示在頁面上,不需要再花時間重新製作

20.3

響應模式

用手機瀏覽網頁的比率逐年攀升,RWD響應式網頁設計可以說是非常重要

Elementor的響應模式可以讓你預覽你的頁面在桌機、平板、手機的顯示狀態

有時候平板、手機會有跑版的狀況,要記得在製作完美個頁面時,用響應模式檢查該頁面在不同裝置的排版,這樣能幫助你的網頁有較佳的使用者體驗

20.4

桌面的顯示狀態

21

平板的顯示狀態

22

手機的顯示狀態

23

預覽變更

Elementor可以讓你在設計網站的同時,即時的查看該頁面實際在瀏覽器的顯示狀況,有不滿意的地方可以馬上做修改

更新按鈕

記得每次做完修改後,都要按更新按鈕,Elementor才會將修改的內容儲存下來

主要功能介面

Elementor的主要功能介面有3個選項

  • 元素
  • 全域
  • SEO
24

功能元素

Elementor的元素可以說是網頁設計最重要的一環,你可以依照自己網站需要的功能,將不同的元素拖拉到頁面中,對於不會寫程式的人來說,真的非常方便!

免費版元素

25 1

Pro版 元素

26 1

主題元素(Pro)

27

WooCommerce 專用元素(Pro)

28

Elementor免費版元素教學

如果你想要了解要怎麼運用這些元素來建構自己的網頁的話,可以參考Ferdy Korpershoek的這2個影片,他會手把手的帶你了解每個元素要怎麼使用。

Elementor付費版元素教學

全域

這個區塊是讓你儲存常用元素的地方,這樣你就能在其他頁面,將已經設計好的元素直接拖拉進去,加快網站設計流程。

29

只要在Widgets(元素)的框框內按右鍵,點擊Save as a Global就能成功將該元素儲存到全域的欄位

30 1

SEO

我的Elementor 介面最右邊還有一個SEO欄位,是因為我使用Rank Math這一款SEO外掛,它與Elementor完美整合,讓我可以在使用頁面編輯器時,同時檢查頁面的SEO優化

31

延伸閱讀:
如果你還沒找到一款適合自己的SEO外掛,可以參考我寫的這篇文章:
Rank Math教學全攻略,1款讓你網站排名飆升的終極SEO外掛

使用Elementor前必須知道的事

在我剛開始接觸Elementor頁面編輯器時,我腦中有非常多種疑問,想要趕快設計出一個美美的網頁,卻不知道要怎麼開始

例如:

  • 要如何添加文字內容?
  • 要如何置入圖片、影片?
  • 要如何修改字型、字體大小、文字顏色?
  • 要如何把頁面排版調成我想要的樣子?
  • 要如何加入進場動畫效果?
  • 為什麼大家都說用Elementor就可以做出很美的網頁?
  • 我也想用Elementor做出有質感又實用的網站,要從哪邊著手?

如果你也有類似的疑惑,在進入Elementor教學之前,我想先解釋Elementor頁面組成的結構,這樣可以讓你更快上手Elementor,大幅縮短摸索的時間!

Elementor頁面區塊邏輯

用Elementor製作的頁面都是由3大元素所組成的

分別是

Sceion(區塊) > Column(欄)> Widgets (元素)

32

當你使用Elementor在設計頁面時,他會讓你選擇Sceion(區塊)架構,如下圖所示。

你可以選擇要在這個Sceion(區塊)裡,放置多少個Column(欄)

33
34

當你選擇完你的Section(區塊)架構後,就會呈現如下圖

最外圍以藍色方框呈現的是 Section(區塊)

中間以灰色方框呈現的是Column(欄)

最內層的區塊就是你放置Widget(元素)的地方

35 1

如下圖所示

Sceion(區塊)裡面可以有很多個Column(欄),而Column(欄)裡面又可以有很多個Widgets (元素)

36 1

Elementor編輯的3大選項

當我們在使用Elementor編輯頁面的區塊時,你都可以在左側Elementor的操作介面看到3個選項

分別是

  • 內容
  • 樣式
  • 進階

使用不同的Widgets(元素),在這3個選項裡可以修改的東西會些需差異,但邏輯上都是一樣的。

繼續往下看更詳細的教學,你就能了解Elementor背後的設計邏輯

37

內容

在這個選項裡,你所修改的屬於HTML的範疇

HTML是一種標記語言,它會告訴瀏覽器網頁要怎麼呈現

網頁上的文字、圖片、按鈕…等都是屬於HTML的範疇

想了解更多關於HTML的觀念,可以參考這篇文章

標題這個Widgets(元素)為例 你可以在內容這個選項,修改標題的文字、連結、尺寸、HTML標籤、位置

38

樣式

在這個選項裡,你所修改的屬於CSS的範疇

CSS是樣式規則語言,它不會單獨存在,而是用來輔助HTML的呈現方式

也就是說HTML內容的外貌 ex.字體大小、字型、字體顏色、字體粗細..等都是CSS掌管的

想要了解更多關於HTML的觀念,可以參考這篇文章

標題這個Widgets(元素)為例

樣式這個選項,可以設定文字的顏色、排版(字體粗細、大小、行高)

39

進階

在這個選項裡,你所修改的屬於CSS & Javascript的範疇

進階 > 邊界&邊框間距是由CSS掌管

40

Motion Effects動畫的部分則是屬於Javascript的範疇

Javascript是腳本語言,控制網站上的動畫效果、特效…等

想要了解更多關於HTML的觀念,可以參考這篇文章

標題這個Widgets(元素)為例

進階這個選項,你可以調整標題的捲軸特效、滑鼠特效、進場動畫…等。

41

右鍵功能

Elementor的右鍵功能可以幫助你加快設計頁面的速度

複製 (1)

將整個區塊複製一個一模一樣的,你可以選擇要複製Section(區塊)Column(欄位)Widgets(元素)

如下圖所示

42

複製 (2)

你可以複製區塊的樣式(在樣式選項的所有設定)

貼上樣式

如下圖,我複製 (2)左邊的藍色按鈕

原本右邊按鈕為紅色,當我點擊貼上樣式時,它的顏色就會跟右邊的按扭一樣,這樣就不用重新調整樣式設定了!

43

區塊編輯小技巧

當你想要編輯

  • Section(區塊):點擊白色6點 icon
  • Column(欄位):點擊灰色欄位 icon
  • Widgets(元素)點擊白色鉛筆 icon

接這就可以開始進行區塊的內容、樣式、進階設定

44

分析頁面元素

為了讓你更了解如何使用Elementor設計頁面

我將分析我的網站MONICA WEBS的關於頁面

讓你一目了然,一個頁面是由哪些元素組成、如何設計的

MONICA WEBS 關於頁面

你可以點進去看一下整個頁面的樣式,這樣看下面的分析會比較有概念

這個頁面有4個 Section(區塊)

45

上圖包含的Widgets(元素):

  1. Section (區塊)x1
  2. Column(欄)x1
  3. 標題 x1
  4. 文本編輯器 x1
  5. 按鈕 x1
  6. 背景圖片+背景覆蓋
46

上圖包含的Widgets(元素):

  1. Section(區塊 )x1
  2. Column(欄)x2
  3. 標題
  4. 圖片
  5. 文本編輯器
  6. 社交網絡服務圖示
47

上圖包含的Widgets(元素):

  1. Section 區塊
  2. Column 欄 x1
  3. 標題
  4. Section 區塊 (Inner section)
  5. Column 欄 x3
  6. 圖示
  7. 標題
  8. 分割線
  9. 文本編輯器
48

上圖包含的Widgets(元素):

  1. Section 區塊
  2. Column 欄 x3
  3. 標題
  4. 表單

後台Templates 版型庫

Saved Templates 已儲存的版型

前往 WordPress 後台 > Templates > Saved Templates

在後台 Saved Templates 的地方,你可以看到你在使用Elementor頁面編輯器時,儲存下的

  • 頁面
  • Section 區塊(段)
  • Widgets 元素(全域小工具)

你可以在這邊新增範本、匯入版型、匯出版型、編輯範本

匯入版型

你在網路上下載別人提供或自己購買的Elementor版型,都可以將它們匯入套用在這個網站上

匯出版型

在這個網站製作出來的版型,你也可以將其匯出,套用在其他網站上

49 2

接下來我會教你如何在使用Elementor時,儲存頁面、區塊(段)、元素(全域小工具)

儲存頁面

當你用Elementor製作完一個頁面後,到Elementor操作介面右下方,點擊更新按鈕旁邊的三角形icon,就可以將設計好的頁面儲存成版型

50

儲存Section區塊(段)

當你在製作頁面時,如果有一個Section 區塊會一直重複使用,就可以將該區塊儲存下來,下次就不用再重新製作一個區塊,可以節省很多時間!

製作完一個區塊後,在區塊白色6個點的icon按下右鍵 > 儲存成版型

51

儲存Widgets元素(全域工具)

在元素右上角白色鉛筆的icon按下右鍵 > Save as a Global

你就能將該元素儲存成全域小工具

52

儲存完成後,你就能在WordPress 後台 > Saved Templates的地方看見剛剛儲存的頁面、區塊(段)、元素(全域小工具)

彈出式視窗(Pro)

用Elementor Pro可以製做出各式各樣的Pop up視窗(Pop up彈出式視窗為付費版功能)

彈出式視窗有很多種功能:訂閱網站電子報、索取免費資源、索取限時優惠卷、公布最新消息…等。

Elementor可以讓你設定要在哪些頁面出現 Pop up、何時出現、觸發條件、顯示規則

趕緊繼續往下看Elementor的Pop up教學吧!

Step 1

前往 WordPress 後台 > Templates > 彈出式視窗 > 新增

53

Step 2

建立 Pop up版型

填入版型名稱 > 建立版型

54

Step 3

選擇你要的Pop up 樣式模板

Elementor提供很多不同類型的Pop up模板

你可以依照自己的需求做選擇

設計Pop up樣式跟上面使用Elementor教學是一樣的,這邊就不再重複一次

55

Step 4

條件設定

選擇Pop up要包含或排除在哪個頁面

56

Step 5

觸發器設定

這邊你可以選擇Pop up出現的時機

  • 載入頁面幾秒後出現
  • 滾動到頁面幾%時出現
  • 滾動到哪一個元素(Widgets)時出現
    這邊要使用CSS語法中的選擇器功能,在進階選項 > 自訂CSS的地方可以設定
  • 在頁面點擊 X 次後出現
  • 在沒動作 X 秒後出現
  • 在瀏覽者要離開網站(關閉視窗)時出現
57

Step 6

進階規則設定

這邊可以設定 Pop up的顯示規則

  • 在瀏覽網頁X次後出現
  • 在哪一個Sessions後出現
  • 最多顯示次數
  • 從哪一個網址進入到你的網站 (或許是你的 FB、IG 粉絲專頁進來時顯示)
  • 到達搜尋引勤/外部連結/內部連結時顯示
  • 瀏覽者的登入狀況
  • 在桌上型電腦/平板電腦/行動裝置上顯示
58

Theme Builder 主題建構器(Pro)

Theme Builder 主題建構器是一個非常強大的功能,需要購買Elementor Pro才能使用,他可以幫你高度客製化你的網站

你可以客製化網站的

  • 頁首排版
  • 頁尾排版
  • 單篇文章排版
  • 單一頁面排版
  • 文章列表排版
  • 搜尋回應排版
  • 404錯誤頁面排版

製作完成後,你還可以設定要在網站的哪個頁面顯示

換句話說,你可以為不同的頁面設計專屬的頁首、頁尾、單篇文章排版…等

59

Step 1

進入Theme Builder主題建構器

有2種方式

從Elementor操作介面進入

60 1

從Wordpress 後台進入

前往 WordPress後台 > Templates > 主題建構器

61

Step 2

建立版型 開始設計

建立完版型後,你就可以開始使用Elementor提供的樣板設計出自己的頁首、頁尾…等

前面的使用Elementor教學已經介紹過了,這邊就不在重複一次,方式都是一樣的

62

Step 3

設定顯示狀態

設計完成後,你就可以選擇顯示狀態,來達到高度客製化自己的網站

想要包含、排除在哪個頁面顯示

這邊要依個人需求做調整,這裡就不一步一步介紹囉~

63

匯入Demo樣板教學

Step 1

進入版型庫介面

當你在使用Elementor設計頁面時,只要點選白色檔案夾的Icon 就可以進入到Elementor的版型庫

64

Step 2

善用分類找出自己需要的版型

在Elementor版型庫中你可以選擇要套用

  • 區塊版型
  • 頁面版型
  • 我的版型(上面章節提到的Saved Templates)

右上角有PRO icon的是要購買Elementor Pro才能使用的版型

65

Step 3

插入版型

找到喜歡的版型後,點擊該版型 > 右上角插入

版型就會成功匯入到你正在設計的頁面中,便可以開始進行修改

設計完成後就可以發布頁面囉!

上面已經有詳細的Elementor操作教學,這邊就不再重複一次了

66 1

Step 4

收藏常用版型

若有些版型是你很喜歡的、常用的

你可以將滑鼠移至該版型上,右下角的地方會出現一個愛心,點擊後就可以收藏該版型

之後你就可以在我的收藏中,快速找到該版型並且套用

67

Astra佈景主題+Elementor頁面編輯器

我個人非常推薦Elementor頁面編輯器Astra佈景主題搭配使用

原因如下

  • 檔案輕量:
    由於Elementor是一款龐大外掛,會佔據許多主機資源,所以在選擇佈景主題時,要盡量選擇檔案較輕量的佈景主題。相較於其他佈景主題幾MB的大小,Astra主題只有50KB,搭配起來可以減輕拖慢網頁載入速度的問題
  • 適用各類型網站:
    不論是部落格網站、新聞網站、形象網站、作品集網站、電商購物網站,Astra這1款佈景主題就可以幫你搞定,再搭配Elementor一起使用,你一定能架設出設計感100分又實用的網站
  • 一鍵式套版(150+Agency樣板):
    只要購買Mini Agency Bundle以上的版本,就能享有150+種網站樣板(包含多種頁面功能的樣版),再加上Elementor提供的樣板,你一定能找到你喜歡的網站風格樣式,加快你設計網站的速度
  • 與Elementor相容性高:
    Elementor與Astra官方是有合作關係的,他們所設計出來的佈景主題,與Elementor有極高的相容性,不用擔心主題跟外掛之間有衝突問題
  • 擁有Elementor擴充外掛:
    購買Mini Agency Bundle以上的版本,你就能擁有Astra替Elementor開發的Ultimate Addons for Elementor擴充外掛,裡面有更多的網站元素供你使用,讓Elementor使用起來更加強大!
  • 套用在無限個網站上:
    Astra主題可以套用在無限個網站上,如果你是Wordpress接案工作者,搭配Elementor Pro (US$199/年:1000 個網站)這個方案,可以大大降低接案成本

點擊最右邊的icon就可以進入Astra的版型庫 Astra除了有單一頁面、單一區塊的樣板,也有提供整個網站(包含多個頁面)的樣板

這些都能加快你設計網站的速度

68
69

如果你想更了解Astra主題,可以參考我寫的這篇文章
Astra主題教學-1款幫你搞定各類型網站的WordPress佈景主題

Elementor 擴充外掛

Elementor有非常多的擴充外掛可以選擇,但Elementor本身已經是1款龐大外掛,不建議再安裝過多的擴充外掛,會非常吃主機資源。

我在這邊推薦2款我覺得非常好用且受歡迎的Elementor擴充外掛

Essential Addons for Elementor (EA)

Essential Addons for Elementor是由WPDeveloper開發的一款Elementor擴充外掛。截至2021.02為止已經有超過90萬的下載數,可以說是非常受歡迎的1款外掛。

70

EA 免費版&付費版

EA有分為免費版及付費版

以下為付費版的價格方案,依照自己的需求選出最合適的方案

71

功能元素(Widgets)

Essential Addons for Elementor大約有 70+ 種Widgets(元素),補足Elementor缺少的一些網站元素其中有 40+ 種Widgets(元素)是免費版就可以使用的

例如:倒數計時、文章時間軸、文章彙整頁、進階標籤、價位表、行動呼籲…等

72

開啟 & 關閉元素(Widgets)

由於外掛的功能開啟愈多,就愈占主機空間,關閉你不需要的功能,可以避免網頁載入速度慢的問題

前往 Worpress後台 > Essential Addons > Elements

將用不到的Widgets (元素)關閉後,記得點擊右上方的 “Save Settings”

73

Essential Addons for Elementor 教學影片

如果你想要學習怎麼使用 EA的網站元素,可以參考 WPDeveloper官方的教學影片,他們為每個網站元素都錄製了簡單明瞭的教學

Ultimate Addons for Elementor

74

Ultimate Addons for Elementor是由Brianstorm Force(與Astra佈景主題同一間公司)所開發出來的1款Elementor擴充外掛。Elementor與Astra佈景主題缺乏的功能,都可以使用UAE來補足。

UAE有40+ 種Widgets(元素)、100+ 網站樣板、200+ 區塊樣板,可以說是1款非常強大的Elementor擴充外掛!

如果你想更深入了解UAE這款擴充外掛,可以前往他們的官網,只要點擊你想要了解的網站元素,就可以進入到那個元素的詳細介紹頁面

75

UAE 功能元素(Widgets)

76
77

UAE 價格方案

UAE 沒有提供免費版,只有付費版

如果你的佈景主題是使用Astra,購買Astra主題付費版時,只要是購買Mini Agency Bundle以上的版本,都能獲得這UAE款擴充外掛。一年當中,Astra主題都會有多次的優惠活動,在優惠期間入手終身版CP值最高!

如果你使用的是其他佈景主題,你也可以單獨購買 UAE,他的價格和Astra佈景主題一樣有分為年費制&終身買斷制(將上方的圓形按鈕向右滑,就能看到終身買斷的價格)

年費制:$55 USD / 年

買斷制:$249 USD / 一次性收費

看到這個價格,你會發現直接購買Astra主題真的划算許多

78

開啟 & 關閉元素(Widgets)

你一樣可以前往Wordpress後台,關閉用不到的功能,節省主機資源

前往 WordPress 後台 > 設定 > UAE 點擊Deactivate就可以將該功能關閉

79

Ultimate Addons for Elementor 教學影片

你可以觀看 Ferdy Korpershoek的 UAE 系列教學,他將每個元素都介紹的非常清楚易懂

Elementor Free vs Pro

功能

Free

Pro

拖&放

網頁編輯器

30個基本元素

50個進階元素

沒有

主題建構器

沒有

Pop Up

彈出式視窗

沒有

    表格建構器

沒有

WooCommerce

建構器

沒有

     動態內容
           +

    自定義字段

沒有

進場動畫

+

滑鼠特效

沒有

進階學習

Ferdy Korpershoek

Ferdy 在這個影片會手把手教你如何用Elementor設計網站,涵蓋了很多Widgets(元素)介紹,這個教學影片將近4個小時,但在看完這個影片後,Elementor大致上的功能你也都學會了!非常推薦給想要自學Elementor架站的新手!

Create a Pro Website

這個教學影片只有大約1個半小時,如果你沒有那麼多時間看完上面的影片,可以考慮看Create a Pro Website的這個教學影片。看完後,你對Elementor的操作邏輯會更清楚,再花一點時間自己摸索,很快就能上手Elementor!

結語

在幾年前,要一位完全不懂程式語言的網頁設計門外漢,自己架設出一個兼具美觀及實用的網站,真的是有點困難!但現在有了Elementor頁面編輯器,只要掌握基本的操作邏輯,善用Elementor的多樣化模板,任何人都能設計出心目中理想的網站!

Elementor 頁面編輯器是一款大型外掛,有非常多的功能,也會不斷地推出新功能。在這篇Elementor教學文中,我已經盡量把Elementor的操作邏輯及基礎技巧告訴你,但還是有很多的功能沒有辦法在一篇文章中詳細解說。

不過Elementor有超過500萬人在使用,你有任何問題,只要上網Google一下,90%問題都能找到答案,如果真的找不到解決辦法,也可以直接尋求官方客服協助。而在Youtube上也有Elementor各式功能的手把手教學,想要自學Elementor真的不是一件難事。

希望這篇Elementor教學文有幫助到你,如果有任何問題,歡迎直接點擊網頁右下方的Messenger與我連繫呦!

Elementor 常見問題

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

回到頂端