【Elementor 教學】 WordPress 最好用的頁面編輯器,基本操作及設定介紹

【Elementor 教學】 WordPress 最好用的頁面編輯器,基本操作及設定介紹

網路上有許多 Elementor 的介紹教學文,可是還是霧煞煞、看不懂嗎?

你是否擔心?

剛架好網站,好不容易從眾多的 WordPress 頁面編輯器中選擇了一個覺得最好用的 Elementor 頁面編輯器,可是下載好 Elementor 外掛後,卻卡關了⋯⋯

不用擔心!Elementor 是安布認為最適合新手、也很好上手的 WordPress 頁面編輯器,此篇就是用最簡單的方式,告訴你怎麼使用「免費版的 Elementor」。

文末記得索取「免費的 Elementor 攻略大全」唷!是我精心製作的 Elementor 攻略,而且不定期更新,讓你接收最新資訊!

Elementor 與其他頁面編輯器的優勢在於,它支援中文,與大部分的 WordPress 主題相容,而且非常適合沒有程式語言知識背景的新手使用。

為什麼要選擇 Elementor?

  1. Elementor 頁面編輯器支援「繁體中文」,這是少數頁面編輯器可以做到的,可以幫助中文母語人士減少摸索英文用詞的時間。
  2. 編輯頁面的同時,就是網頁呈現出來的樣子:這就是「全視覺化編輯模式」,可以減少編輯與預覽切換的時間。
  3. 拖移式的操作模式:新增工具時,只需要在你想要的位置進行工具的「拖移」,非常直覺式操作,可以更快速的編輯頁面內容。
  4. 能快速利用模板,製作出精美的首頁、Menu選單,引導你的觀眾點擊你希望他們看到的頁面!
Elementor首頁設定

Elementor 免費版和專業版的差異?

Elementor 免費版提供了十種工具,包含常見的文本編輯器、按鈕、分隔線、圖片⋯等等。

專業版本提供了網站最常用到的工具,例如:文章、作品集、表單、藝廊、幻燈片、評論⋯⋯等等 50 多個工具使用。

相較於免費版本只提供 30 幾種模板,Elementor Pro 提供了 300 多個模板,輕鬆套用模板就能製作出精美的頁面。

Elementor小工具
Elementor小工具
Elementor小工具
Elementor小工具

Elementor 免費版的區塊模板有哪些?

免費版還是提供蠻多模板可以選擇的,每一個種類不只一種模板。

❶ 關於(About)

❷ 行動呼籲(CTA)

❸ 客戶列表(Clients)

❹ 聯絡資料(Contact)

❺ 常見問答集(FAQ)

❻ 商品特色(Features)

❼ Hero

❽ 作品集(Portfolio)

❾ 服務(Services)

❿ 統計(Stats)

⓫ 團隊介紹(Team)

其實免費版本還是有很多模板可以套用,

接下來我們看看有哪些種類是免費版沒有的模板呢?

Elementor Pro 的模板有哪些?

專業版包含以上免費的模板,以下挑出只有專業版(Pro)有的,而免費版本沒有的模板做介紹:

❶ 404 Error Page

❷ 文章列表

❸ 頁尾(Footer)

❹ 頁首(Header / Menu)

❺ 價目表(Pricing)

❻ 商品列表(Product Archive)

❼ 單頁模板(Single Page)

❽ 單頁貼文(Single Post)

❾ 單個產品頁(Single Product)

❿ 訂閱表格(Subscribe)

以上只有購買專業版才會有的功能。

其中專業版最常被使用的有:

頁首(Header / Menu)、頁尾(Footer)、文章列表,

是專業版獨有的,免費版沒有的模板。

Elementor 怎麼下載?

進入 WordPress 後台 ➔ 側邊欄【外掛】➔ 【安裝外掛

Wordpress安裝外掛

搜尋【Elementor】➔ 【立即安裝】➔ 【啟用

Elementor 教學

左邊側邊欄就會出現 Elementor 免費版工具

Elementor 教學

Elementor 介面介紹

Elememtor 免費版中,有 Inner Section、標題、圖片、文本編輯器、影音、按鈕、分隔線、空白間隔、Google 地圖、圖示,10 種免費工具可以使用。

以下一一介紹10個工具的用法與可以呈現的樣貌。

elementor介面

你,準備好要開始教程了嗎?

.
.
.

那我們就開始囉!

Start!

❶ Inner Section

Elementor 教學 innersection

