朋友們大家早上好啊。

最近有朋友問(wèn)三兒：領(lǐng)導(dǎo)想要在推文中放很多很多圖，應(yīng)該怎么排版。

如果只是將圖片簡(jiǎn)單堆砌在文章后面，文章會(huì)顯得冗長(zhǎng)，排版單一也不好看。

這個(gè)時(shí)候我們可以使用布局或圖片相關(guān)的svg組件。

一張一張放圖片，內(nèi)容展示少，用戶讀取的信息也少，而布局可以靈活排列，可一行兩列、三列、四列、甚至是五列效果如下??

# 如何添加布局

在編輯器頁(yè)面樣式展示區(qū)中的上方找到【布局】??【基礎(chǔ)布局】，根據(jù)各自的需求，選擇一行x列的布局選項(xiàng)。

選擇好布局后，在布局框中添加圖片即可。

但如果我們就這樣簡(jiǎn)單放置圖片肯定是不行的，三兒給圖片加個(gè)背景，問(wèn)題就會(huì)立馬顯露出來(lái)。

大家看到了吧，放置圖片后邊框內(nèi)還有多余的空白，圖片與圖片之間緊密相連不夠好看。

# 如何解決

給布局添加邊框，設(shè)置邊距、給插入圖片設(shè)置【無(wú)縫】消除多余的空白。

*注：【邊框】樣式中默認(rèn)是【無(wú)邊框】所以需要我們手動(dòng)選擇相應(yīng)的邊框樣式；

【邊距】分為【內(nèi)邊距】和【外邊距】邊距可以靈活設(shè)置【上下左右】

設(shè)置好后就能得到如下效果??。

【布局+圖片】的優(yōu)劣

優(yōu)：展示較多圖片，操作簡(jiǎn)單

劣：展示圖片數(shù)量有限，一旦一列x圖，這個(gè)x的內(nèi)容超多3張，圖片大小將顯著變小

推薦指數(shù)：☆☆☆

適用范圍：2-3圖的展示

若我們想要插入圖片數(shù)量不限，尺寸還要足夠的大，我們有辦法實(shí)現(xiàn)嗎？當(dāng)然可以，如下??

右滑查看更多海報(bào)

# 如何添加滑動(dòng)布局

在編輯器頁(yè)面樣式展示區(qū)的上方找到【布局】??【滑動(dòng)布局】

選中【滑動(dòng)布局】點(diǎn)擊【編輯】進(jìn)入滑動(dòng)布局編輯頁(yè)面，根據(jù)需求可設(shè)置【豎向】或【橫向】滑動(dòng)。

點(diǎn)擊【滑動(dòng)布局】進(jìn)入編輯頁(yè)面，插入一行單列布局，上傳圖片，設(shè)置布局格式，點(diǎn)擊【完成】即可。

*注：格式設(shè)置方式與【布局+圖片】相同，都需要注意清楚去除圖片縫隙，以及設(shè)置圖片邊框、邊距

【滑動(dòng)布局+圖片】的優(yōu)劣

優(yōu)：圖片無(wú)數(shù)量限制，展示圖片尺寸大、信息多

劣：展示形式單一，不夠新穎讀者容易審美疲勞

推薦指數(shù)：☆☆☆☆

適用范圍：大于3張圖片的展示

想要讓人眼前一亮又要插入多張圖片，那么svg輪播組件一定不可錯(cuò)過(guò)，效果如下??

svg組件 頂圖固定底圖橫向滾動(dòng)播放 ID：224

svg組件 橫向圖片停頓式放大輪播 ID：253

svg組件 抽拉式多圖左右自動(dòng)輪播 ID：219

svg組件 橫向停頓式圖片輪播 ID：166

svg組件 多圖彈動(dòng)輪播（橫向/帶特效） ID：94

# 如何使用輪播svg組件

通過(guò)135編輯器頁(yè)面進(jìn)入svg編輯器頁(yè)面，搜索關(guān)鍵詞【輪播】便可得到輪播相關(guān)的svg組件，根據(jù)每個(gè)組件具體要求上傳輪播素材。

【輪播svg組件】的優(yōu)劣

優(yōu)：圖片展示效果新穎、展示圖片數(shù)量多、可玩性高、代碼0基礎(chǔ)也能輕松上手

劣：對(duì)圖片有一定的要求如大小、圖片格式、數(shù)量（有些效果只能雙數(shù)圖片）

推薦指數(shù)：☆☆☆☆☆

適用范圍：創(chuàng)意圖片展示、多圖展示