Elementor 使用教學：最受歡迎WordPress拖放式頁面編輯器

@ 2024-05-31

Elementor 是什麼？

Elementor 是目前最受歡迎的 WordPress 頁面編輯器，專為編輯 WordPress網站頁面而設計，下載次數已經超過1000萬次。它提供簡單的拖放編輯功能、多樣化的小工具和高度可定制的功能，相對於編寫網站程式碼來說，使用它製作網站更加容易。要開始使用 Elementor，您只需在 WordPress 後台的插件程式中安裝並啟用它。

不論您是設計師還是行銷人員，即使沒有任何網站程式碼基礎，只要想快速建立一個專屬且精美的網站，Elementor 頁面編輯器絕對是您最佳的選擇！更重要的是，它提供免費版本供使用，對於一般的網站建立來說已經非常足夠。

Elementor 特色功能

無需程式基礎

對於一般人來說，製作網站需要使用 HTML/CSS/JS的程式語法，這樣的門檻太高了。然而，Elementor 是一個針對非程式人士設計的頁面編輯器工具，即使是免費版本也能完成完整的網站設計。

拖放編輯

使用 Elementor 製作網頁無需編寫程式，只需使用滑鼠進行拖放操作！將所需的元素小工具直接拖放到編輯界面上，便可進行編排、縮放或更改顏色等操作。

直觀的界面

Elementor 是一個所見即所得的網站編輯器，也就是說，您可以立即看到修改後的效果，無需點擊預覽按鈕查看，非常方便。此外，編輯界面設計得非常直觀，即使沒有說明文件或教學影片的幫助，您也能輕鬆熟悉其操作方式。

預設範本

預先設計的範本能夠加快網頁製作的速度，您無需從頭開始，只需修改範本的內容或圖片，就能快速完成網頁的初步設計，節省了設計所需的時間。

多種小工具

Elementor 內建了許多元素小工具供您使用，每個工具都有不同的功能，從基本的標題、圖片和按鈕等，到社交網絡服務圖示、進度條功能等。

響應式設計

透過 Elementor，您可以調整網頁在電腦、平板和手機上的呈現方式，確保在不同設備上都能提供良好的使用者體驗。

Elementor 優點與缺點

Elementor 是一個流行的 WordPress 頁面編輯器，它具有許多優點和一些缺點。以下是 Elementor 頁面編輯器的主要優缺點：

優點

可以從免費版開始使用
提供直觀且易於使用的拖放介面
實時預覽模式下編輯網站頁面
通過安裝插件和擴展來增加功能和元素
輕鬆創建適應不同設備和屏幕尺寸的頁面

缺點

可能會增加網站的加載時間
進階功能需要付費使用

Elementor 價錢

Elementor 可以分為免費版本及付費版本。如果免費版已經無法滿足你的需求，那麼這時候就可以考慮購買 Elementor Pro 以解鎖更多進階的功能！

免費版 vs 付費版

與免費版相比，付費版提供更多實用的小工具與範本。除此之外，還包含一些進階的功能，像是主題編輯器、彈窗編輯器、動態內容、表單編輯器等等。

	免費版	付費版
拖曳編輯器	✅	✅
響應式編輯	✅	✅
30 個基本工具	✅	✅
50 個進階工具		✅
全域編輯	✅	✅
內建模板	✅	✅
300+進階模板		✅
自定義HTML		✅
動態內容		✅
自訂義功能		✅
Pop Builder		✅
自訂CSS		✅
角色管理員		✅
頁首和頁腳設計		✅
404頁面設計		✅
自定義字體		✅

Elementor 安裝方法

安裝 Elementor 免費版十分簡單，只需前往 WordPress 後台 > 外掛 > 安裝外掛，搜尋 Elementor 然後安裝並啟用。完成後就可以在側邊欄找到 Elementor 了。

Elementor 設定

一般設定

內容類型：勾選什麼樣類型的內容可以使用 Elementor，可以看狀況自行調整使用。
停用預設顏色：關閉 Elementor 的全域顏色設定，Elementor 會使用佈景主題的配色。
禁用預設字型：關閉 Elementor 的全域字型，Elementor 會使用您佈景主題的字型。

進階

CSS 列印方法：對所有生成的樣式表使用外部 CSS 檔案，選擇此設置以獲得更好的性能（推薦）。
切換編輯器裝載方法：為了解決伺服器設置衝突問題。
啟用未過濾的檔案上傳：允許上傳任何文件（包括SVG）
Google Fonts：如果您想封鎖載入 Google 字體，請停用此選項。
Optimized Gutenberg Loading：使用此實驗來減少不必要的渲染阻塞負載
Optimized Image Loading：在 LCP 影像上套用 fetchpriority=”high” 並在首頁畫面影像上套用 load=”lazy” 以提高效能分數。
載入 Font Awesome 4 支援：Font Awesome 4 支援腳本（shim.js）是一個腳本，可確保在使用 Font Awesome 5 庫時正確顯示所有先前選擇的 Font Awesome 4 圖示。
Generator Tag：生成器標籤是一個元元素，指示用於建立網頁的屬性。它用於分析目的。

