Elementor教學 :WordPress 最棒的頁面編輯器(完整指南)

Elementor教學 :WordPress 最棒的頁面編輯器(完整指南)

Elementor 是 WordPress 最熱門的頁面編輯器之一,它不同於 WordPress 預設的區塊編輯器(Gutenberg),是近幾年快速崛起的優質軟體。更多 Elementor Pro 進階教學

你可以用 Elementor 客製化網頁設計,不論是套用內建的美觀模板,或是使用內建多種元素功能,它都能輕而易舉的幫助你:)

另外,Divi 軟體 是一款優質的頁面編輯器(或稱為主題也可),同樣有很多愛用者,你可依照自己需求挑選。

回來這篇文章,我整理了多個「 Elementor教學 」內容,從外掛介紹 / 安裝、面板介紹、頁面設計、其他功能 .. 。

內容很豐富而且適合新手,只要跟著流程學習就搞定囉。

如何打造品牌形象網站,影片學習(內有 Elementor 實戰教學)


1. Elementor 是什麼?

Elementor 頁面編輯器
Elementor 頁面編輯器

Elementor 是全球知名的 WordPress 頁面編輯器,全球已經有 500w+ 次外掛下載量,基本上與所有主題兼容。可參考 Elementor 外掛教學

你不需會任何程式基礎,只要用區塊拖曳方式,就能客製化形象網站設計。

有關任何的頁面佈局、新增區塊功能、編輯區塊內容等 ..,都將變得更加簡單。

Elementor 形象教學示範

Elementor 有多種功能區塊,是建置網站的好幫手,當你心中簡單構圖完成,接下來只要拖放區塊,並放置在網頁上即可完成設計。

Elementor 多功能的區塊元素
Elementor 多功能的區塊元素

Elementor 有多種區塊模板和網站樣板,點擊按鈕就可套用,再從中進行修改自己喜歡的設計,可節省大量的建置網站時間。

Elementor 具備豐富的模版庫

購物網站盛行的時期,或許你想架設購物網站,Elementor 對於 WooCommerce 電商外掛,有良好的支援。

並為此開發了 WooCommerce Builder(購物網站編輯器),除了一般的頁面設計,你也能設計客製化的購物網站頁面。

像是添加購物車按鈕、產品價格、產品圖片和說明、相關產品列表、產品庫存提醒等 .. ,如下圖。

WordPress頁面編輯器 :Elementor 的 WooCommerce Builder 購物網站區塊功能(部分功能)
WooCommerce Builder 購物網站功能區塊(部分功能)

方案評論

Elementor 有免費版方案可使用,如果感覺不錯用且有更多設計上的需求,再升級為進階版即可。完整 Elementor Pro 進階教學

Elementor 進階版,有額外 50 多個專業元素功能、300 多種進階模板、主題編輯器、表單編輯器、彈出式廣告編輯器、WooCommerce Builder(購物網站編輯器)等 ..,有更多功能可以使用。

Elementor 進階版方案,分為個人用、公司用的兩大類型,裡面又有不同的方案,但能使用的功能幾乎都一樣,最大的差別是「 使用的網站數量 」

如果你只有一個網站會使用,只需購買最低的方案即可,依此類推。

產品定價

Elementor 個人用,起手價格是 $ 59 美元 / 年(約 $1,800 台幣 / 年),算是滿平價的費用,可應用在一個網站上,並享用它的全部功能。


2. 如何安裝+設定 Elementor?

這章節,來學習安裝+設定 Elementor 外掛,把基礎工程搞定就能順利使用了。

安裝 Elementor

前往 WordPress 後台 > 外掛 > 安裝外掛,搜尋 Elementor 然後安裝+啟用(下圖的 Logo 才是官方正版外掛唷)。

如果不知道怎麼安裝,也可以參考 WordPress 外掛安裝

Elementor教學 :安裝+啟用 elementor 外掛
Elementor教學 :安裝+啟用 elementor 外掛

開啟編輯權限&禁止預設顏色 / 字型

Elementor 安裝後左側邊欄會看到操作區塊,點擊 Elementor 就能前往設定項,參考下面設定,完成後儲存。

Elementor教學 :開啟 Elementor 頁面權限&套用主題樣式
開啟 Elementor 頁面權限&套用主題樣式
  • 內容類型:是允許 Elementor 能在哪些頁面類型使用,這裡全部都先勾選。(可能你的選項會跟我不同,是因為我是使用 Astra 進階主題,有 Custom Layouts 這個客製化佈局功能,有興趣可參考 Astra 進階教學)。
  • 停用預設顏色&字型:Elementor 和 WordPress 主題都各自有一套樣式,把禁止樣式勾選起來,就會以 WordPress 主題的樣式為主,可預防不一致的狀況。

角色管理員

如果管理網站的成員不只一個,也可以對不同角色分派權限,這個有需求再設定就好。(有關於不同的角色可操控的範圍,可參考 WordPress 後台)。

Elementor教學 :角色管理員設定
角色管理員設定

3. Elementor 頁面編輯器,面板一覽

前面的基礎設定完成後,這章節看一下 Elementor 要從哪裡開始編輯,還有內部的操作面板介紹。