可以放很多個區塊,裡面所有的區塊都可以加入:標題、圖片、文本編輯器、影音、按鈕、分隔線、空白間隔、Google 地圖、圖示⋯等工具,區塊也可以設定寬度、高度、邊線⋯等等。

❷ 標題

我是標題,想打什麼都可以

  • 標題的【內容】可以設定:連結、尺寸、對齊方式⋯等等
  • 標題的【樣式】可以設定:標題顏色、尺寸大小、多粗多細、行高、字元間距、陰影、英文大小寫設定⋯等等
Elementor標題
可點擊放大,看得更清楚
  • 標題的【 進階 】可以設定:向內的距離、向外的距離、設定 CSS ID ⋯等等
  • 標題的【 Motion Effects 動畫 】可以設定:多種進場動畫、捲軸特效⋯等等
  • 標題的【 背景 】可以設定:標題的背景顏色、漸層或放置圖片,以及滑鼠停留時的特效⋯等等
Elementor標題
可點擊放大,看得更清楚
  • 標題的【 邊線 】可以設定:實體線、虛線、點線,邊線顏色、邊寬粗細、邊線圓角弧度、編框陰影,還可以設定滑鼠停留時的特效⋯等等
  • 標題的【 Motion Effects 動畫 】可以設定:多種進場動畫、捲軸特效⋯等等
  • 標題的【 Positioning 位置 】可以設定:標題寬度、位置⋯等等
Elementor標題
可點擊放大,看得更清楚

由於每個小工具的可以設定的功能都很相似,
以下就不再細細附上介面的截圖囉!

❸ 圖片

嗨!我是【❸圖片】,除了可以設定尺寸外,還可以設定「點擊放大查看」或「自定義連結」
  • 圖片的【內容】可以設定:圖片尺寸、對齊方式、是否顯示標題、自訂連結或放大展示⋯等等
  • 圖片的【樣式】可以設定:圖片寬度、透明度、滑鼠停留的特效、邊線設定、方框陰影⋯等等
  • 圖片的【進階】可以設定:向外的距離、向內的距離、CSS ID、動畫特效、背景、邊線、位置⋯等等
Elementor圖片設定
可點擊放大,看得更清楚

❹ 文本編輯器

文本編輯器就是「編輯段落的地方」。

粗體斜體、底線

引用

  • 項目符號
  • 項目符號
  • 項目符號
  1. 數字符號
  2. 數字符號
  3. 數字符號

特殊字元:” © ¼ √ ∞ × • ♥ ♦ → ↓ ↔ ⇐ ∴ ∑ ÷ ≥

     ↓ 他是【圖示

   我是 ❹ 文本編輯器

   ↑ 紅色邊框是【 ❶ Inner Section】:這裡示範的是兩個區塊

  • 文本的【內容】像 Word 的介面,可以設定:字體顏色、底線、斜線、刪除線、項目符號、數字符號、縮排、超連結、引用、純文字貼上、特殊字元⋯等等
  • 文本的【樣式】可以設定:對齊方式、字體顏色、字體尺寸、粗細、英文字大小寫、行高間距⋯等等
  • 文本的【進階】可以設定:內距、外距、背景樣式、邊線設定⋯等等
Elementor文本編輯器設定
可點擊放大,看得更清楚

❺ 影音

貼上要放 Youtube 影片網址,就會出現囉!
快來訂閱安布教學頻道  Ψ( ̄∀ ̄)Ψ

  • 影音的【內容】可以選擇 Youtube、Vimeo、Dailymotion 等影音平台,可以設定:開始與結束時間、自動播放、循環⋯等等
  • 影音的【樣式】可以設定:影片長寬比與對比飽和、亮度⋯等等
  • 影音的【進階】可以設定:內距、外距、背景樣式、邊線設定⋯等等
Elementor影音設定
可點擊放大,看得更清楚

❻ 按鈕

安布製作了 3 種按鈕樣式,示範按鈕有什麼功能
試著把滑鼠移到第三個按鈕上

  • 按鈕的【內容】可以設定:按鈕文字、連結、對齊方式、尺寸、圖示、圖示間距⋯等等
  • 按鈕的【樣式】可以設定:按鈕文字的排版、陰影、顏色、背景顏色、邊線設定、內距⋯等等
  • 按鈕的【進階】可以設定:內距、外距、背景樣式、邊線設定⋯等等
Elementor按鈕設定
可點擊放大,看得更清楚

按鈕圖示有多種選擇

Elementor按鈕設定
可點擊放大,看得更清楚

❼ 分隔線

有 26 種款式可以選擇

