Elementor,最好用的WordPress頁面編輯器,包含基礎教學

Elementor,最好用的WordPress頁面編輯器,包含基礎教學

每個網站經營者不管是新手還是老手,不管是經營什麼樣的網站,當然都會希望自己的網站的外觀可以非常的漂亮。

但是大多數沒有寫程式的背景的話,大多都會不知道怎麼樣做,如果你也是用WordPress架設網站的話,相信你已經體驗到WordPress強大的功能了。

但是如果想要更進一步設計更好看的網站,設計更多頁面的時候是不是覺得還是非常的不方便呢?今天要跟大家分享的是WordPress最好的頁面編輯器Elementor Page Builder,它的目的就是讓人可以更輕鬆地架設網站,為了讓大家可以更了解,今天會分享到:

  • Elementor Page Builder是什麼?
  • 在Elementor裡6個一定會使用的功能
  • 會使用Elementor的7個原因
  • Elementor的基礎操作
  • Elementor免費與付費的差異

Elementor Page Builder是什麼?

Elementor Page Builder是在2016年由以色列的公司Elementor Ltd.所開發的WordPress頁面編輯外掛外掛,這個外掛可以讓人用拖放的方式,即時的設計網站,到了今天它已經累積了超過500萬的下載量,這可以證明他在是非常熱門的外掛。

他同時有免費與付費的版本,在介面上也有支持中文版,所以對於英文不好的人,也可以順利的使用這個外掛。

頁面編輯器是什麼?

頁面編輯器的目標就是讓不會寫程式的人也可以做出各種的網頁與各式各樣的可互動的內容,簡單來說就是,讓你更直覺的設計你的網站,甚至不用一直切換成預覽的模式,到底有多直覺呢?等等會慢慢說明。

Elementor的特色是什麼?

想知道Elementor的特色是什麼之前,先讓我們看看這部影片吧!

從影片裏面就可以看到Elementor有很多內容元素可以讓你加入到你網站的內容區域,而且可以很輕鬆地調整網站的結構,甚至,在購買付費版本以後可以讓你設計整個佈景主題。

就像對頁面編輯器的介紹一樣,在製作網站的時候你不需要會任何的包括HTML、PHP、Javascript、CSS的程式語言,你一樣可以做出精緻的網站。

或許這樣說你還沒有辦法理解,一句話說明Elementor Page Builder的話,

他就是一個即時拖放頁面編輯外掛,這樣說明就可以體現他兩個特點:

  • 即時:你可以直接地看到你設計的網頁內容,不需要像原本需要切換到預視頁面。
  • 拖放:只要把你需要的內容元素拖放到你要的位置,就可以設計出整個網頁,這些元素包括按鈕、圖像、標題、文本、表單等等的。

總結他的特色就是:讓你可以自由地調整頁面,然後即時看到結果。

6個使用Elementor一定會用的功能

光看他的特色,就已經知道他到底有多好用了,但是還不只有這樣而已,接下來會跟大家介紹6個在使用Elementor一定會用到的功能,這些功能可以幫助你輕鬆地使用這個外掛。

1.Elementor模板庫

Elementor有300多種模板可以選擇,所以可以不需要重頭到尾都自己設計,可以選擇喜歡的模板之後再調整到自己喜歡的樣子。

elementor Templates

2.不同裝置預覽模式

現在有越來越多人會使用手機上網,所以網站要能更因應不同的裝置是很重要的,Google也表示現在行動裝置相容性也是搜尋結果排名的因素之一。

當你使用Elementor設計網頁之後,可以切換成不同的裝置預覽,它也可以讓你在不同的裝置裡隱藏某些內容元素,增加使用手機瀏覽網站的人的體驗。

elementor different device display

3.進階設定

Elementor的優點就在於可以依照自己的直覺去設計網頁,而且可以保證每個內容元素都可以在你想要的位置,所以它可以讓你:

  • 自行設計列跟內容元素的邊距
  • 只需要拖動列之間的分隔線就可以做到調整列寬
  • 可以把內容元素放在同一個列裡面
elementor advence setting

4.直接在網頁的內容區域編輯文字

意思就是可以直接在在網頁裡調整或修改文字內容,當然也可以在左側欄進行修改,不過相較起來當然還是直接修改方便。

5.完整的修改歷史

這也是Elementor最強大的功能之一,就是它有完整的修改歷史,它的好處是甚麼呢?

那就是如果你發現自己或是你的客戶不喜歡現在的設計,而且比較喜歡以前的,你可以直接回到之前的設計,不需要再重新做一次。

elementor Revision history

6.如果停用Elementor,它會完整的清除所有程式碼

當你不想要再使用它,或是想換一個頁面編輯器的時候,其他的頁面編輯器大多都會留下一些短代碼,但是Elementor並不會這樣,當你刪除它之後它的短代碼也會一起清除。

7個Elementor的附加價值

Elementor除了強大的功能之外,他的方便性還讓它產生了很多的附加價值,

1.方便使用