前往 頁面 > 新增頁面,點選上方的「 使用 Elementor 編輯 」按鈕。

Elementor教學 :使用 Elementor 編輯頁面
使用 Elementor 編輯頁面

進入後,Elementor 的主要編輯面板就出現啦!主要分為兩大塊,左邊是元素功能區塊,右邊是視覺編輯區(下圖)。

簡單來說,就是把想要的功能,直接拖曳到右邊就行了,但可能你會想說,那我想要 2 欄式、3 欄式的佈局要怎麼辦?沒關係,這我們下一章節都會教學。

這章節還是先了解 Elementor 其他的主要介面,可照下圖點左上角的 Icon,繼續下面的教學。

Elementor教學 :Elementor 面板介紹
Elementor教學 :Elementor 面板介紹

Site Settings 全站設定

接著會看到一些 Elementor 的可設定項目。

首先,前往 Site Settings,這裡面的設定會影響全部使用 Elementor 編輯的頁面,故又稱為全站設定,我會挑選幾個項目來介紹。

Elementor教學 :前往 Elementor 全站設定
前往 Elementor 全站設定

開始功能教學前,這裡有個比較重要的一點提醒。

如果發現設定的全局顏色、字型等 .. 沒有發生變化,那是因為一開始我們有把 禁用預設顏色 / 字型給關掉所以網站會依你目前使用的 WordPress 主題樣式為主。

Global Colors 全站顏色

前往 Global Colors,可設定全站常用顏色,之後在使用 Elementor 設計頁面時,就能直接選用這些顏色,維持網站色調的一致性。

Elementor教學 :全站主視覺設定
全站主視覺設定

全域字型

設定網站文字的相關內容,字型不知道設什麼比較好的話,可以用 Noto Sans TC 思源黑體,適合台灣人也滿好看的。

Elementor教學 :設定全站文字
設定全站文字

備註:這裡的文字設定是全站預設值,如果在單一 Elementor 元素上,有調整字型樣式,就會覆蓋掉這裡的預設值。

排版設定

這裡可調整頁面版面,也能調整網頁寬度,還有內文的顏色、字型等 ..。

Elementor教學 :頁面排版設定
Elementor教學 :頁面排版設定

User Preferences 使用介面

前往 User Preferences,可調整 Elementor 操作面板顏色,有雪亮白、暗黑色可以選,也能調整面板寬度。

Elementor教學 :User Preferences 使用者介面
User Preferences 使用者介面

其他操作

如果有安裝其他 WordPress SEO 外掛,像是 Yoast、Rank Math ..,只要有特別標明支援 Elementor,有機會在這裡找到相關功能。

像是下圖就是有安裝 Yoast 所以有出現,就能使用它進行頁面的 SEO 優化。更多教學,可參考 WordPress SEO 外掛推薦Rank Math 教學

也有按鈕可回到 WordPress 儀表板。

Elementor教學 :Elementor 其他教學
Elementor 其他教學

功能元素區塊

這是 Elementor 的重點區塊,就是實現頁面設計的組成要素,會看到有標題、圖片、按鈕等 ..,因為我有加購 Elementor Pro 進階方案,所以功能會比較多一點。

簡單來說,只要把想使用的功能,拖曳到編輯窗口就能完成設計了,是不是很方便呀!

Elementor教學 :Elementor 多種元素功能
Elementor 多種元素功能

如果元素太多要查找麻煩,也可以善用搜尋框找到想要的元素。至於如何用元素編輯頁面,下面章節會有教學,這裡就不多說。

全域工具

當開始編輯頁面,可能有些區塊已經設計好,想重複使用不想再重新設計。

就可以把指定區塊儲存為全域工具,之後就能直接拖來用啦!

Elementor教學 :Elementor 全域工具
Elementor 全域工具

底部欄位介紹

接著來介紹 Elementor 底部欄位有哪些功能,分別來認識一下。

一般設定

點擊底端齒輪 Icon,可設定當前頁面的基本資訊,像是頁面編輯、發佈狀態、封面圖片等 …。

Elementor 頁面一般設定
Elementor 頁面一般設定

Navigator 結構解析

點選底端欄的 Navigator 圖示,會出現當前頁面的分層結構,有助於了解整個頁面的編排。

點擊 Navigator 上的欄位,也可以直接把指定區塊挑出來,方便我們編輯。

Elementor教學 :Navigator 結構解析
Elementor教學 :Navigator 結構解析

響應模式

點擊底端欄的 響應模式,可切換不同裝置瀏覽,就能針對不同設備裝置做優化囉!是很方便的功能。

Elementor 頁面裝置切換
Elementor 頁面裝置切換

預覽頁面

預覽變更,就能瀏覽目前的頁面。

Elementor 預覽網站頁面
Elementor 預覽網站頁面

儲存&發佈選項

這裡可儲存目前的編輯頁面,跟 Excel 的存檔功能一樣(儲存草稿)。

還有可把頁面儲存成可重複使用的版型,之後就能直接叫出來使用(儲存成版型)。

Elementor教學 :儲存&發佈選項
Elementor教學 :儲存&發佈選項

如果都設計完成後,就可點 發佈 按鈕,頁面就正式製作完成囉。

