網(wǎng)站制作

Website development

如何給你的分職位或網(wǎng)頁生成器添加更多的列

發(fā)布時(shí)間：2017-02-16 09:19:01

How to Add More Columns to Your Divi Builder Posts or Pages

三生成器允許您為頁面布局有四列。而且，對于大多數(shù)網(wǎng)站，四列是所有你需要的。但有時(shí)你需要添加更多的列。當(dāng)然，有插件，允許你將簡碼你布局添加額外的列。但是，這可以限制工作時(shí)與分者自簡碼要求你工作在一個(gè)模塊。

這就是為什么在今天的文章中我將向您展示如何添加更多的列到你的行用迪維建設(shè)者沒有一個(gè)插件或短碼的使用。這樣你可以添加任意數(shù)量的列來組織任何類型的分模塊。你需要的一一零欄布局顯示客戶端的標(biāo)識(shí)或組合件使用圖像模塊？你需要的一六欄布局，列出你的公司服務(wù)使用Blurb的模塊？好的，你可以！和好的部分是，你仍然可以在這些欄目采用分模塊生成器編輯。

讓我們開始吧

如何給你的分職位或網(wǎng)頁生成器添加更多的列

首先部署分Builder和堅(jiān)持的標(biāo)準(zhǔn)剖面平面圖。

選擇行模塊設(shè)置。在一般的設(shè)置，選擇選項(xiàng)以使行全角。

自定義CSS選項(xiàng)卡，輸入“六列”中的CSS類文本框。我們將添加CSS這類后。

保存并退出

現(xiàn)在插入一個(gè)全角的列行。

insert the blurb模塊。

在廣告模塊設(shè)置在一般設(shè)置更新以下設(shè)置：

插入標(biāo)題：[輸入您的標(biāo)題]

上傳一個(gè)圖像（寬度300px，我用unsplash .com圖像）

文本方向：中心

插入內(nèi)容：[進(jìn)入你的內(nèi)容]

輸入管理員的標(biāo)簽（可選）

保存并退出

現(xiàn)在你需要復(fù)制的廣告模塊你定制，使五個(gè)額外的模塊給你共有六個(gè)簡介模塊。你有六個(gè)模塊，因?yàn)榍》辍傲鳖愔皠?chuàng)建是很重要的。

保存或發(fā)布您的網(wǎng)頁

現(xiàn)在你的六個(gè)模塊都準(zhǔn)備好了，去桌面主題選項(xiàng)→然后把下面的CSS在自定義的CSS文本框：

<trans data-src=".ten-columns .et_pb_module {width: 10%; float: left;}.nine-columns .et_pb_module {width: 11.11%; float: left;}.eight-columns .et_pb_module {width: 12.5%; float: left;}.seven-columns .et_pb_module {width: 14.28%; float: left;}.six-columns .et_pb_module {width: 16.66%; float: left;}.five-columns .et_pb_module {width: 20%; float: left;}" data-dst="。十列。et_pb_module {寬度：10%；浮動(dòng)：左；}。九列。et_pb_module {寬度：11.11%；浮動(dòng)：左；}。八列。et_pb_module {寬度：12.5%；浮動(dòng)：左；}。七列。et_pb_module {寬度：14.28%；浮動(dòng)：左；}。六列。et_pb_module {寬度：16.66%；浮動(dòng)：左；}。五列。et_pb_module {寬度：20%；浮動(dòng)：左；}">。十列。et_pb_module {寬度：10%；浮動(dòng)：左；}。九列。et_pb_module {寬度：11.11%；浮動(dòng)：左；}。八列。et_pb_module {寬度：12.5%；浮動(dòng)：左；}。七列。et_pb_module {寬度：14.28%；浮動(dòng)：左；}。六列。et_pb_module {寬度：16.66%；浮動(dòng)：左；}。五列。et_pb_module {寬度：20%；浮動(dòng)：左；}</trans>

現(xiàn)在預(yù)覽你的網(wǎng)頁。你應(yīng)該看到在一六欄的布局你的廣告模塊。

你可能已經(jīng)注意到你進(jìn)入自定義的CSS代碼包括六個(gè)不同的類別。這使您能夠創(chuàng)建布局五，六，七，八，九，或十列。

六柱類就是你現(xiàn)在創(chuàng)造的。但是，如果你想要一個(gè)不同數(shù)量的列，你只需要改變兩件事。

