Avada主題的一個特色之處便是帶有自己的頁面編輯器，這個插件叫做Avada Builder，它是由ThemeFusion公司設計開發的。
Avada Builder是確保Avada主題能夠正常運作必需要安裝激活的兩個插件之一（另一個是Avada Core），而且需要注意的是，在安裝Avada Builder插件之前，需要先安裝Avada Core插件。
通過這個易于使用且功能齊全的頁面編輯器，創建網頁變得更加簡單，無需具備專業代碼知識也可設計復雜的網頁布局，創建出高端大氣的網頁。
Avada Builder在之前的主題的版本中叫做Fusion Builder，是應用在后端接口的線框頁面編輯器（back-end wireframe editor）。
另外，需要注意的是，Fusion Builder從Avada 7.0版本開始，已重新更名為Avada Builder。
后端線框頁面編輯器Avada Builder頂部導航工具欄介紹：
這個是固定跟隨的導航菜單欄，當你向下滑動頁面的時候，這個菜單欄會始終固定在頁面編輯器操作界面的頂部位置，以方便你可以隨時訪問菜單欄上的工具，這些有用的工具包含眾多設置選項，可以幫助有效編輯和管理頁面。
Library ：訪問存儲庫，可快速調用存儲庫中已保存的模板內容等，部署應用到當前頁面。
Toggle All Containers：將當前頁面上的所有容器（Container）進行折疊或展開。
Custom CSS：為當前頁面插入自定義的CSS樣式，對當前頁面進行更靈活的個性化設計。
Save page layout：將當前頁面布局保存為模板存儲到存儲庫Lirary中。
Delete page layout：刪除當前頁面布局。
History：顯示最近25個歷史修改記錄，可以選擇退回到做出相應修改動作前的頁面，從這里重新開始進行頁面設計。
傳統的后端頁面編輯器有一個特點，就是可以通過拖拽（drag-and-drop）的方式來自由調整頁面模塊組件的位置，快速設計出令你滿意的頁面布局。
從Avada 6.0版本開始，在原來頁面編輯器的基礎上拓展了一個新功能，增加了一個前端的實時頁面編輯器(front-end live editor)，叫做Fusion Builder Live，做為后端頁面編輯器的一個補充，使得網頁設計更加直觀，簡易和快速。
另外，需要注意的是，Fusion Builder Live從Avada 7.0版本開始，已重新更名為Avada Live。
前端實時頁面編輯器Avada Live頂部導航工具欄介紹：
Avada Builder Icon：Avada Builder的圖標，當鼠標移動到其上面時會顯示當前頁面編輯器的版本。
Toggle Sidebar：打開或關閉左側側邊欄。
Library: 訪問存儲庫，可快速調用存儲庫中已保存的模板內容等，部署應用到當前頁面。
History: 顯示最近25個歷史修改記錄，可以選擇退回到做出相應修改動作前的頁面，從這里重新開始進行頁面設計。
Preferences: 實時頁面編輯器Avada Live的一些首選項設置。
Add New：點擊可選擇添加一個新的Post, Page, Portfolio, FAQ 或者 Avada Form。
Support：提供了聯系支持的鏈接，官方視頻/文檔教程鏈接以及操作Avada Live的一些常用快捷鍵。
Responsive：響應式編輯模式，可預覽在不同大小設備顯示下的頁面效果且切換到在當前設備模型下進行頁面設計編輯。
Toggle Wireframe: 將Avada Live中編輯器界面切換到Avada Builder，使用線框組件工具進行頁面編輯。
Preview：關閉左側邊欄面板以及頂部導航欄中的左側工具欄，然后預覽當前頁面效果。
Publish / Draft：發布當前頁面或將當前頁面存為草稿。
Exit：暫停啟用并退出Avada Live頁面編輯器，有3個選項可選，直接在當前頁面退出Avada LIve但仍舊停留在當前頁面，退出并跳轉到后端線框頁面編輯器Avada Builder，退出并跳轉到Avada主題后臺儀表盤。
啟用Avada Live的時候是直接在前端瀏覽器界面可視化編輯設計頁面內容，所作的任何更改都會立即更新并作用于頁面，所見即所得的工作方式可實時預覽頁面效果。同時，用Avada Live創建編輯網頁的時候，可以在創建的當前頁面中直接訪問Avada Global Options 以及 Avada Page Options并對頁面效果進行相應的設置，這可以大大加快工作流程，提高工作效率。
Avada Builder VS Avada Live
總的來說，在最新的Avada主題的Avada Builder頁面編輯器插件中，共提供有前端和后端兩個不同的應用接口，分別是Avada Builder（支持后端模塊化頁面編輯）和Avada Live（支持前端可視化頁面編輯），可根據個人實際需求自由切換使用。Avada Builder和Avada Live除了在工作界面和工作流程上存在一些細微差異之外，這兩個版本的頁面編輯器本質上是一樣的，使用的都是相同的結構和控件（容器-列-元素）來創建或編輯頁面，這兩個編輯器創建頁面生成的內容相同，代碼一致，因而它們之間具有完全的兼容性。你甚至可以在Avada Live中將編輯器界面視圖切換到Avada Builder，使用線框組件工具進行頁面編輯，此時它本質上就是在前端Avada Live工作界面中的后端Avada Builder頁面編輯器。
首先，這里有一個地方需要注意一下的，那就是在創建一個新的Page或者Post的時候，Avada Builder默認是沒有激活啟用的，但可以通過設置來全局啟用Avada Builder為默認的頁面編輯器。
方法如下：在后臺Avada儀表盤的頂部菜單欄中找到 Options > Builder Options > Avada Builder Auto Activation ，點擊On啟用 。
啟用后，以后每當你在你編輯頁面的時候，頁面編輯器Avada Builder就會自動加載啟用。但如果不設置則wordpress后臺默認是啟用wordpress自帶的頁面編輯器的。
好，那么現在就來看一下如何能夠找到這個頁面編輯器Avada Builder：
有幾種方法都可以訪問Avada Builder，具體取決于你當前所在的位置。
方式一：如果你在Wordpress默認的編輯器中打開了一個頁面page或者帖子post的時候，如下所示：
此時，通過點擊頂部的這兩個按鈕，都可以訪問啟用Avada后端頁面編輯器Avada builder或者Avada前端頁面編輯器Avada Live，而且當前是沒有設置默認的頁面編輯器是Avada Builder的，如果設置了全局啟用Avada Builder為默認的編輯器的話之后，則在新建或者編輯頁面的時候，看到的頁面會是這樣子的：
此時頁面默認啟用的就是Avada Builder而不是Wordpress默認的編輯器了，當然你也可以點擊按鈕 Defult Editor，切換回來。
方式二：在登錄到Wordpress后臺的狀態下，選擇一個page頁面或者post在前端瀏覽器中打開，如下所示：
此時，在頂部導航條中可找到Edit Page和Edit Live這兩個菜單選項卡，其中，
點擊Edit Page則當前頁面就會以編輯狀態跳轉到一個新頁面中打開并啟用Avada后端編輯器Avada Builder（當然，這里的前提是你已經設置Avada Builder為默認的頁面編輯器了，否則新頁面中打開的就是Wordpress默認的頁面編輯器）；點擊Edit Live則當前頁面就會以編輯狀態跳轉到一個新頁面中打開并啟用Avada前端編輯器Avada Live。
方式三：如果你此時在Wordpress后臺的page或者post版塊的位置，如下所示：
鼠標移動到page標題上面的時候，下方就會顯示一個操作菜單列表，此時，點擊Edit，當前頁面就會以編輯狀態跳轉打開并啟用Avada后端編輯器Avada Builder（當然，這里的前提依然是你已經設置Avada Builder為默認的頁面編輯器了）；點擊Avada Live則當前頁面就會以編輯狀態跳轉打開并啟用Avada前端編輯器Avada Live。
方式四：在Wordpress后臺的pages或者post版塊的位置，如下所示，在頂部的Page右側的Add New菜單欄中，在下拉菜單列表，選擇創建一個新頁面，選擇Add New并點擊右側下拉提示框按鈕，如下所示：
此時，便可以在下拉框中選擇啟用Avada后端頁面編輯器或者是啟用Avada前端頁面編輯器來創建新頁面了，而第三個選擇則是Wordpress后臺默認的頁面編輯器古騰堡。
Avada Builder啟動頁面 Starter Page
無論什么時候，當用Avada Builder頁面編輯器創建新頁面或者編輯一個空頁面的時候，首先會看到 starter page，這個就是頁面編輯器的啟動頁面，叫做Starter Page。無論是使用Avada Builder或者是Avada Live，都會從Starter page開始頁面的創建及編輯。這個是從Avada 5.0版本開始新增加的一個功能，啟動頁面starter page中主要包含了一些有用的向導信息和鏈接可以幫助用戶更快更方便的開始頁面的創作。
這是后端線框頁面編輯器Avada Builder的starter page啟動頁面，其中：
+Container 按鈕：為當前頁面添加線框組件Container（容器）。
+Prebuilt Page：直接從存儲庫中導入演示站點的單頁面或者已保存的頁面模板。
Icon Control Descriptions：在使用Avada Builder頁面編輯器過程中經常會遇到的一些工具圖標的簡要描述。例如導航欄上常用的一些工具圖標也會在這里有相應的對應簡短說明
Getting Started Video：有關Avada Builder頁面編輯器的官方視頻教程。
這是前端實時頁面編輯器Avada Live的starter page啟動頁面，其中：
+Container 按鈕：為當前頁面添加線框組件Container（容器）。
+Prebuilt Page：直接從存儲庫中導入演示站點的單頁面或者已保存的頁面模板。
Watch Our Get Started Video：有關Avada Builder頁面編輯器的官方視頻教程。
Avada Builder Docs：有關Avada Builder頁面編輯器的官方幫助文檔。
可以看到，前端頁面編輯器Avada Live的啟動頁面跟后端頁面編輯器Avada Builder的啟動頁面幾乎是相同的。不同的地方就在于，當你在Avada Live中創建一個新頁面或者編輯一個空頁面的時候，側邊欄中會默認打開Page Options的Page Settings設置選項卡，便于可以快速的為當前頁面設置標題，選擇模板，添加特色圖片等。
Avada Builder頁面編輯器新建頁面工作流程
Avada頁面編輯器Avada Builder的核心是由容器-列-元素（container-column-element）這三個組件構成的頁面設計系統，無論是使用傳統的后端線框頁面編輯器Avada Builder，或者是使用前端實時頁面編輯器Avada Live，新建頁面的工作流程都是一樣的：先往頁面添加容器，接著往容器中添加列，最后往列中添加元素。
在這里，可以選擇添加一個空容器或者添加一個已經包含了列的容器，一般情況下都是選擇往頁面中添加已經設計好了的結構恰當的包含了一列或多列的容器。
添加容器之后，接下來便是往容器中添加列了，但如果在添加容器的時候，選擇的那些已經包含了列的容器的話，這里就直接可以往列中添加元素了，
點擊+ Element按鈕，將會彈出Elements窗口，顯示所有可添加到列中的元素（例如圖片/視頻/表格等），目前Avada Builder頁面編輯器中共有80多個可用的元素，且這些元素都會不定時的更新優化以及為來還會繼續添加新元素。
另外，可單獨選中容器Container，列Column或者元素Element，并點擊右鍵，此時通過單擊右鍵的彈出菜單框中可快速訪問一些常用功能操作指令（例如編輯/復制/移動/保存等）以及存儲庫Library。
當在當前頁面中添加了具體的容器-列-元素之外，當前頁面就已經具有了一定的內容了，此時可以通過預覽來查看下具體的頁面效果，例如：
這是在新建的頁面添加一個表格的效果預覽，當然，你可以繼續在當前頁面中繼續添加容器，列和元素，
如上圖所示，你可以在當前頁面中添加任意多的容器Container，列Column以及元素Element，直至設計出令你滿意的頁面。
以上便是關于Avada Builder頁面編輯器的整體情況概覽，如果你也在使用Avada主題的話，那么衷心的希望本文能對你有所幫助。
（來源：One小白）
以上內容屬作者個人觀點，不代表雨果跨境立場！本文經原作者授權轉載，轉載需經原作者授權同意。
（來源：One小白）
免費參與·100+跨境活動 
免費下載·4000+跨境資料 
免費學習·2000+直播課程 
免費加入·15萬+賣家交流群 
