什麼是內容編輯器 / What is Page Builder in WordPress?

1. v
什什麼是內容編輯器？
Erin Lin | erin@erinlin.com | https://wpointer.com
What is Page Builder in WordPress?

2. vErin Lin | erin@erinlin.com | https://wpointer.com
進階的內容編輯器器的最終⽬目標？
讓使⽤用者不不⽤用寫程式就可以做出各種排版的⾴頁⾯面
與新增各種互動式的內容。
所⾒見見即所得，⽤用視覺化的⽅方式直接建⽴立內容，
⽤用拖拉的⽅方式來來改變內容位置等等...

3. v
如果⽤用預設的內容編輯器器
來來編輯網⾴頁時...
⾴頁⾯面排版⽐比較單調
如果⽤用進階的內容編輯器器
來來編輯網⾴頁時...
⾴頁⾯面排版⽐比較有變化

4. vErin Lin | erin@erinlin.com | https://wpointer.com
知名的編輯器器有哪些？
Elementor
Beaver Builder
Divi Builder
Fusion Builder
SiteOrigin Builder…

5. vErin Lin | erin@erinlin.com | https://wpointer.com
進階的內容編輯器器怎麼⽤用？有共通點嗎？
畫棋盤
1. 新增列列 Row (Container)
2. 新增欄欄位 Columns
在格中放置內容
3. Insert Element (Module)

6. vErin Lin | erin@erinlin.com | https://wpointer.com

7. v

8. vErin Lin | erin@erinlin.com | https://wpointer.com
區塊裡可以放些什什麼元素？
Element Pro

9. vErin Lin | erin@erinlin.com | https://wpointer.com
編輯器器的示範
Beaver Builder:
https://youtu.be/7oaQvcIXrGQ
Divi Builder:
https://youtu.be/e0wmIMGS96M
Elementor:
https://youtu.be/BiVRhghN2rU
Fusion Builder:
https://youtu.be/4AEif5LM6BM

10. vErin Lin | erin@erinlin.com | https://wpointer.com
進階的內容編輯器器都包含什什麼功能？
編輯內容區塊 (建⽴立、複製、刪除)
儲存區塊成樣板
從樣板庫快速加⼊入「範例例區塊」
在⼿手機上顯示或隱藏

11. vErin Lin | erin@erinlin.com | https://wpointer.com
什什麼主題都能裝任何內容編輯器器嗎？
Elementor/Beaver Builder: 主題要⽀支援全寬的版型
Elementor/Beaver Builder: 主題要可以隱藏⾴頁⾯面標題
Divi Builder 只能⽤用在 Divi 的主題
Fusion Builder 只能⽤用在 Avada 主題

12. vErin Lin | erin@erinlin.com | https://wpointer.com
知名的編輯器器的最⼤大特⾊色？
Elementor:
可以「輕鬆完美」掌控邊界空間、可以快速匯⼊入範例例「區塊」、可以
從「選單模式」快速移動區塊的上下順序。
Beaver Builder:
搭配 Pods 和 Beaver Themer 可以快速創造⾃自訂內容類類型的彙整列列表
⾴頁⾯面。
Divi: 可以快速切換「視覺模式」與「區塊模式」的編輯⽅方式
Fusion Builder:
內建的元素很多，不不需額外購買，搭配Avada主題，整體功能彈性⼤大。

13. vErin Lin | erin@erinlin.com | https://wpointer.com
內容編輯器器的未來來？
由於 WordPress 5.0 即將預設搭載 Gutenberg 內容編輯器器，其視覺化
的編輯⽅方式，是否將完全取代其他現有的內容編輯器器？
現有的內容編輯器器將做什什麼樣的改變？才能與Gutenberg 完美共存？
請和帶路路姬⼀一起關注內容編輯器器的未來來...

14. v
Q & A
Erin Lin | erin@erinlin.com | https://wpointer.com
追蹤帶路路姬 內容編輯器器哪裡買？