你是否覺得好奇怪，點解你做出嚟嘅WordPress頁面，同平時睇到嘅嗰啲精美嘅網頁有咁啲差距呢？ 明明用嘅都係WordPress，做乜嘢人哋嘅網頁會咁酷炫？
或者你會覺得嗰啲精美嘅網頁只有專業嘅網頁設計師才能製作出嚟，但其實不然，要做出好睇、高大上嘅網站，並不真的需要一個網頁設計師，你需要嘅只係一個好用嘅頁面編輯器（ Page Builder ）。
講真，你睇到嘅嗰啲精美嘅網頁，99%都能用Elementor呢個功能強大嘅頁面編輯器製作出嚟，關鍵，它還是免費嘅。
如果你想同專業網站設計師一樣，做出各種功能強大，睇嚟高大上嘅網頁嘅話，你就唔可以錯過Elementor這款強大嘅超過5百万个已啟用安裝數個免費WordPress頁面編輯器插件。接下來，就跟著這篇Elementor教程學習如何使用Elementor吧。
關於Elementor
首先，等我哋嚟了解吓Elementor。
Elementor係乜嘢？
Elementor係一款功能強大嘅WordPress頁面編輯器插件（Page Builder），由以色列公司Elementor Ltd.於2016年創立，並持續開發運營維護至今。
距離Elementor上線（ 2016年）到而家（ 2022年）不過短短6年，Elementor已經在整個WordPress生態圈裡面產生了幾乎不可取代的作用——超過500萬已啟用安裝數，近乎全五星嘅好評，係目前最受歡迎嘅WordPress頁面編輯器插件。
Elementor最大嘅優點係，它可以讓我們通過鼠標拖曳區塊嘅方式，無需會寫任何代碼都能製作出好睇而且功能強大嘅專業網站。
Elementor的操作十分簡單而且容易上手，它有好多預設區塊功能，例如標題，文本，圖片，圖標，列表，表格等埋，我哋可以直接將呢啲區塊透過鼠標拖曳到想要嘅地方，然後輕鬆地就能製作出精美嘅網頁。
Elementor係免費嘅啊？
Elementor分成免費版與付費版嘅Elementor Pro，免費版嘅Elementor直接喺WordPress後台插件搜索Elementor Page Builder 即可安裝啟用。
免費版嘅Elementor提供咗一啲基礎嘅區塊功能，例如標題、圖片、文字、視頻、按鈕、分隔線、圖標等，其實有幾夠用嘅，目前 NYPanda.com 使用嘅就係免費版嘅Elementor。
因為如果我哋仔細地去拆解網頁上嘅元素，就會發現其實大部分網頁都係由以上呢啲基本元素透過排列組合同變化組成嘅，所以如果係啱啱入門嘅小夥伴，我們建議可以先從Elementor免費版開始入手。
付費版嘅Elementor Pro則額外提供咗更多嘅區塊功能，例如文章列表、價格表、幻燈片、表單等埋，主要係添加咗動態嘅網頁元素，能令網頁睇落更加酷炫，動態效果更多。
如果要開啟Elementor Pro的功能，需要前往Elementor官網購買授權，最平嘅方案係一個網站一年$49美金，唔算貴但都唔平，如果你想做出一個極度酷炫嘅WordPress網站的話，這筆投資還是值得嘅。
Elementor Pro也有提供30天無條件全額退款，如果喺買咗之後覺得用起嚟唔習慣、抑或性價比唔高嘅話，都可以直接同客服申請退款，唔會浪費到任何錢。
另外，如果係網頁設計師抑或係想用Elementor專門為別人建網站嘅小夥伴，建議可以直接買一年$999美金可用于1000个網站嘅方案，多個網站分攤落嚟嘅話就會比較平（類似團購）。
購買Elementor Pro
用Elementor嚟做頁面編輯器插件有咩好處？
- 容易上手：Elementor的操作界面十分簡單易懂，可以輕易咁用【所見即所得】嘅方式嚟製作網站。就算唔會寫代碼抑或冇任何設計基礎，都能輕鬆地透過拖曳區塊（ Drag & Drop ）嘅方式，把心目中想要嘅網站製作出嚟。
- 快速高效：透過Elementor，喺設計網頁嘅同時，仲可以畀網頁添加上各種強大嘅功能，從而同時省下了請設計師和網頁工程師的費用，而且無需同佢哋進行來回反覆嘅溝通，因為在網頁設計中，溝通係最大嘅時間成本。
- 適用性高：Elementor幾乎可以做出任何類型嘅網站，無論係企業形象網站、在線電商網站、抑或係線上課程網站，都能用Elementor製作出嚟。
- 撐響應式網頁設計：我們可以透過Elementor調整網頁在不同設備上所展現的外觀，並進行預覽，從而確保我哋嘅網站喺電腦、手機、平板上都能畀訪客提供良好嘅用戶體驗。
- 最多人用：Elementor目前（ 2022年）喺WordPress後台插件中顯示嘅已啟用安裝數有超過500万，並獲得咗5000多个快滿分嘅評價，係而家市面上最多人使用嘅WordPress頁面編輯器插件，代表住如果在使用過程中如果遇到任何問題，幾乎都能在網上找到答案。
- 完整嘅生態圈：由於使用Elementor嘅人實在多咗，以至於市面上有好多嘅獨立開發者抑或公司都自行研發埋Elementor嘅相關擴展插件，使得Elementor逐漸擁有咗一個完整嘅生態圈，都意味着幾乎所有類型嘅網站功能，Elementor都有相關方案。
如何使用Elementor頁面編輯器？
接下來，我哋將會同小夥伴們分享Elementor頁面編輯器嘅使用概念同簡單操作方法。
在示範中，我哋用嘅係Astra主題+Elementor頁面編輯器，呢個都係目前比較鍾意嘅WordPress製作頁面嘅方案。
安裝Elementor
首先要我哋要做嘅係安裝Elementor插件，前往WordPress後台插件區域，搜尋Elementor，搜索結果可能會出嚟好多Elementor相關嘅插件，但其中只有一個係官方嘅。
認準上圖，然後我哋就安裝並啟用呢個超過500万次已啟用安裝數，接近滿星好評嘅WordPress頁面編輯器Elementor Page Builder。
禁用Elementor的默認顏色和字體
因為我哋要確保用Elementor做出嚟頁面嘅風格，同我哋使用嘅主題係一致嘅。
所以我哋要前往先WordPress后台 -> Elementor -> 设置，
將禁用Elementor的默认颜色 以及禁用Elementor的默认字体 都勾選起來，
完成之後記得點擊吓保存更改。
使用Elementor創建頁面
設置完之後，我哋新建一個WordPress頁面，接著點擊使用Elementor编辑 按鈕，就可以進入Elementor嘅編輯模式中。
Elementor頁面編輯器嘅使用邏輯
接下來，就來到了篇文最重要嘅部分，Elementor嘅使用邏輯。
好耐之前，如果要做一個網頁，需要寫HTML同CSS，如果需要動態效果嘅話，仲需要寫JavaScript，十分麻煩。而Elementor嘅存在就係為咗取代呢啲繁瑣嘅過程，讓我們無需編寫代碼就能創建出好看而且功能強大的網站。
有一部分啱啱開始接觸Elementor嘅小夥伴，可能會覺得Elementor乜咁複雜嘅，想要改個顏色抑或字體都唔知去哪改，都太難上手了吧。
其實正是Elementor功能強大嘅體現，因為Elementor係為咗取代網頁前端設計三大語言HTML，CSS，JavaScript而設計出嚟嘅，所以如果在你對網頁三大元素，.HTML，CSS，JavaScript有了基本認識之後，就可以在接觸Elementor的五分鐘內抓到Elementor的使用邏輯。
但對於完全唔識三大語言概念嘅小夥伴們，可能喺用咗Elementor好幾個月之後還是會佀懂非懂，使用起來唔太自信，必須依賴網上攻略和影片才能做出想要嘅網頁。
所以，如果我們想要學習如何操作Elementor的話，還是要先對HTML，CSS，JavaScript三大語言有基本嘅瞭解會比較好，但唔使諗得太複雜。
適合配搭Elementor使用的主題
有哪些主題特別適合配搭Elementor使用呢？ 根據官方畀出嚟嘅答案，Elementor適用於所有嘅主題，雖然官方係咁講，但根據我哋嘅測試，有些主題其實並不昰咁適合Elementor。
例如我之前用過嘅Avada, Flatsome等主題，呢啲主題都有自帶嘅頁面編輯器，主題官方都建議配搭它們自帶頁面編輯器使用，所以它們並無特別支持Elementor （不過要用還是可以用的，只係效果冇咁好啫)。
所以，當我們在挑選WordPress主題的時候，記得要先查清楚這個主題是否支持Elementor再購買哦。但唔使特別擔心，因為Elementor嘅用戶群好龐大，所以通常主題官方都會特別寫出來是否支持Elementor。
接下來，我會介紹三個我使用過嘅，並認為係目前最適合搭配Elementor使用嘅主題，分別適合用嚟搭建形象網站、電商網站和博客網站。
Astra主題
Astra主題係一個喺2017年由知名開發公司Brainstorm Force所開發嘅WordPress主題，喺短短嘅幾年內，Astra喺WordPress官方主題中，有超過一百萬嘅安裝次數，並獲得使用者將近全五星嘅好評。
Astra最大嘅特點就係它非常之輕巧快速，與其它郁啲就好幾MB嘅主題相比，Astra主題僅有50KB。除此之外，Astra仲可以高度定製，可以畀你喺做出一個美觀且功能強大嘅網站之餘，都能維持高速嘅網頁載入速度。
正因為Astra嘅簡潔以及快速，使它成為咗最適合搭配Elementor頁面編輯器嘅主題之一。
唔單止噉，Astra官方都極度推薦用戶使用Elementor嚟製作頁面，並推出以Astra為基礎所製作的Elementor擴展插件Ultimate Addons for Elementor，宣示了其加入Elementor生態圈的決心。
除此之外，Astra主題搭配Elementor頁面編輯器，都係全球好多WordPress大神、Youtuber、網頁設計公司嘅主流搭配，包括小夥伴們而家瀏覽緊嘅 nypanda.com，都係用Astra+Elementor製作出嚟嘅。
適合用Astra主題製作的網站：形象網站、博客網站、電商網站（幾乎所有類型嘅網站）。
WoodMart主題
WoodMart主題係一款喺2017年8月推出嘅一款WordPress電子商務主題，算係比較新嘅電商主題，相較于其它只兼容舊款頁面編輯器嘅老牌電商主題， WoodMart主題可以搭配Elementor製作整個電商網站。
Elementor喺製作電商網站上，一直都唔算係零舍有優勢，因為電商網站嘅核心係網站背後嘅功能與商業邏輯，例如相關商品、商品組合、庫存管理呢啲消費者唔一定睇得到嘅嘢，並不只是在於網站是否美觀。
但WoodMart喺這點上好好地彌補咗Elementor嘅唔夠，因為Woodmart主題有特別為呢啲電商功能做咗開發，可以直接搭配Elementor嘅區塊拖曳式界面，輕鬆地將想要嘅網站外觀畀做出嚟，並且電商網站該有的功能都一樣完整而且強大。
適合用WoodMart主題製作的網站：電商網站。
啟用Woodmart主題
有哪些好用的Elementor擴展插件
如果你感覺Elementor官方提供嘅區塊功能唔夠用嘅話，或是有啲想要嘅區塊功能官方版並無提供嘅話，你可以另外安裝一些其它公司自行開發嘅Elementor擴展插件，入面新增咗唔少官方冇提供嘅熱門功能。
不過呢類型插件都唔好安裝太多埋哦，我建議Elementor擴展插件安裝2到3個就好，因為Elementor本來就屬於幾佔主機資源嘅大型插件了，如果加裝太多擴展插件上去嘅話，易令網站打開速度變慢。
Essential Addons for Elementor
Essential Addons for Elementor（EA）是一款由知名WordPress開發公司WPDeveloper推出的Elementor擴展插件，有免費版與付費版嘅Pro。
免費版嘅Essential Addons for Elementor喺WordPress後台嘅插件中顯示已經有超過100万次安裝啟用，並獲得將近滿星嘅好評，因此如果你想有更多的Elementor區塊功能的話，可以先安裝免費版嚟使用。
EA新增咗大約77種不同嘅Elementor擴展功能，比如話Elementor最缺乏嘅表格（ Table ）功能，如果你想製作出美觀又易懂的資料圖表，咁EA提供嘅進階圖表功能，相信會符合你嘅需求。
如果小夥伴們有興趣嘅話，可以參考EA嘅官方網站，入面有好多功能嘅Demo可以讓小夥伴們一一查看。
啟用Essential Addons for Elementor插件
Ultimate Addons for Elementor
Ultimate Addons for Elementor（UAE）是由前面提到的Astra主題的開發公司Brainstorm Force所製作，因此在功能與整體設計上，也是針對Astra與Elementor Pro兩者不足的功能所新增與開發的。
不過同上面提到嘅EA插件不同嘅係，UAE僅得付費版，並無提供免費版試用，不過如果你有打算使用Astra主題嘅話，UAE可以同Astra主題一起以優惠價格購買，可以幫你省下唔少錢。
UAE新增咗大約54種有趣嘅Elementor擴展功能，比如話能夠切換價格表嘅【Content Toggle】，好鬼嘅實用，可以幫助你嘅用戶更加清楚地了解更種不同方案嘅區別，都係UAE中最受歡迎嘅功能之一。
更多額外嘅功能，由於篇幅關係無法在此詳述嘅描述，如果你有興趣的話，可以參考UAE嘅官方網站，入面有好多功能嘅Demo可以讓你在購買之前查看一番。
啟用Ultimate Addons for Elementor插件
Elementor Custom Skin
Elementor Custom Skin係一款受到全球網友大力推崇嘅Elementor插件，它可以讓我們對Elementor Pro中的文章區塊的外觀進行定制，透過製作出不同的文章皮膚外觀（ Skin ），嚟改變你嘅文區塊外表。
舉例來說，如果你覺得原先Elementor Pro提供嘅文區塊外觀唔係你鍾意嘅，你就可以用Custom Skin呢個插件另外製作一個糢闆，並且把它改成了你想要個樣。
Elementor Custom Skin 算係Elementor成個生態系中，數一數二重要嘅必裝擴展插件了。它可以幫助你製作各種不同外觀嘅動態內容，比如話文、作品集等透過WordPress動態產生嘅内容。
如果你想學習點樣使用Elementor Custom Skin嘅話，可以參考下面呢個10分钟嘅簡單教學：
Elementor常見問題
Elementor係乜嘢？
Elementor係一款功能強大嘅WordPress頁面編輯器插件（ Page Builder ），由以色列公司Elementor Ltd.於2016年創立，並持續開發運營維護至今。
距離Elementor上線（ 2016年）到而家（ 2022年）不過短短6年，Elementor已經在整個WordPress生態圈裡面已經產生了幾乎不可取代的作用——超過500萬次啟用，近乎全五星嘅好評，係目前最受歡迎嘅WordPress頁面編輯器插件。
Elementor最大嘅優點係，它可以畀我哋透過鼠標拖曳區塊嘅方式，無需會寫任何代碼都能製作出好睇而且功能強大嘅專業網站。
而且，Elementor的操作十分簡單而且容易上手，它有好多預設區塊功能，例如標題，文本，圖片，圖標，列表，表格等埋，我哋可以直接將呢啲區塊透過鼠標拖曳到想要嘅地方，然後輕鬆地就能製作出精美嘅網頁。
Elementor係免費嘅啊？
Elementor分成免費版與付費版的Elementor Pro，免費版的Elementor直接在WordPress後台插件搜索 【Elementor】即可安裝啟用。
免費版嘅Elementor提供咗一啲基礎嘅區塊功能，例如標題、圖片、文字、影片、按鈕、分隔線、圖標等，其實有幾夠用嘅，目前 NYPanda.com 使用嘅就係免費版嘅Elementor。
Elementor Pro值得花錢買嗎？
付費版嘅Elementor Pro相較于免費版，額外提供咗更多嘅區塊功能，例如文章列表、價格表、幻燈片、表單等埋，主要係添加咗動態嘅網頁元素，能令網頁睇落更加酷炫，動態效果更多。
Elementor Pro需要前往Elementor官網購買授權，最平嘅方案係一個網站一年$49美金，唔算貴但都唔平，如果你想做出一個極度酷炫嘅WordPress網站嘅話，這筆投資還是值得嘅。
Elementor Pro也有提供30天無條件全額退款，如果喺買咗之後覺得用起嚟唔習慣、抑或性價比唔高嘅話，都可以直接同客服申請退款，唔會浪費到任何錢。
另外，如果係網頁設計師抑或係想用Elementor專門為別人建網站嘅小夥伴，建議可以直接買一年$999美金可用于1000个網站嘅方案，多個網站分攤落嚟嘅話就會比較平（類似團購）。
Elementor可以在任何主題上使用嗎？
Elementor可以喺任何主題上面使用，可以透過開啟Elementor提供嘅畫布功能，把主題嘅設置以及Header, Footer去除掉，並重新以Elementor進行網頁設計。
有哪些適合配搭Elementor使用的主題
適合搭配Elementor嘅主題有三款，分別對照三種不同的功能：
1.形象網站–Astra
2.電商網站–WoodMart
我可以用Elementor嚟寫文章（Post）嗎？
可以，但係一般唔建議咁做，因為用Elementor所製作出嚟嘅區塊喺HTML嘅結構上包含住大量嘅 <div> 標籤，使用過多的Elementor區塊在文章之中，將會影響到網站嘅速度（除非你嘅文好少、或是使用到Elementor區塊的部分很少）可以參考這篇 WordPress谷腾堡編輯器教程或者使用經典編輯器插件。
因此，在使用Elementor上，建議小夥伴們遵循官方嘅建議，將其用喺【頁面】上就定。
Elementor會降低網站速度嗎？
會的，因為Elementor其實包含了大量函數庫，才會令它的功能如此強大。
所以當我們在使用Elementor的同時，也導入了許多我們可能表面上、或暫時冇用到嘅代碼，呢啲都會降低啲網站嘅速度。
如果想要網站維持高速嘅加载速度嘅話，建議使用Astra主題和Cloudways主機。
WordPress同Elementor有什麼區別？
Elementor係一個流行嘅WordPress網站同網頁構建器插件，它為WordPress世界帶嚟咗自己嘅工具。或者最簡單嘅看待它的方式係WordPress提供了一個建築框架，而Elementor可以畀你喺呢個基礎設施上建造美麗嘅豪宅。
允許你構建“豪宅”嘅關鍵工具之一係Elementor Editor。呢種可視化拖放編輯器允許Web創作者無縫構建具有複雜動態功能嘅網頁。透過使用編輯器把小部件拖放到您的頁面上，你可以節省創建傑作嘅時間。意味住工作更直觀，無需編寫代碼即可創建專業網站。