第一個(gè)變化是與不同的CSS類更新行的模塊設(shè)置自定義的CSS。例如，如果你想要的五列，你會(huì)把“五列”中的CSS類文本框。

變化之二是確保你有六而不是五的廣告模塊。

需要多欄的布局？

如果你擅長數(shù)學(xué)（我們是誰在開玩笑？就用你的計(jì)算器應(yīng)用程序）可以添加多列，你想你的布局。你需要的只是計(jì)算的百分比，百分比和創(chuàng)建一個(gè)類。

例如，如果你想要一個(gè)12欄的布局，這里是你做了什么：

1除以12，乘以100得到8.33%。（這將是你的一個(gè)欄目。寬度）

添加一個(gè)自定義的CSS類，稱為“十二柱”認(rèn)為你行模塊12個(gè)模塊。

下面的這個(gè)百分比自定義CSS輸入：

你列的布局更具有創(chuàng)造力

創(chuàng)造更多的創(chuàng)意欄的布局，你可以將這個(gè)功能與專業(yè)部分。

例如，這里是你如何能讓一個(gè)一半五分之五布局。

select the section from the DIV的專業(yè)運(yùn)動(dòng)員。

插入以下列布局：

插入左半柱簡介模塊：

去行模塊設(shè)置在右行模塊。

自定義CSS選項(xiàng)卡，輸入“五列”中的CSS類文本框。

插入一個(gè)全型柱和添加五個(gè)模塊行重復(fù)你早一步。

其結(jié)果是一個(gè)一半的五分之五欄布局。

后的思考

我第一次加入這個(gè)功能，當(dāng)完成客戶誰想要一大堆的標(biāo)志來展示自己的特色，客戶和合作伙伴添加更多的列項(xiàng)目。他們還想訂購和使用迪維生成器編輯圖像/理性的能力。完美的解決方案。我希望你發(fā)現(xiàn)這也是一個(gè)有用的解決方案。

原創(chuàng)不易，未經(jīng)授權(quán)，嚴(yán)禁轉(zhuǎn)載

原文地址：http://www.mpian.cn/i,72,7108,0.html

上一篇：一個(gè)小動(dòng)畫，很長的路要走

下一篇：桌面和移動(dòng)：三重點(diǎn)網(wǎng)站設(shè)計(jì)的差異

您還有可能感興趣的內(nèi)容

建站流程

Website development

網(wǎng)站需
求分析
網(wǎng)站策
劃方案
頁面風(fēng)
格設(shè)計(jì)
程序設(shè)
計(jì)研發(fā)
資料錄
入優(yōu)化
確認(rèn)交
付使用
后續(xù)跟
蹤服務(wù)
+86 10 64758810
18510861135

熱門標(biāo)簽

Website development

客戶評(píng)價(jià)

更多+

感謝云智互聯(lián)，系統(tǒng)提前完成，在整個(gè)項(xiàng)目周期內(nèi)，云智互聯(lián)對待我們并不像是對待客戶，更像是朋友一樣，每一次，都能以專業(yè)的角度向我們提出更合理、更有效的解決方案，并快速、細(xì)致地完成我們的每一個(gè)需求，再次感謝以至誠之心做事的云智互聯(lián)團(tuán)隊(duì)。

潘濤
我是東方龍馬集團(tuán)，在云智家做了2個(gè)企業(yè)官網(wǎng)，服務(wù)態(tài)度超級(jí)好。如果想做網(wǎng)站，選擇他家一定不后悔。性價(jià)比高，服務(wù)態(tài)度好。值得你的信賴！

譚嬌
技術(shù)好，設(shè)計(jì)精良，操作便利，很專業(yè)！配套的服務(wù)和后續(xù)的服務(wù)都很好,網(wǎng)站封面堪稱精品，運(yùn)行方便，后臺(tái)操作的簡單。技術(shù)還會(huì)耐心教我,很好的云智互聯(lián)（北京）科技有限公司，建站很不錯(cuò)的。

陳曦
不錯(cuò)，價(jià)格比較合適，重點(diǎn)是響應(yīng)速度蠻快，有什么問題都會(huì)馬上給你解決，公司很滿意，因?yàn)樗麄兌际轻槍γ總€(gè)項(xiàng)目建了相應(yīng)的討論組，有問題可以再里面提出，人員分工到位，解決問題很及時(shí)。

張經(jīng)理