Elementor構(gòu)建器可以針對(duì)平板端和手機(jī)端單獨(dú)進(jìn)行響應(yīng)式調(diào)試，可以更好的滿足不同設(shè)備用戶的使用體驗(yàn)。

進(jìn)入頁(yè)面并使用Elementor進(jìn)行可視化編輯

1. 進(jìn)入Elementor前臺(tái)可視化編輯： 點(diǎn)擊頂部黑色導(dǎo)航條中的“Edit with Elementor”按鈕，即可快速進(jìn)入當(dāng)前頁(yè)面的可視化編輯模式。

2. 進(jìn)入響應(yīng)式模式： 點(diǎn)擊左下方的圖標(biāo)，可以切換到響應(yīng)式模式，如下圖所示。

3. 切換平板端和手機(jī)端瀏覽模式

切換好手機(jī)端瀏覽后，點(diǎn)擊對(duì)應(yīng)模塊就可以修改模塊中的文字格式大小，邊距大小等等。

1. 修改手機(jī)端文字大小

修改文字大小都是在模塊的Style欄目下的Typography（字體），修改Size值即可修改文字大小。

2. 修改手機(jī)端列寬度方法

點(diǎn)擊左上角圖標(biāo)（如下圖所示），修改Layout欄目下面的Columns Gap即可修改列的寬度大小、比例等。

3. 修改手機(jī)端內(nèi)外間距方法

在Advanced欄目可以修改邊距，如下圖所示，Margin是外邊距，Padding是內(nèi)邊距，通常來(lái)說(shuō)手機(jī)端需要修改下Padding值，讓閱讀起來(lái)更加緊湊。

4. 修改產(chǎn)品列數(shù)方法

這里是產(chǎn)品調(diào)用模塊（woo-Products模塊）的修改，點(diǎn)擊模塊進(jìn)行編輯，Content欄目下面的Column就是產(chǎn)品展示的列數(shù)，手機(jī)端改成2比較合適。

修改手機(jī)端頁(yè)面產(chǎn)品標(biāo)題大?。?/strong>點(diǎn)擊Style 欄目下面Content，找到Title下面的Typography就可以修改標(biāo)題的大小

5. 隱藏手機(jī)端頁(yè)面展示

在編輯模塊，在Advanced欄目下面的Responsive（響應(yīng)式），點(diǎn)擊Hide On Mobile就可以隱藏該模塊在手機(jī)端展示。

6. 保存修改樣式

如下圖所示點(diǎn)擊左下角的Publish即可保存修改

7. 快速返回前臺(tái)及后臺(tái)

單擊以下圖標(biāo)可快速返回

總結(jié)：

通過(guò)進(jìn)入Elementor前臺(tái)可視化編輯模式，你可以切換到響應(yīng)式模式，分別為平板端和手機(jī)端調(diào)整文字大小、列寬度、內(nèi)外間距和產(chǎn)品列數(shù)。此外，還可以根據(jù)需要隱藏特定模塊，確保不同設(shè)備上的用戶都能獲得最佳體驗(yàn)。文章提供了具體步驟和操作方法，幫助你輕松實(shí)現(xiàn)頁(yè)面優(yōu)化。

聯(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é)假日休息

? 轉(zhuǎn)載聲明

本文作者：xiesong

本文鏈接：http://gqxi.cn/10376
文章版權(quán)歸作者所有，轉(zhuǎn)載務(wù)必注明來(lái)源。