頁面製作完成,接下來要做的就是把頁面放入網站上任一地方,常見的就是放入到選單中,請參考 WordPress 選單,有相關教學。

以上就是 Elementor 編輯器的大致介紹囉,看完是不是更上手了一點呢:)


4. 如何用 Elementor 設計頁面?

這章節是重頭戲囉,會教如何使用 Elementor 設計一個頁面。在此之前,有個 Elementor 編輯概念可先腦補一下。

Elementor 設計邏輯

Elementor 主要分為 Section 區塊、Column 欄、Widget 元素,是由這 3 大項組成。

一個頁面通常由多個 Section 區塊組成。

如下圖所見,Section 區塊能包含多個 Column 欄,而每個 Column 又能包含多個 Widget 元素。

Elementor教學 :頁面佈局觀念教學
Elementor教學 :頁面佈局觀念教學

當然還有更進階的排版作法,就是用 Inner Section 元素,在 Column 中又嵌入一個內部 Section 區塊,而內部 Section 又包含多個 Column & Widget。

但怕大家搞混,這裡先提個概念就好。

新增區塊內容

接下來,我示範如何開始用 Elementor 設計一個區塊,點編輯區的加號 Icon。

Elementor 新增 Column 欄架構
Elementor 新增 Column 欄架構

會看到很多用 Column 搭配的架構,選擇兩欄式的。

Column 架構選擇
Column 架構選擇

然後會看到畫面顯示一個兩欄式的區塊,點擊其中一個欄位,並把圖片元素拖曳至裡面(或是直接拖曳到該欄位內也可)。

Elementor教學 :新增圖片區塊元素
Elementor教學 :新增圖片區塊元素

接著左邊設定區,會自動顯示圖片可編輯的功能。

可以上傳圖片、設定圖片尺寸、對齊方式、圖片連結等 .. ,就自行發揮囉!

Elementor教學 :編輯圖片元素
Elementor教學 :編輯圖片元素

重複此步驟,在另一個 Column 欄位新增標題&文本編輯器元素,然後做相關設定。

這樣就建立一個完整的 Section 區塊了,是不是很簡單呢:)

Elementor教學 :新增標題&文本編輯器元素
Elementor教學 :新增標題&文本編輯器元素

樣式&區塊設定

如果想要更改標題顏色呢?也很容易,點擊指定右側的標題元素,然後切換到 樣式 分頁,就可以囉!

Elementor教學 :更改元素樣式
Elementor教學 :更改元素樣式

備註:任何 Elementor 的 Section 區塊 / Column 欄位 / Widget 元素想設定樣式,一樣可切換到 樣式 分頁,進行相關修改唷。

進階設定

最後就是進階設定啦!有關 Elementor 的任一個內容(區塊 / 欄位 / 元素),都可以做進階設定。

那進階設定裡面有什麼呢?

  • 調整邊界、內距離。
  • 指定 CSS。
  • 動畫設定。
  • 不同裝置設備是否反轉欄位 or 顯示或隱藏。
  • 不同的元素,有更多設定。
Elementor教學 :進階設定
Elementor教學 :進階設定

頁面預覽&發佈上線

當一個區塊設計完成後,接著可再設計第二個、第三個區塊 .. ,就會變成一個完整的頁面啦!

等頁面都設計完成,就可點預覽看一下成果。

我們可以把 Elementor 面板縮起來,或是點底端的預覽按鈕都可以。

完成後點 發佈,頁面就正式上線囉,接下來可參考 WordPress 選單教學,把頁面放入網站選單中,讓訪客能點擊就搞定啦!

Elementor教學 :頁面預覽&發佈
Elementor教學 :頁面預覽&發佈

以上是使用 Elementor 設計頁面的簡單教學,你也學會了嗎?


5. Elementor 編輯小技巧

剛剛我們學習了,如何使用 Elementor 自己設計一個頁面區塊。

這章節學習一下更多的編輯技巧。

切換指定區塊內的不同類型

我們已經知道 Elementor 的頁面,主要是由 Section 區塊、Column 欄位、Widget 元素,這 3 個所組成的。

既然如此,如果想要針對指定類型設定,有沒有什麼方法能快速選取呢?

參考下圖,點擊圖示就能自由切換,想要編輯的區塊類型囉!

Elementor教學 :前往指定類型
Elementor教學 :前往指定類型

或是點選底端欄的 Navigator,也能顯示頁面的組成結構,只要點擊欄位就能前往囉!

Elementor教學 :顯示頁面的組成結構
Elementor教學 :顯示頁面的組成結構

操作 Elementor 區塊

滑鼠移至區塊上方,會出現相關功能,也可以拖曳區塊進行排序,可參考下圖。

Elementor教學 :區塊相關操作
Elementor教學 :區塊相關操作

更多操作設定

Elementor 有支援右鍵功能,在任一個區塊點擊右鍵,能喚起相關功能。

像是複製貼上、刪除、重置樣式、儲存為可重複使用區塊等 .. ,可以自行玩玩看。

Elementor教學 :右鍵相關功能
Elementor教學 :右鍵相關功能

備註:這裡的複製 / 貼上 / 還原,和 Excel 的快捷鍵一樣。

以上是 Elementor 編輯小技巧分享:)