不需要HTML、PHP、Javascript、CSS或是任何技能背景就可以使用,因為這樣即時拖放的,所以可以很容易的創建網站,甚至可以把設計好的網站儲存成新的模板,之後應用在其他的頁面。

2.出色實用的小工具

他擁有很多實用的元素,只需要將他們拖放到正在編輯的位置就可以就可以完成你想要的網站,這些內容元素包括標題、文本、圖像、視頻、畫廊、輪播等等的功能。

3.第三方擴展的內容元素

其他流行的頁面編輯器只提供有限數量的內容元素,但是Elementor並不是只有這樣,他跟你可能會需要的第三方內容元素兼容,可以幫助你建立更完善的網站,甚至他也有很多的附加元件可以擴展更多的元素可以使用。

將來也會為這些擴展的功能做更多的介紹。

除此之外在外掛方面,它也跟Yoast SEO兼容,所以不用擔心使用Elementor以後會有SEO的問題。

4.可以製作完美的登錄頁面

登陸頁面不管是對部落格或是公司官網都是很重要的頁面,Elementor就可以輕鬆地讓你設計出精美的登錄頁面,達到更多的目標。

5.廣大的社群

因為Elementor在WodPress有非常高的下載量,所以他也有很多相關的社群或是部落格,可以幫助你做出想要的網站。

6.省時間

因為是拖拉式的設計方式,甚至可以借助現有的模板,所以可以幫助你很快的創建需要的網站,如果說HTML需要花一星期,WordPress需要花一兩天,那用Elementor可能幾個小時就可以做出來了。

7.免費版就有足夠的功能

Elementor也有付費的版本,也會提供更多的模板跟元素,但是光是免費的版本就已經可以架設出很好的網站。

Elementor基礎教學

接下來會介紹Elementor基礎的操作方法,幫助大家可以更快的了解這個外掛的使用方式,不過它真的非常的簡單,這裡就對它進行基礎的教學分享。

介面

要開始使用新的外掛之前,當然會需要先知道它的介面長什麼樣子,

在第一次打開Elementor的時候你會看到這樣子的介面,總共會分成三部分:

  1. 內容區域:灰色虛線裡的區域是編輯內容的區域,其他以外的地方就是佈景主題原本的樣子。
  2. 內容元素:這些就是可以用來拖放進頁面的內容元素元素。
  3. 設置:在設置的地方可以讓你返回,也可以讓你看到設計的網頁在不同裝置上的樣子。

結構

在開始使用Elementor設計網站之前,除了要知道她有甚麼內容元素之外,還必須要知道怎麼調整內容的結構,Elementor的結構主要可以分成兩個部分

  1. 列:藍色實線的區域
  2. 欄:灰色虛線的區域
elementor structure

所以在結構上從大到小是,

頁面→列→欄目→內容元素→樣式

而且每個頁面都可以有多個列,每個列都可以有多個欄位,每列欄位都可以有多個內容元素,每個內容元素都可以獨立修改樣式。

你可以在列裡面直接加入內容元素,也可以在裡面加入列,同樣的列裡面也可以加入內容元素,而且也可以自己調整列的寬度。

添加新的列的方法有三種

  1. 在內容元素裡有Inner Section的選項,將它拖到剛開始的Drag widget heres那裏就可以看到。
  2. 在Drag widget heres有一個加號,點擊後就可以看到很多不同的架構可以選擇。
  3. 在原本的欄位的左上角有一個編輯欄的選項,在裡面可以找到新增欄位。
how to create column in elementor

加入內容元素與模板

要加入內容元素的方法很簡單,只要把內容元素拖放到編輯的欄或是列裡面,就可以囉!

細節調整

如果想要調整內容元素或列跟欄的間距、顏色、字體等等,再放入內容元素以後或是直接點已經放進內容區域的元素,就可以看到左側欄上面會有「樣式」跟「進階」這兩個選項,在那裏就可以調整。

how to adjustment elementor

是不是很簡單呢?不過說真的它真的就是那麼簡單,只需要把你要的元素拖放進去,再慢慢地調整,很快地就可以做出你理想的網頁!

適合使用Elementor的佈景主題

接下來跟大家介紹幾個適合使用Elementor的WordPress佈景主題,這些也是官方推薦的佈景主題,會推薦的原因就是,既然官方也推薦的話,表示它跟Elementor已經很好的相容性。

這些佈景主題有:

如果想知道更多關於佈景主題的資訊的話,可以參考我寫的另一篇文章WordPress佈景主題怎麼選?16個常見問題,10個佈景主題推薦

或者是10個最適合Elementor Page Builder的WordPress佈景主題推薦

Elementor好學嗎?

每一個好用的工具都會有一定的學習時間,比起其他的頁面編輯器,Elementor已經是非常容易理解跟使用的外掛了,當然它也有非常多好用的內容元素可以慢慢摸索,不過想要利用它做出更好的網站的話,我建議兩種免費的學習方法:

  1. 看看Elementor官方提供的YouTube教學。
  2. 在Elementor裡面有提供大量的模板,可以把模板放在你的網頁裡面,再慢慢的看他是怎麼樣組成的,它是怎麼設定的,這樣你就可以很快地知道別人是怎麼操作的了,同時也可以讓你更了解要怎麼樣自己設計。

