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

Elementor 教學,WordPress架站排名第一的頁面編輯器

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 以解鎖更多進階的功能!

Elementor 使用教學:最受歡迎WordPress拖放式頁面編輯器 | WordPress網頁設計

免費版 vs 付費版

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

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

Elementor 安裝方法

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

Elementor 使用教學:最受歡迎WordPress拖放式頁面編輯器 | WordPress網頁設計

Elementor 設定

一般設定

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

Elementor 使用教學:最受歡迎WordPress拖放式頁面編輯器 | WordPress網頁設計

進階

  • 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 使用教學:最受歡迎WordPress拖放式頁面編輯器 | WordPress網頁設計

角式管理權限

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

Elementor 使用教學:最受歡迎WordPress拖放式頁面編輯器 | WordPress網頁設計

Elementor 界面一覽

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

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

Elementor 使用教學:最受歡迎WordPress拖放式頁面編輯器 | WordPress網頁設計

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

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

Elementor 使用教學:最受歡迎WordPress拖放式頁面編輯器 | WordPress網頁設計

常用小工具

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

免費版小工具

Elementor 使用教學:最受歡迎WordPress拖放式頁面編輯器 | WordPress網頁設計

付費版小工具

Elementor 使用教學:最受歡迎WordPress拖放式頁面編輯器 | WordPress網頁設計

Elementor 使用教學

Elementor 編輯器架構

Elementor 使用教學:最受歡迎WordPress拖放式頁面編輯器 | WordPress網頁設計

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

新增區塊內容

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

Elementor 使用教學:最受歡迎WordPress拖放式頁面編輯器 | WordPress網頁設計

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

Elementor 使用教學:最受歡迎WordPress拖放式頁面編輯器 | WordPress網頁設計

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

Elementor 使用教學:最受歡迎WordPress拖放式頁面編輯器 | WordPress網頁設計

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

Elementor 使用教學:最受歡迎WordPress拖放式頁面編輯器 | WordPress網頁設計

修改文字

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

Elementor 使用教學:最受歡迎WordPress拖放式頁面編輯器 | WordPress網頁設計

修改圖片

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

Elementor 使用教學:最受歡迎WordPress拖放式頁面編輯器 | WordPress網頁設計

樣式設定

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

Elementor 使用教學:最受歡迎WordPress拖放式頁面編輯器 | WordPress網頁設計

進階設定

有關 Elementor 的任一個內容(區塊 / 欄位 / 元素),都可以做進階設定,那進階設定裏有什麼呢?

Elementor 使用教學:最受歡迎WordPress拖放式頁面編輯器 | WordPress網頁設計

版面配置

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

響應模式

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

Elementor 使用教學:最受歡迎WordPress拖放式頁面編輯器 | WordPress網頁設計

導覽器

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

Elementor 使用教學:最受歡迎WordPress拖放式頁面編輯器 | WordPress網頁設計

Elementor 範本模板

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

Elementor 使用教學:最受歡迎WordPress拖放式頁面編輯器 | WordPress網頁設計

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

Elementor 使用教學:最受歡迎WordPress拖放式頁面編輯器 | WordPress網頁設計

Elementor 支援哪些主題?

Elementor 有哪些擴充插件?

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

Elementor Header & Footer Builder

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

Elementor 使用教學:最受歡迎WordPress拖放式頁面編輯器 | WordPress網頁設計

Essential Addons for Elementor

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

Elementor 使用教學:最受歡迎WordPress拖放式頁面編輯器 | WordPress網頁設計

Premium Addons for Elementor

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

Elementor 使用教學:最受歡迎WordPress拖放式頁面編輯器 | WordPress網頁設計

Ultimate Addons for Elementor

Ultimate Addons for Elementor 主要功能有,提供 40 多種功能小套件、100+ 網站模板、200+ 區塊模板。您可以與任何 WordPress 主題一起使用。

Elementor 使用教學:最受歡迎WordPress拖放式頁面編輯器 | WordPress網頁設計

Elementor 官方影片介紹

常見問題

什麼是 Elementor 頁面編輯器?

Elementor 一款基於 WordPress網站 的頁面編輯器插件,時至今日已變成全球最受歡迎的 WordPress 頁面編輯器。

什麼是 Elementor Pro?

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

Elementor 適用於所有主題嗎?

是的,Elementor 基本上都是兼容所有 WordPress 主題

結論

總體而言,Elementor 是一個功能豐富且易於使用的 WordPress 頁面編輯器,它使沒有代碼技術的用戶能夠輕鬆創建出色的網站。然而,使用者需要注意其學習曲線、加載時間和依賴問題。希望這篇文章對您有幫助!如果您有任何問題或需要 WordPress網頁設計 服務,請隨時聯繫我們。

我想要找..

文章目錄

推薦服務

最新文章

結合創意、策劃、設計與科技

一站式設計及網上推廣

搵我哋傾下