角式管理權限

這邊能設置管理你的使用者誰能使用 Elementor 編輯內容

Elementor 界面一覽

前面的基本設定完成後，接下來看一下 Elementor 要從哪裡開始編輯

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

進入後，就會看到 Elementor 的編輯界面了，編輯面板分為兩邊，編輯方式很簡單，就是把左邊的物件，直接滑鼠拖拉到右邊就可以了。如下圖所示：

左邊：功能物件，免費版就有很多基本小工具可以使用
右邊：預覽頁面，可以立即看到更改後的樣貌

常用小工具

標題：通常運用在大標題、副標題上。
圖片：可以選取獨立的照片，通常上傳圖片、照片等其他素材。
內容編輯器：通常用於撰寫較多的文字，可以調整基本樣式，像是文字顏色、置中、粗細、連結等功能。
按鈕：讓人點擊連結，可以調整按鈕文字、連結，以及滑鼠移動的特效。
圖示：有單獨圖示，也有加上文字標題，可以針對自己的設計來選擇。

免費版小工具

付費版小工具

Elementor 使用教學

Elementor 編輯器架構

Elementor 主要分為 Section 區塊、Column 欄、Widget 元素，是由這 3 大項組成。一個頁面通常由多個 Section 區塊組成。Section 區塊能包含多個 Column 欄，而每個 Column 又能包含多個 Widget 元素，所有的版面都是以這個概念去組成的。

新增區塊內容

示範如何開始用 Elementor 設計一個區塊，點編輯區的「+加號圖示」。

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

然後會看到畫面顯示一個兩欄式的區塊，點擊其中一個欄位，並把圖片元素拖曳至裏面。

可以上傳圖片、加入標題、內容編輯等… 這裏就讓大家自由發揮了！

修改文字

如果想修改這段文字，就點選該段文字，在左邊就可以直接編輯文字、加入超連結、調整尺寸、對齊方式…等等。

修改圖片

如果想修改這張圖片，就直接點選該張圖片，在左邊就可以更換圖片、修改尺寸、對齊方式、置入連結…等等。

樣式設定

如果想更改標題顏色也很容易，點擊右邊的標題，然後左側切換到樣式分頁，就可以調整樣式。

進階設定

有關 Elementor 的任一個內容（區塊 / 欄位 / 元素），都可以做進階設定，那進階設定裏有什麼呢？

版面配置

調整邊界、邊框間距、寬度
對齊方式
元素排序
指定 CSS
動畫設定
顯示或隱藏
不同的元素，有不同的設定

響應模式

點選左側工具列下方的「響應模式」，然後會在中間上方出現各種響應裝置預覽設定
點選「手機按鈕」，就會預覽網站的手機設計版本

導覽器

點選左側工具列下方的「導覽器」，會在頁面的右邊出現導覽器小框，在導覽器中，你可以知道目前頁面的階層編排狀況，也可以直接在導覽器中拖放，重新編排所有元素的排序！

Elementor 範本模板

Elementor 有非常多類型的頁面，可讓你直接套用進去。首先點擊「資料夾圖示」

選擇區塊或頁面，選擇版型後按插入，然後需要註冊一個免費Elementor帳戶連結，完成！

Elementor 支援哪些主題？

Elementor 有哪些擴充插件？

使用擴充插件來改進 Elementor 頁面產生器的功能，可以讓您的網站變得更加實用。無需對網站進行程式碼層修改操作。

Elementor Header & Footer Builder

Elementor Header & Footer Builder 是一個簡單但功能強大的 WordPress 插件，可以使用 Elementor 打造專屬的頁首、頁尾或是網站內的任何區塊！

Essential Addons for Elementor

Essential Addons for Elementor 提供了超過 90 種以上的小工具，使用我們易於使用的 Elementor 小部件和現成的模板為您的網站編輯器添加功能，使您的下一個 WordPress 網站設計比以往更輕鬆、更漂亮。

Premium Addons for Elementor

Premium Addons for Elementor 提供的 90+ 額外的小工具以及 550+ 種模板來增強您的 Elementor 頁面編輯器，您能夠在更短的時間內建立複雜的網站，而無需編碼。下載數量超過了 70 萬次數，5星推薦，也使一個可以讓 Elementor 編輯器更上一層樓的擴充外掛！