Elementor教學｜超過５百萬下載，免費多版型的WordPress編輯器推薦

WordPress, 模組介紹, 知識分享

2021.6 Elementor教學更新：Elementor 不斷的更新, 這一年多的更新中，小編最新歡的就是關於［全域顏色］的設定，還有和一些ＷooCommerce購物車元件更新和與知名SEO模組相容的部分，對於網頁設計來說她越來越好用了！！

精選目錄

Elementor是什麼?

Elementor是一種WordPress頁面內容編輯器，使用者不用寫程式就可以做出各種漂亮的畫面，尤其Elementor更是目前WordPress多數編輯器的箇中翹楚，超過500萬下載次數，所見即所得的編輯畫面，對於完全不會程式的使用者或沒有什麼畫面編輯概念的初學者來說，是非常好上手的編輯器．讓使用者可以快速建立內容並編排畫面．迅速地完成網站設計．

使用Elementor原因是?

- 官方提供免費版使用，若需要更多變化才需要購買專業版．
- 視覺化編輯畫面，編輯畫面就是預覽模式，減少前後台來回切換次數．
- 拖、拉的操作方式，像編輯簡報或文書軟體一樣輕鬆完成網頁編輯．
- 多種免費的demo頁面，可直接匯入使用．(參考連結：Elementor官方demo頁面)
- 少數有繁體中文化的編輯器，縮短適應學習時間．
- 樣式的編輯上提供非常多設定，大大的減少使用者需要寫CSS的機會．
- 許多擴充元件，甚至也可以自行開發元件使用．

小編補充：他真的很方便！大部分的人用了之後都愛不釋手，就回不去其他編輯器了．

Elementor教學 – 免費下載與安裝

Step 1

至[安裝外掛]功能，輸入關鍵字 [Elementor] 進行搜尋，會找出相關Elementor外掛
（有圖為證，五顆星滿意度，500萬以上下載次數！！)

Step 2

參照下圖，安裝並啟用 [ Elementor Page Builder ]即安裝完成．

Elementor基本設定

安裝後，會看到一排的功能，但其實初學者的我們看一下[設定]即可，其他的部份通常維持預設，若要進一步研究的，可以安裝後自行摸索一下，有中文很方便！

Step 1　一般設定

設定哪些類型可以使用Elementor．

勾選［禁用預設字型］的化，讓 Elementor 的預設字型與您安裝的佈景主題相同，網站一致性，當然也可以不打勾，那就編輯的時候，字型都要選一下；或者用CSS寫好全站字型，就不用編輯的時候都要選字型了．

Step 2　樣式設定

樣式設定是設定一些基本準則，通常小編最常用到的就是[內容寬度]的設定，這樣打開每個頁面基本寬度就是一樣的，其他就看個人要不要設定囉！

以上基本設定完之後，就可以開始用Elementor編輯器囉！

Elementor編輯畫面介紹

Step 1　新增頁面＞輸入標題

Step 2　點選[使用Elementor編輯]

Step 3　Elementor編輯畫面介紹

A：編輯內容區－直接在畫面中建構您要的排版區塊，用拖拉的簡易方式放入對應元素/小部件．

B：小元件－可以用來拖拉放到內容區的各種元件．

C：工具列－儲存，圖層，切換響應模式，頁面設定的地方．

Step 4　elementor教學影片-編輯畫面

Elementor教學 – 基本元件「文字編輯器」

「文字編輯器」是Elementor教學元件中最重要的項目之一，也跟SEO大幅相關，舉凡用來編輯各種文字其實都需要他來編輯文字內容（標題、文章段落等等），大家看應該會覺得「文字編輯器」很親切，因為它就是一般部落格在用的編輯器，拿來編輯文章段落．學

「文字編輯器」元件位置如下圖，在「基本」元件區：

使用「文字編輯器」後，會看到右側變成下圖，可以開始編輯文字內容，並妥善利用「內容」、「樣式」、「進階」頁籤來做畫面上的調整：

「文字編輯器」小叮嚀：

- 為了讓「文字編輯器」的內容一致，請盡量用「樣式」裡面的設定來調整「文字編輯器」顯示的樣子．
- 「樣式」的設定權重是小於「內容」的設定，這點要注意唷！教學影片中會提到並做範例．
- 使用此元件的時候都是編輯純文字，不太會直接在內容裡使用「新增媒體」，因為新增媒體就是要插入圖片，那另外用「圖片」元件跟「文字編輯器」搭配使用即可，因為單純用「圖片」元件可以設定的細節比較多，如果插入圖片在「文字編輯器」的話，不太好調整．
- 調整後務必用響應模式看看手機板/平板，針對手機板/平板再調整「文字編輯器」內容的文字大小，教學影片中會提到並做範例．

操作教學影片-Elementor影片：

Elementor教學 – 基本元件「圖片」

「圖片」是Elementor教學元件中最重要的項目之一，畢竟網站製作最重要的元素就是文字和圖片了，那Elementor圖片元件可以做些什麼呢？可以節省不少寫CSS程式的時間呢！

請參考以下介紹和影片：

「圖片」小叮嚀：

- 考量到使用者瀏覽體驗，圖片都要壓縮過，請盡量800kb以下，保持一個頁面讀取的檔案大小越小越好，才不會影響瀏覽網站的速度．
- 圖片如果沒有需要透明背景，就盡量使用jpg檔案，少用png檔案，因為檔案容易較大．

另外有一個Elementor元件叫做「圖框」其實是「圖片」、「文字」、「標題」配上一點「特效」產生的Elementor元件，有時候這種組合元件可以幫你省下許多時間，可以快速達到美美的排版，下次更新的時候會補上這個元件的教學．

另外如果想要用Elementor製作彈出視窗,可以參考這篇 >> Elemeneotr教學彈出視窗