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