在上期的文章中，我們探討了Astra主題的一些基本排版技巧。今天，我們將繼續(xù)深入探討如何在Elementor編輯器中更好地利用Container和Grid布局，幫助你創(chuàng)建更加靈活且美觀的網(wǎng)頁(yè)設(shè)計(jì)。無(wú)論你是初學(xué)者還是有經(jīng)驗(yàn)的設(shè)計(jì)師，這些技巧都將助你一臂之力。

如果你需要設(shè)置二個(gè)或者四個(gè)甚至更多的布局

如上圖，你需要先加入一個(gè)容器（Container）

步驟：網(wǎng)站前端→Edit with Elementor→Layout→Container或Grid

怎么去選擇Container和Grid，這個(gè)需要根據(jù)實(shí)際情況，但建議優(yōu)先選擇Container

Container可以選擇多種布局，當(dāng)然Grid也行，但是Container可以在里面一直添加模塊，而Grid是固定的，如下圖，紅色框是Container，如果你需要展示多個(gè)模塊，肯定是Container，黃色框是Grid，很明顯的結(jié)果

但Grid也有自己的優(yōu)點(diǎn)，如果你已經(jīng)有一個(gè)容器了，但你想分為二個(gè)甚至四個(gè)的布局，那重新設(shè)置的Container兩布局的容器是無(wú)法拖動(dòng)到第一個(gè)的容器的，但是Grid就可以隨時(shí)調(diào)整，如下圖，所以大家根據(jù)實(shí)際情況去調(diào)整

接下來(lái)來(lái)講一個(gè)兩個(gè)布局的設(shè)置和方法

以上就是一個(gè)Container兩布局的，左邊是有文本和標(biāo)題模塊再加一個(gè)文本模塊再加一個(gè)按鈕模塊，右邊則是單張圖片模塊

左邊的第一個(gè)文本模塊大家覺(jué)得為什么能調(diào)整到那么小

我們找到文本模塊Edit Text Editor

步驟：網(wǎng)站前端→Edit with Elementor→Edit Text Editor

需要調(diào)整文本的大小，按照我上述的步驟，顏色在內(nèi)容哪里調(diào)整

這樣就設(shè)置好了

按鈕模塊設(shè)置一下文字和位置就可以了，當(dāng)然背景顏色樣式也是都可以調(diào)整的

步驟：網(wǎng)站前端→Edit with Elementor→Creative Button

右邊的圖片模塊不是霸占全屏的，如果需要的話，裁剪合適的尺寸就行了，豎圖，而不是橫圖

這就是兩布局的方式

當(dāng)然四布局也是一樣的

設(shè)置好四布局后，在每一個(gè)單獨(dú)的加入標(biāo)題和文本模塊

背景色是設(shè)置一個(gè)容器的黑色

模塊背景是白色

模塊設(shè)置好寬度，以及位置，還有空隙

總結(jié)：

通過(guò)本文的介紹，你應(yīng)該對(duì)Container和Grid的使用有了更深的理解，并能夠根據(jù)實(shí)際需求選擇合適的布局方式。記住，Container適用于更靈活的布局需求，而Grid則可以幫助你在現(xiàn)有容器中快速分割布局。下一期，我們將繼續(xù)為你帶來(lái)更多關(guān)于Astra主題的實(shí)用技巧與攻略，敬請(qǐ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é)假日休息