Elementor Free vs Pro

Elementor Free評價

在免費版裡面就已經有50多個內容元素、200個頁面模板可以選擇,雖然沒有辦法對網站的所有地方都進行修改,但是也真的是足夠強大的功能了。

前面幾個部分所說的功能,都是在免費版的時候就可以使用的,光是在免費的版本它就可以做出這麼不同樣式的網站。

所以不管是剛開始經營部落格或是網站的人或是已經是經營網站的老手,免費的Elementor已經是非常夠用的工具了。

Elementor Pro評價

在對Elementor Pro進行評價之前,當然要介紹它在購買之後的功能,說真的我並沒有購買,因為考量到預算的部分,不過因為這是我非常喜歡的外掛,所以我也對在購買以後它提供的功能做了很多的搜尋,而且在未來也會是我必買的外掛之一,那它到底有哪些功能呢?

可以設計整個佈景主題

購買Elementor Pro之後,除了更多的內容元素、模板可以使用之外,最重要的就是它增加Introducing Theme Builder這個功能,它可以讓你修改網站的佈景主題,包括頁首、頁眉、頁尾等等的。

更多實用的內容元素

Elementor Pro裡也新增了很多網站會用到的元素,就像是:

  • 表格
  • 表單
  • 滑桿
  • 社交分享按鈕
  • 網站登綠頁面

在平時這些功能大多都會需要另外安裝外掛才可以做到,但是Elementor Pro裡面只要你需要的幾乎都可以找到,這也減少網站需要安裝的外掛數量。

全局小工具

這個功能可以讓你在網站裡面的多個頁面都加入一樣的小工具,就例如如果你需要在每個網頁都有聯繫的部分,就可以用到這個功能。

這個功能的特色就是:

  • 可以把小工具存成模板,讓你在多個頁面上重複使用。
  • 只需要修改一次,就會自動更新全部的全局小工具。

總結剛剛所有的功能,在Pro版本裡面,Elementor更加的升級,已經幾乎可以修改整個網站,當然還有更多的內容元素跟更多的頁面模板可以選擇,也有全局小工具這樣實用的功能。

所以對於想要讓網站更進一步的經營者或是部落格甚至是網頁設計師,Elementor Pro也會是非常適合他們的選擇,甚至可以減去寫程式碼的麻煩,更簡單的設計網站。

Elementor Pro價格

在價格方案裡提供的功能沒有任何的差異,最主要的差異就是可以使用的網站數量,而且主要以年來計算,也包含30天的退款保證。

  • 49美金:一個網站
  • 99美金:3個網站
  • 199美金:1000個網站

會需要買到什麼樣的價格完全就是看你有多少網站要使用而定了。

elementor price

Elementor優缺點分析

一個外掛當然也會有優點跟缺點,儘管功能強大,但是他依舊會有一些問題,最後我會對Elementor進行優缺點的分析,提供給大家需不需要使用它。

優點 缺點
  • 免費,而且大多數新網站都不需要用到Pro的功能
  • 功能多樣又易於使用
  • 可以自己編輯頁面的布局和設計,不需要任何HTML、CSS、PHP的技能
  • 即時性
  • 所有的對齊方式與邊距都有非常詳細的設置
  • 可能會有一些默認的選項是你不想要的
  • 有些內容沒辦法準確的對齊,很難找到確切的邊距
  • 在字體上可能會有很多沒辦法使用在中文字上的字體

結語

今天的分享就到這裡了,Elementor Page Builder是適合新手跟老手的網站頁面編輯器,在WordPress的外掛裡也有非常有的評價,雖然WordPress已經有內建的Gutenberg內容編輯器,但是目前跟Elementor Page Builder比起來,還需要一段時間才能追上。

所以在目前眾多的頁面編輯器裡,我還是會推薦Elementor Page Builder,希望今天這篇文章可以幫助到大家

This Post Has 9 Comments

  1. Ron

    我一直以來都是內建的來編輯文章
    感覺很值得來試試看這個新外掛呢!

    1. Ray

      它真的是一個非常有用的外掛,只是要注意的是
      文章裡面提到的,如果不要用的話,刪掉以後他會清除程式碼
      這表示用它做出來的文章也會不見喔!

  2. Lisa

    這篇也太實用了!我真的超級需要,我真的是不懂程式語言的人,一直覺自己的頁面很醜,但又不會改,索性放棄,現在有重燃希望的感覺

    1. Ray

      慢慢調整就一定可以做出喜歡的網站喔!

  3. RT

    自己本身也是網站經營的新手…
    這篇真的超實用的!
    先收藏再說!
    感恩版主整理~

    1. Ray

      你開心可以幫助到你~

  4. 啟翔Steven

    之前使用內建的編輯器,如果改用Elementor,這樣我之前的文章會不會格式跑掉

    1. Ray

      不會喔!
      而且就算使用它,還是可以用內建的編輯器寫文章喔

發佈留言