在使用Avada主題時(shí)，很多新手可能會(huì)對(duì)其首頁排版感到困惑，尤其是在容器和模塊的選擇與設(shè)置上。相比其他頁面構(gòu)建器如Elementor和WPBakery Page Builder，Avada主題內(nèi)置的編輯器提供了更加直觀和高效的排版方式。在本篇文章中，我們將詳細(xì)講解如何在Avada中進(jìn)行首頁排版，幫助你快速上手并掌握容器和模塊的設(shè)置技巧。

步驟：網(wǎng)站前端→Edit Live→ADD COLUMNS

在首頁我們能看到中間和右側(cè)都有這個(gè)放在添加的符號(hào)，那么我們?cè)撛趺催x擇呢

如果你是要添加你現(xiàn)在這一行，請(qǐng)點(diǎn)擊中間的添加

如果你要添加是下面的，請(qǐng)點(diǎn)擊右側(cè)的添加符號(hào)

如果你要設(shè)置當(dāng)前這列的容器的設(shè)置，請(qǐng)選擇右側(cè)筆符號(hào)

然后會(huì)有對(duì)應(yīng)的一個(gè)容器設(shè)置，比如寬度啊，樣式啊，間距啊還有什么設(shè)備顯示啊等等

如上圖，Avada主題自帶的編輯器，對(duì)于外框和內(nèi)框的調(diào)整他是可視化的，對(duì)于elmentor和WPBakery Page Builder編輯器來說，還需要點(diǎn)擊后再高級(jí)里面設(shè)置，可方便太多了

途中藍(lán)色是內(nèi)框，紫色是外框，是直接可以拉動(dòng)的，不管是上下還是兩側(cè)都是可以的，這點(diǎn)還是做的很好

然后添加后，會(huì)彈出一個(gè)選擇容器樣式（如下圖）

我覺得這也是一個(gè)很好的設(shè)計(jì)，他不允許模塊單獨(dú)存在，必須一個(gè)容器控制著模塊，但elmentor和WPBakery Page Builder編輯器是可以讓模塊單獨(dú)存在的

樣式基本上覆蓋了，不需要手動(dòng)再去設(shè)置排列了，好處就是無需擔(dān)心自己的容器會(huì)有不好的排列效果，我說的是如果超過四列以上的，在這里基本上覆蓋了，就不需要去手動(dòng)設(shè)置容器了，但elmentor和WPBakery Page Builder編輯器是可以自己去添加更多的容器，當(dāng)然也就有更多不可控制性，比如排列扭曲或者前端展示不整齊，當(dāng)然這種自定義的空間更高

如上圖，我們添加是1/1容器，也是就一個(gè)容器布局，然后我們?cè)冱c(diǎn)擊添加模塊，（如下圖）

是不是覺得模塊太多了，那么如果你是有一定熟練度的，可以試下右上角的搜索，當(dāng)然新手建議還是在這頁面找，多操作

這是文本塊，也就是文本模塊，也是用的最多的

點(diǎn)擊中間的筆符號(hào)（編輯）注意所有側(cè)邊的都是容器的設(shè)置，如果是模塊點(diǎn)擊中間的即可

步驟：網(wǎng)站前端→Edit Live→ADD COLUMNS→Text Block

然后有一些設(shè)置，文本內(nèi)容，文本位置，以及設(shè)備展示

這個(gè)不建議弄，可能會(huì)破壞布局

點(diǎn)擊問號(hào)也會(huì)有對(duì)應(yīng)的解釋，如果你要弄一列多個(gè)，直接用容器的多列布局就行了，這樣更兼容，不會(huì)出現(xiàn)前端設(shè)置不兼容的情況

當(dāng)然在Design(設(shè)計(jì)）也會(huì)有顏色背景和內(nèi)距的設(shè)置，根據(jù)你是實(shí)際情況來

按鈕模塊

步驟：網(wǎng)站前端→Edit Live→ADD COLUMNS→Button

然后我們?cè)谧髠?cè)可以設(shè)置按鈕的一些信息，比如鏈接，按鈕文本，以及按鈕跳轉(zhuǎn)是格式等等（如下圖）

如果不懂每一個(gè)設(shè)置什么意思，可以查看對(duì)應(yīng)的問號(hào)都有解釋，這就是好的主題的細(xì)節(jié)

Design（設(shè)計(jì)）這里能設(shè)置按鈕的風(fēng)格，以及圖標(biāo)，按鈕大小等等

步驟：網(wǎng)站前端→Edit Live→ADD COLUMNS→image

圖片模塊

點(diǎn)擊編輯，然后更換圖片，在媒體庫或者本地上傳，在加入鏈接即可，完成基本的圖片跳轉(zhuǎn)

在Design(設(shè)計(jì)）處理可以調(diào)整最大寬度還有位置等等，還有一個(gè)可以設(shè)置圖片的外面，你可以理解為一個(gè)容器控制圖片，就是面具，還是挺有意思的

還可以設(shè)置這個(gè)面具的位置，尺寸，以及圖片是否重復(fù)等等

Caption（標(biāo)題），你還可以幫圖片設(shè)計(jì)標(biāo)題

有很多類型，標(biāo)題位置不一樣，你根據(jù)你實(shí)際情況選擇

紅色是因?yàn)楸尘吧O(shè)置成紅色

如上圖，可以更改的

所有的模塊的動(dòng)畫效果都在最后一個(gè)設(shè)置（Extras）

下面這個(gè)是可以不用管，有些模塊是沒有這個(gè)的

總結(jié)

通過這篇教程，相信你已經(jīng)對(duì)Avada主題的首頁排版有了更加深入的了解。從容器的選擇到模塊的設(shè)置，我們看到了Avada編輯器如何簡(jiǎn)化了布局操作。如果你覺得這期內(nèi)容對(duì)你有幫助，歡迎繼續(xù)關(guān)注我們，下一期我們將繼續(xù)講解更多關(guān)于Avada主題的技巧與方法，幫助你更加靈活地打造專業(yè)網(wǎng)站。

聯(lián)系我們
教程看不懂？聯(lián)系我們?yōu)槟赓M(fèi)解答！免費(fèi)助力個(gè)人，小企站點(diǎn)！	客服微信
① 電話：020-2206-9892
② QQ咨詢：1025174874
③ 郵件：info@361sale.com
④ 工作時(shí)間：周一至周五，9:30-18:30，節(jié)假日休息