6. 儲存重複使用區塊

使用 Elementor 編輯一段時間,可能自己有設計一些區塊,不想再花時間重複製作,就可以儲存為重複使用區塊!

儲存後,之後有其他的 Elementor 頁面也需使用,就直接套用就行了!是不是很方便?

Elementor 重複使用區塊,大概有下面幾種類型,體積由小到大。

  • 儲存小工具
  • 儲存網站區塊
  • 儲存頁面

下面我分別教大家如何設定。

儲存小工具

假設下面這一段文本編輯器文字,在其他的 Elementor 頁面也想用。

在指定元素點右鍵按下 Save as a Global,就可儲存為「 可重複使用區塊 」囉。

Elementor教學 :儲存為可重複使用區塊
Elementor教學 :儲存為可重複使用區塊

如果要把剛存的小工具拿出來用,要怎麼做呢?點選全域,這裡就會列出所有可重複使用的元素囉!

Elementor教學 :使用全域元素
Elementor教學 :使用全域元素

儲存網站區塊

在指定區塊點擊右鍵,按下「 儲存成版型 」。

Elementor教學 :新增區塊為可重複使用
新增區塊為可重複使用

幫儲存的版型取個名字,點擊儲存。這樣區塊就存入到可重複使用的版型囉!

Elementor教學 :幫可重用區塊取名
Elementor教學 :幫可重用區塊取名

如果要引用剛儲存的區塊,要如何做呢?其實很簡單,點擊下圖的引用模板 Icon。

Elementor教學 :引入模板
Elementor教學 :引入模板

切換到「 我的版型 」分頁,點擊「 插入 」,就可以順利插入到網頁裡面了!

是不是很方便呢:)

Elementor教學 :插入可重複使用的區塊
Elementor教學 :插入可重複使用的區塊

儲存頁面

一個頁面設計完成了,如果打算重複使用此頁面,也可以直接把頁面版型儲存起來。

點擊底端欄的「 儲存成版型 」,然後命名即可。

Elementor教學 :儲存成版型
Elementor教學 :儲存成版型

之後在 Elementor 版型庫,就可以直接拿來套用啦!

Elementor教學 :找到剛儲存的頁面
Elementor教學 :找到剛儲存的頁面

7. Templates 範本功能

Elementor 安裝完成後,WordPress 後台側邊欄會多出一個 Templates 範本功能,這是用來幹嘛的呢?下面跟大家分享它的幾個常見功能。

已存版型(Saved Templates)

這是用來存放客製化「 頁面、區塊、全域小工具 」的地方,能進行新增 / 編輯 / 刪除等 .. 操作,如果你有自行新增的全站區塊,就能來這邊做統一編輯。

下面我簡單示範,如何新增一個全站區塊,之後在編輯任一個 Elementor 頁面,隨時都能拿出來用。

首先,前往 Templates > 已存版型(Saved Templates),點擊上面的 新增

Saved Templates 介紹
Saved Templates 介紹

選擇想新增的重複版型類型,取個名字後送出。

Elementor 選取版型類型
Elementor 選取版型類型

之後就能進入 Elementor 編輯區啦,後面就跟用 Elementor 設計頁面的流程差不多,就不多做說明囉:)


8. Elementor 快速建立頁面的方法?

我們都知道,如果要從零開始設計整個網頁,實在會花費很多時間。

那有沒有方法是能快速套用模板的?其實 Elementor 提供多種現成模板,方便你快速使用!

這裡簡單分成幾個方法,如下。

  • 套用區塊模板
  • 套用整個頁面
  • 套用自訂版型
  • 套用第三方主題 or 外掛的版型

一、套用區塊模板

Elementor 有非常多類型的頁面,可讓你直接套用進去。

首先,使用 Elementor 編輯頁面 > 點資料夾 Icon,就能招喚模板出來用了。

Elementor教學 :套用 Elementor 現成模板
套用 Elementor 現成模板

前往 區塊 分頁,就會出現許多一塊塊的現成佈局,只要選取你愛的插入即可。

還可善用分類功能,看是想建立關於我們、行動招喚(CTA)、常見問題、聯絡我們等 .. ,有很多類型區塊可切換選擇。

Elementor教學 :切換區塊類型,可善用分類
切換區塊類型,可善用分類

備註:有標記 Pro 標籤的是 Elementor 專業版才能使用的唷。

二、套用整個頁面

再來切換到 頁面 分頁,這裡有很多整頁式的樣板可以選擇唷!看你喜歡哪一種就拿來用吧!

Elementor教學 :切換到頁面類型
切換到頁面模板

三、套用自訂版型

最後一種就是套用自訂版型囉!前幾個章節有提到,如何新增可重複使用的區塊。

新增完成的自訂版型,都能在這裡被招喚出來,就不用重新再設計一次啦。

Elementor教學 :套用自訂的可重複使用區塊
套用自訂的可重複使用區塊

四、套用第三方主題 or 外掛的版型

除此之外,因為 Elementor 這款頁面編輯器真的很有名氣,所以許多 WordPress 開發公司 / 者,都針對它做相關擴充功能。