分隔線
  • 分隔線的【內容】可以設定:26款分隔線樣式、寬度、對齊方式、是否添加文本或圖示
  • 分隔線的【樣式】可以設定:分隔線顏色、尺寸、圖示大小、間距、文本樣式⋯等等
  • 分隔線的【進階】可以設定:內距、外距、背景樣式、邊線設定⋯等等
Elementor分隔線設定
可點擊放大,看得更清楚

❽ 空白間隔


咦,這邊怎麼這麼空?
沒錯,安布放了兩個【50px空白間隔 】在上面和下面
為了讓讀者更能辨識,加上了邊框,平常使用是很少加的
適時的讓文與文之間保持適當距離,會更方便讀者閱讀!

  • 空白間隔的【內容】可以設定:空白間隔的高度,預設高度為50,最小是10
  • 空白間隔的【進階】可以設定:內距、外距、背景樣式、邊線設定⋯等等
Elementor空白間隔設定
可點擊放大,看得更清楚

❾ Google 地圖

在工具裡輸入「總統府」,就直接出現地圖了!

  • 地圖的【內容】輸入地點名稱,接者可以設定:地圖大小、高度
  • 地圖的【樣式】可以設定:地圖的亮度、對比、飽和度、模糊度,及滑鼠停留時的特效⋯等等
  • 地圖的【進階】可以設定:內距、外距、背景樣式、邊線設定⋯等等
Elementor地圖設定
可點擊放大,看得更清楚

❿ 圖示

安布製作了 4 種圖示樣式,示範圖示有什麼功能
試著把滑鼠移到「第三個、第四個」圖示上

  • 圖示的【內容】可以設定:圖示樣式、超連結、對齊方式
  • 圖示的【樣式】可以設定:圖示顏色、滑鼠停留效果、圖示尺寸、旋轉⋯等等
  • 圖示的【進階】可以設定:內距、外距、背景樣式、邊線設定⋯等等
Elementor圖示設定
可點擊放大,看得更清楚

有多種圖示可以選擇,也是【按鈕】工具可以用的圖示

Elementor圖示設定
可點擊放大,看得更清楚

實際應用:把多個 Elementor 小工具結合一起

希望透過上面視覺化的方式,能夠讓讀者對每一個工具有初步的認識,安布接下來示範如何把多個小工具結合在一起。

實際應用:Inner Section + 圖示 +文本編輯器

頁面編輯器簡單的說,就是一個「幫助你編輯頁面的工具」

實際應用:Inner Section + 按鈕 +文本編輯器

Elementor 是最適合新手使用的頁面編輯器
(試試把滑鼠移動到按鈕上)

其他應用可以參考其他文章,這個網站都是用 Elementor Pro 編輯的,之後安布會分享「專業版 Elementor Pro 」的介紹、實際應用文章。

領取免費的 Elementor 攻略大全

最適合新手使用的頁面編輯器,此攻略有完整的功能介紹、新手一定要知道的注意事項!

不定期更新,讓你接收最新的資訊。

免費版本的 Elementor 就能打造有質感的文章

透過以上對 Elementor 免費版本功能的認識,可以發現免費版本的 Elementor 功能就很多樣,也有很多模板可以運用,輕鬆的打造出屬於自己的網站風格,只要會稍加運用區塊、背景、邊線設定、甚至運用一些陰影,也可以讓你的網站瀏覽起來有不同的感覺。

延伸閱讀:Elementor 頁面佈局 – 寫文章前要先知道的技巧
你知道做「網站首頁」要使用哪種頁面佈局嗎?「文章」最適合哪種頁面佈局呢?此篇就是告訴你如何透過 Elementor 輕鬆地在你的網站進行佈局設計,不管是全版面、頁面寬、或是一個區塊,都可以輕鬆搞定!

這個網站是用 Elementor Pro 打造的,如果你跟安布一樣,是自己架設並經營網站,對於改善網站外觀、風格營造、排版優化有興趣,可以先試用 WordPress 免費的 Elementor 頁面編輯器外掛,可以幫助你在文章排版和網站外觀上,有更多的突破!

網站使用工具

你需要知道的使用 Elementor 技巧,安布通通告訴你!

Anbu Course
我是 Anbu
分享網站經營經驗

This Post Has 2 Comments

  1. polo

    覺的你的網站真的用的很美…你真的是很在意設計的人….在你的文章裡學習到不少. 很感謝

    1. Anbu

      謝謝~(感動>< 我會繼續寫出好的文章希望能幫助更多人 🙂

發佈留言