給新手看的 Beaver Builder 內容編輯器教學

Last Updated on 2022 年 9 月 7 日

Beaver Builder 內容編輯器教學 ，新手站長一起來用可愛的小海貍頁面編輯器製作WordPress網站!

WordPress有幾款知名的內容編輯器，除了Elementor、Divi 和 Themify 之外，還有本篇文章會介紹的Beaver Builder。

目前，Beaver Builder 在WordPress頁面編輯外掛類中，啟用安裝數高達20萬以上，擁有滿分 5.0 星的評價。

Beaver Builder 特色

• 響應式區塊拖拉編輯
• 可完全控制頁面佈局
• 即時與前端編輯
• 可重複使用的模板
• 匯出/匯入
• 標準方案就提供無限網站數量
• SEO優化
• 支援短代碼和Widget
• 提供非常清楚的免費影片教學
• 和其他多數外掛高度相容
• 適用於部落格、電商、會員制網站和Landing Page
• BEAVER BUILDER FAMILY 提供一系列完善的內容編輯器產品
• 續約任何方案可享40%的折扣
• 30天保證退款

Beaver Builder 方案比較

Beaver Builder 如何安裝啟用?

到WordPress後台 > [外掛] > [安裝外掛] > 搜尋[Beaver Builder] > [安裝]+[啟用]

Beaver Builder 頁面編輯器介面操作

1. 標題列 (Title bar) :顯示正在編輯的內容(頁面或文章等)及其標題。
2. 按下箭頭可以打開工具表單(Tools)。
3. 小鈴鐺接收新訊息通知。
4. 編輯狀態(Editing status): 進行任何編輯更改之前，此區域是空白的，並且在有任何未發布的更改時顯示為已編輯。
5. 內容面板顯示/隱藏
6. [Done按鈕] : 按下[Done] 之後，可以再選擇要[棄擋]、[存草稿]或是[發佈]，什麼都不要的話就按[取消]。
7. 可以拖拉面板
8. Group :按下箭頭可以看到 10 -12的延伸功能。
9. 搜尋Standard Modules裡的功能。
10. 可選擇Standard Modules、WordPress Widgets或 Saved Modules。
11. 可以拖拉不同的佈局(layout)。
12. 各種模板可套用。
13. 可以看到所有的保存項目。
14. 工具表單

在工具表單裡，可以做發佈、存檔、複製和預覽頁面等功能，也可以用 [Responsive editing] 響應式編輯，如果覺得編輯模式太亮的話，也可以在[Change UI brightness]換成黑色的編輯背景。

使用Beaver Builder設計頁面

在WordPress裡，有三種方式可以進入到Beaver Builder開始編輯頁面。

1. 頁面 > 新增頁面 > Launch Beaver Builder
2. 頁面 > 新增頁面 > 將滑鼠移到頁面上可以看到[使用Beaver Builder編輯]
3. 在WordPress頂端管理捷徑中可以看到 [Beaver Builder]。

進入編輯頁面之後，就可以用上述介面功能開始製作一個專業又好看的頁面了。

什麼是 Beaver Builder Theme & Beaver Builder Themer?

WordPress需要安裝主題，而在主題區域可以設定 header, footer, and sidebar 等，Beaver Builder Theme 提供多種layout和模板選項，可在大螢幕和較小設備上客製化網站的主題區域。

Beaver Builder Themer 是一個擴充外掛(add-on)，可以再更深入客製化自己想要的主題和頁面佈局(例如: 404、archive頁面等)，需額外付147美金才能使用。

結語

其實Beaver Builder 跟Elementor 差不多，都是非常直覺式的區塊拖拉操作，但注意不要安裝一個以上的頁面編輯器，考量到外掛互相兼容和網站速度等，建議一個WordPress網站使用一個頁面編輯器就好。

另一個 Beaver Builder的優點，就是他們的Documentation非常完整，我最喜歡的就是免費的影片教學，在使用上來說，假如遇到什麼問題或是不了解功能，可以直接到Beaver Builder Docs裡爬文找答案。

訂閱WordPress

優惠即時報!

不再錯過WordPress主機、外掛、主題各種優惠!