舉例來說,像是 Astra 一樣是很知名的 WordPress 主題,連公司都說自己是 Elementor 的愛好者,而推薦大家去使用 Elementor。Astra 主題入門,有更多教學。

理所當然的,Astra 主題有針對 Elementor 做一定程度的功能擴充,安裝完成後會多了一個 Start Template 起始模板的 Icon,點進去就能使用囉!

Elementor教學 :使用 Astra 的 Starter Template 功能
使用 Astra 的 Starter Template 功能

接著,會看到又有琳瑯滿目的網站頁面&區塊,可以供我們挑選使用了!

Elementor教學 :使用 Astra 的 Starter Template 功能
使用 Astra 的 Starter Template 功能

更多使用 Astra 主題+Elementor 頁面編輯器外掛,所架設而成的網站,可參考 建立 Blog形象網站架設購物網站架設,內有更多的完整教學。

以上就是使用 Elementor 快速打造網站頁面的方法分享!


9. 適合 Elementor 的佈景主題

剛有提到 Elementor 是眾多 WordPress 頁面編輯器 裡,非常熱門的其中一款。

所以許多 WordPress 有名的主題,都會要求自家主題支援 Elementor,甚至有些主題還有提供 Elementor 的擴充功能。

觀念釐清:

這邊要先釐清一個觀念,Elementor 本身是屬於 WordPress 外掛的類型,所以幾乎可兼容 99.9% 以上的佈景主題。

也就是說不管你是用哪一種主題(只要有符合 WordPress 開發原則),Elementor 都可以用。

因為 WordPress 外掛&主題,本來就是兩種不同的類型,彼此本來就不太會互相衝突。

那這裡用到的「 支援 」、「 適合 」字眼,是指有些佈景主題,舉例來說像是 Astra 主題Soledad 主題、OceanWP 主題,它們有特別針對 Elementor 開發更多的擴充功能,僅次而已。

而不是只有這幾款主題可以用 Elementor,不要會錯意了唷!

如何判斷主題是否支援 Elementor?

因為 Elementor 使用者很多,所以通常主題商都會在官網或行銷文案上,特別標註有支援 Elementor,稍微瀏覽一下就知道了。

像是 Astra 主題,就有針對 Elementor 打造擴充功能,這篇 Ultimate Addons for Elementor 教學(進階版才能用)有說明。

Astra 主題有支援 Elementor
Astra 主題 有支援 Elementor

或是許多 WordPress 玩家,也會在 Themeforest 主題森林 上購買主題,會看到主題介紹欄有特別標註支援 Elementor。

像是熱門的 Soledad 主題,也有針對 Elementor 開發許多元素功能。更多 Soledad 主題架站 教學。

熱門的 Soledad 主題,也支援 Elementor
熱門的 Soledad 主題,也支援 Elementor

也能參考下面的 WordPress Blog 架站影片,是使用 Soledad 主題製作的,它對 Elementor 有良好支援,且主題有內建多種 Elementor 工具可使用。

使用 Soledad 主題,完整製作 WordPress Blog 網站(內有多種 Elementor 工具)

主題自帶頁面編輯器

比較要注意的是,如果使用的主題有自帶自家的頁面編輯器,像是 Newspaper 的 TagDiv Composer、Avada 的 Avada Builder、Flatsome 的 UX Builder 等 .. 。

這幾款也是很賣座的主題,因為是一次付費享有終身更新。

會建議就使用它們內建的頁面編輯器就好,不然買這款就沒意義了,而且自家的軟體支援度一定最高。

相關教學,歡迎參考 Newspaper 入門主題Avada 入門教學Flatsome 入門教學

能推薦一些對 Elementor 有良好支援的主題嗎?

關於有支援 Elementor 頁面編輯器的 WordPress 優質主題,我自己是使用 Astra 主題。

當然你不一定要跟我的一樣,畢竟每個人喜歡的風格並不同,像是 OceanWP、GeneratePress、Soledad .. ,這幾個對 Elementor 一樣有良好支援。

下面我會分別列出免費版、進階版的 WordPress 主題,都是我認為優質且和 Elementor 有良好支援,供給你參考囉!


10. Elementor 擴充外掛有哪些?

如同我上一章節所提到的,因為 Elementor 這個 WordPress 外掛十分熱門,所以除了主題商有開發擴充功能,那想當然耳,外掛商也一定有開發週邊的功能啦!

下面我簡單挑選幾款常見的 Elementor 擴充外掛,可幫助你再次強化 Elementor(雖然它原本就很強了XD)。

Essential Addons Elementor

Essential Addons Elementor 外掛
Essential Addons Elementor 外掛

Essential Addons Elementor 提供超過 70 個廣告素材元素、網頁設計元素,強化 Elementor 頁面編輯器。

70 幾個廣告元素中,有將近 40 個是免費版就能使用,像是文章頁面佈局、倒數計時、表格支援、行動招喚、進度條、黏性影片顯示 .. 。

剩下就是它的進階版才能用的元素囉,有關於這款外掛也能參考影片。

Essential Addons Elementor 展示影片

如果你有預算考量,但是又很想使用 Elementor 做更多的事情,使用 Elementor 免費版+Essential Addons Elementor 免費版,其實就能設計出很棒的網站了。

當然,如果有更多的客製化需求,可能還是要採用進階版,這個就看個人需求囉:)

Ultimate Addons Elementor

Astra 的 Ultimate Addons for Elementor 功能外掛
Astra 的 Ultimate Addons for Elementor 功能外掛

Ultimate Addons for Elementor 終極擴充功能,是 Astra 在 Elementor 頁面編輯器上,新增了多種區塊元素,可強化網頁設計能力。

除了 Elementor 編輯器,Astra 也有 Ultimate Addons for Beaver Builder 外掛,幫 Beaver Builder 做了功能擴充(這在購買 Astra 方案時,就需選擇)。

Ultimate Addons for Elementor 主要功能有,提供 40 多種功能小套件、100+ 網站模板、200+ 區塊模板。

Ultimate Addons for Elementor 外掛特色
Ultimate Addons for Elementor 外掛特色

這個外掛通常適用於 Astra 主題的使用者,如果你正使用 Astra 主題,應該會對你有幫助,但這是進階版才有的功能唷!

相關內容可參考 Ultimate Addons for Elementor 教學

除此之外,還有許多 Elementor 週邊外掛,就不個別列舉了,如果有興趣的只要在 WordPress 後台的安裝外掛,搜尋 Elementor 應該就一堆跑出來了!


常見問題

Elementor 是什麼呢?

Elementor 是全球知名的 WordPress 頁面編輯器,它有免費版本可使用。

全球已經有 500w+ 次外掛下載量,可用在任何的佈景主題上,且和 WordPress 知名佈景主題 有完美兼容性。

你不需會任何程式基礎,只要用區塊拖曳方式,就能客製化形象網站設計。

Elementor 適用於所有主題嗎?

是的,只要是合乎 WordPress 系統的開發原則,Elementor 都是兼容的。

Elementor 可以和其他的外掛一起使用嗎?

它幾乎適用於所有外掛。如果遇到不兼容問題,Elementor 有表明歡迎向他們提出。

什麼是 Elementor Pro?

Elementor 有提供免費版給大家使用,如果想要嘗試更多進階版功能,就能使用 Elementor Pro。

可以使用 Elementor 編輯 WooCommerce 頁面嗎?

當然可以,Elementor 還提供專門處理電商頁面的 WooCommerce Builder,讓你編輯商品列表、單一商品頁、結帳頁面等 ..。


WordPress 學習資源

學習 WordPress 網站架設流程中,或許會遇到一些解決不了問題,可以在下方留言給我,我會盡力協助解答!

接下來,額外分享 3 項架站資源,可有效幫助大家處理網站問題。

資源一:犬哥數位(專業 WordPress 網頁設計公司)

如果你沒時間自己架站、或是遇到解決不了的網站問題。歡迎洽詢 犬哥數位(WordPress 網頁設計公司),請專家製作會更有效率!

WordPress 網頁設計公司|犬哥數位

資源二:WP 精選模組攻略書

由於 WordPress 主題 / 外掛有非常多種,很多網友私訊我不知道安裝哪一款,才有辦法實現功能。或是已經試了很多款外掛,但始終找不到適合自己的。

對此我整理了 高達 100 多款精選主題&外掛大全(電子書),這些都是我們團隊協助客戶開發案件時,會搭配使用的。一來外掛品質優良,二來功能性也足夠強!

WordPress 模組指南書
WordPress 模組指南書

資源三:官方教學資源(含 FB 社群解答)

如果你偏愛自架網站,也歡迎持續關注 犬哥網站 Blog,我們都持續有發布新的網站架設、網路行銷教學。

或是你比較喜歡看影片學習,也可關注 YouTube 頻道,幫助你更容易進入狀況。

當然,如果你在操作過程中遇到問題,也可以加入 WordPress 架站 x SEO 教學時光屋 – 犬哥網站 ,除了有網友一同幫你解惑外,犬哥團隊也會同步在社團幫助大家。

犬哥網站|交流社團
犬哥網站交流社團

關於作者

犬哥網站:網頁設計 x 網路行銷教學平台

犬哥網站

我們分享 WordPress 架站 x 網路行銷知識,不需會任何程式技術,就能自己建立各種網站。 搭配豐富的網路行銷教學,幫助你被更多人看到。 趕快跟著我們的腳步,開始學習吧:)

在〈Elementor教學 :WordPress 最棒的頁面編輯器(完整指南)〉中有 47 則留言

  1. 站長你好,我最近剛從avada主題轉換成elementor+astra,在想用elementor編輯商品頁面的時候 會出現:此頁面無法載入的狀況。
    停用了所有外掛都沒有辦法解決,照著官方的說明開啟safe mode後是可以成功編輯的,只是會顯示空白的頁面。

    1. 嗨,可以前往 Elementor > 設定,檢查一下「 內容類型 」有沒有把相關商品頁面打勾,這樣才有辦法編輯唷~

  2. 站長您好:可以麻煩介紹一下裡面的「read mor」小工具如何使用嗎?官方的說明看不懂,網路上找不到答案,是我太笨嗎………..

  3. hi 小犬
    今天看了你的介紹完成網站架設,真的非常謝謝你
    但想請教一個問題,我的elementor一直有紅字顯示 “ 到Pro的說明頁 “
    不知道代表什麼意思,因為剛好我的首頁上方黑色橫條應該會顯示elementor用於編輯
    但不知道是不是我設定到什麼後,那個選項就消失了
    謝謝

    1. 嗨,Elementor 會有出現一些 Pro 廣告提廣告提示是正常的唷,有部分外掛都會有進階版功能的促銷,這不需多加理會。

      至於你說的首頁上方的 Elementor 編輯選項不見,只有當前頁面是使用 Elementor 設計的,才會出現這個按鈕唷。

      不然就是可能主題 or 外掛的影響,換款主題測試,或是把可能造成影響的外掛,逐一停用查一下可能造成影響的外掛。

  4. hi 小犬
    想請教我的elementor裡出現了到 “到Pro說明頁“的字樣
    點擊進去後顯示畫面購買方案
    控制台中elementor本來應該會在頁面上方可以編輯
    但現在不見了,不知道是不是今天一直換主題然後又刪刪減減了一些格式的關係
    被我用不見了
    因為我記得elementor應該有免費版的?

  5. 您好,
    想請教一下,照著步驟裝了elementor、到新增頁面、使用elementor編輯後,
    沒有到看可以選"Site Settings 全站設定"的選單,從"搜尋小工具"以上的畫面完全沒看到,
    不曉得是為什麼。(我使用的免費主題是sydney)
    謝謝您。

    1. 嗨,WordPress 5.8 版之後的「 網站小工具 」介面有做變動。

      整體來說,操作介面跟我們編寫文章時一樣(都是區塊編輯器功能),把想要的元素加入到要顯示的地方即可。

  6. 使用elementor pro 編輯完頁面並更新,再點檢視頁面,卻沒看到該有的效果呈現,比如下拉選框或連結,就是有看到圖跟字而已,但是點擊卻完全沒反應,請問小犬大大知道這是怎麼回事嗎? PS 該更新的也都更新了!
    謝謝您~

    1. 犬哥網站

      嗨,YAYA,

      你可以嘗試看看到 Elementor > 工具 > Regenerate CSS 重新更新。然後,清除緩存。

      緩存不論是外掛、主機、網頁都需要進行刪除。

      如果除了 Elementor 之外,還有使用其他的頁面編輯器,那可能就需要停用。

      接著最後一個可能是,主題與 Elementor 衝突,這可能就需要聯繫主題開發者協助!

  7. 您好~
    請問主題elementor+astra,圖示使用內建SVG圖示,為什麼在網頁上無法顯示,出現小方框

    1. 犬哥網站

      嗨,bonnie,

      有可能是圖片像素太大,可以將其進行不破壞性壓縮之後再上傳,太大的圖檔有時候造成讀取問題。

      或者是後台有外掛與 Elementor 、 Astra 有衝突,可以一一停用並且檢查一遍。

  8. Hi, 小犬大大,
    我今天創建了幾個全域的區塊,但找不到可以刪除的方法。
    所以來求救小犬大大,感謝!

    1. 犬哥網站

      嗨,Andrea,

      在 WordPress 後台 > 版型列表 > 已存版型,可以找到已經儲存的全域區塊進行更改唷~

  9. 小犬你好
    不好意思,打擾您了
    想請教關於Elementor Pro付費版本,我把文章分成四個分類,然後分別在首頁上,以各類別呈現在不同的區塊上,欄位上除了精選圖片、標題和發佈日期以外,還需要顯示標籤與點擊數(瀏覽數),這樣付費版本可以達成嗎?
    我有試著用 list Category Posts 來製作,但欄位上就無法顯示標籤與點擊數,所以想來詢問您。
    謝謝您抽空的回應,感謝。^^

    1. 犬哥網站

      嗨,Boyce,

      Elementor Pro 可新增短代碼小工具,配合你搜尋到的這款外掛,應該就能達成你希望的成效。

      不過我並沒有這樣配合使用過,所以不確定 Elementor 跟 list Category Posts 外掛是否兼容,

      若有衝突問題,可能就需要尋找其他替代外掛,或是聯絡 list Category Posts 外掛開發者尋求支援。

  10. 犬哥您好,我想問一下關於編輯頁面的部份,我按照您影片下載了ASTRA佈景主題DIDITAL那個,也順利看到編輯頁面那邊有黑BAR,上面顯示”自訂””新增””編輯頁面””使用elementor編輯” 我按照影片點選了”自訂”可是我被帶到另 一個畫面,有寫小工具點進去是出現”目前使用的佈景主題提供 8 個小工具區域,但這個頁面不會顯示小工具區域。使用外觀自訂器時可以瀏覽網站上的其他頁面,這樣便能檢視及編輯顯示於這些頁面的小工具。
    請問是什麼呢?我還是無法使用自訂來直接直觀的編輯頁面>”< 希望犬哥可以幫幫我

    1. 犬哥網站

      嗨,塔莎,

      光看文字描述好像無法直接分析你的問題點,若方便的話,可前往 FB討論社團 截圖你的疑問發布貼文,

      這樣廣大 WordPress 愛好者也能夠一起幫助你唷!

  11. 請問犬哥 我網頁左上角跟右下角有名子 我想更換 要怎麼做更換呢 我用標題名稱的方式沒辦法更換
    想請教你 謝謝 下面有我的網頁網址

    1. 嗨,宥舜,

      這是 Header 和 Footer 的設定,可以查看你的主題是否有修改 Header 和 Footer 相關功能唷,

      應該是可以找到相關設定,進行修改的!

  12. 犬哥您好 想請教你一個問題 我在安裝佈景主題時出現以下
    發生未預期的錯誤,應該是 WordPress.org 或這個網站伺服器的組態發生問題。假如持續發生相同錯誤,請前往技術支援論壇尋求協助。
    我該怎麼辦呢

  13. 請問犬哥 我下載了SAFLY外掛 但我找不到他的壓縮黨在哪裡 所以我不能上傳 請問在哪裡可以找到壓縮黨

  14. 犬哥的文對wp新手真的獲益良多,最近才知道不要把elementor當做寫文章的工具
    在這邊有個小問題想請教犬哥,目前寫文章要開始改成wp預設的區塊編輯器了,但它是不是不能像elementor分開調整電腦跟手機排版? 像我先調整電腦版的圖片,手機版也會跟著跑掉,是我還要下載什麼樣的外掛嗎? 問題感覺簡單到我真的查不到任何資料 哈哈 拍謝~

    也有遇到第二個小問題是,wp的區塊編輯器本身超連結的文字下方會自動生成底線,真的超困擾的,有爬文到好像是box-shadow這個東西 ,但找不到怎麼關掉,麻煩犬哥

    1. 犬哥網站

      嗨,HENRY,

      建議你直接使用 WordPress 內建的區塊編輯器寫作就好,

      WordPress 文章會自動有響應功能,

      至於你說的圖片,不太清楚你需要做什麼樣的調整,

      如果需要調整或壓縮圖片,建議你先在電腦自行調整好,再上傳到 WordPress 會更好,

      如果真的有困擾,可以針對你想呈現的樣子去尋找外掛幫助你更改圖片的呈現方式,或是使用 官方的 AMP 外掛 試試看,

      至於你提到的 WordPress 區塊編輯器,預設本身的連結是沒有底線的,若是出現底線,可能與你使用的主題或是模版有關,

      如果你的主題有自訂 CSS 選項,可以前往輸入停止顯示連結底線的 CSS 唷。

      相關教學可參考:刪除超連結底線 教學。

  15. 犬哥您好~
    想請問看到不少文章感覺不是用wordpress內建的編輯器
    像是在標題的部分會做底色設計之類的
    這個也是用elementor做到的嗎?
    因為看好像網路上不建議用elementor來寫文章

    謝謝你

    1. 犬哥網站

      嗨,Ping,

      你可以參考其他的區塊編輯器,來強化 WordPress 內建的區塊編輯器,

      像是:Stackable 就可以完成你所需要的,標題區塊文字加上底色的需求,

      Elementor 是很好的頁面編輯器,但建議不要使用 Elementor 撰寫文章,因為文章數量一累積下來,網站檔案就會因此變重,導致網站速度降低唷!

  16. 站長你好,
    請問主頁若想置放一連串已編輯好的section,
    每個section的形式相同,元素不同
    要怎麼使用elementor
    網站能夠自動更新及增加
    而不必自己在後台親手設置
    還是說這個問題一定要寫code解決

    例如以下這個網站的配置:
    https://skilluppp.com/category/online-marketing/

    1. 犬哥網站

      嗨,捷妮,

      讀文字敘述不太明白你希望呈現什麼樣的效果,

      如果你想要跟你貼上的網站一樣,文章可以自動更新,那麼 Elementor Pro 版本的「 Post 」小工具,是可以做到的唷!

  17. 犬哥您好:
    不小心導入了一個templates到全站,後來想重新用 Elementor 建置網站,
    刪除了所有頁面,模板還是存在,不知道該怎麼徹底刪除那個templates,
    可以請問要去哪刪除嗎?謝謝犬哥

  18. 請問犬哥 我在home裡面使用圖片滾輪 圖片用最大的 編輯時正常 但實際網頁出來後圖片是小的且沒有滾輪 請問我該怎麼辦

    1. 犬哥團隊

      嗨,宥舜,

      建議你檢查圖像區塊 > 進階設定 > 版面配置,有無動到「 寬度 」、「 位置 」等 .. 項目的調整,

      如果沒有,建議你可前往 FB 社團,貼上你的相關截圖,更方便犬哥團隊和廣大網友幫助你解決問題唷!

  19. 想請問我買了elementor pro 但是有一些小icon都沒有辦法呈現 會長的像一個 口
    這樣子,請問是我有什麼功能沒有開啟嗎。

    1. 犬哥網站

      嗨,ray

      如果是添加表情符號,可能是因為你的主機、網站、主題等 .. 有設定禁止載入 icon,這是因為載入 icon 會很消耗主機資源,所以有的網站會有這樣的設定,建議你可分別詢問客服,協助你處理。

      如果指的是 Elementor 內建的圖示庫,建議你可儲存後,清空快取,前往前台頁面刷新檢查看看,如果還是無法順利解決,建議你可尋求 Elementor 的幫助唷!

發佈留言

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

返回頂端