欢迎您光临深圳塔灯网络科技有限公司!
电话图标 余先生:13699882642

网站百科

为您解码网站建设的点点滴滴

如何给你的分职位或网页生成器添加更多的列

发表日期:2017-02 文章编辑:小灯 浏览次数:486

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

三生成器允许您为页面布局有四列。而且,对于大多数网站,四列是所有你需要的。但有时你需要添加更多的列。当然,有插件,允许你将简码你布局添加额外的列。但是,这可以限制工作时与分者自简码要求你工作在一个模块。

这就是为什么在今天的文章中我将向您展示如何添加更多的列到你的行用迪维建设者没有一个插件或短码的使用。这样你可以添加任意数量的列来组织任何类型的分模块。你需要的一一零栏布局显示客户端的标识或组合件使用图像模块?你需要的一六栏布局,列出你的公司服务使用Blurb的模块?好的,你可以!和好的部分是,你仍然可以在这些栏目采用分模块生成器编辑。


让我们开始吧

如何给你的分职位或网页生成器添加更多的列


首先部署分Builder和坚持的标准剖面平面图。

选择行模块设置。在一般的设置,选择选项以使行全角。


自定义CSS选项卡,输入“六列”中的CSS类文本框。我们将添加CSS这类后。

保存并退出

现在插入一个全角的列行。

insert the blurb模块。

在广告模块设置在一般设置更新以下设置:

插入标题:[输入您的标题]

上传一个图像(宽度300px,我用unsplash .com图像)

文本方向:中心

插入内容:[进入你的内容]

输入管理员的标签(可选)

保存并退出

现在你需要复制的广告模块你定制,使五个额外的模块给你共有六个简介模块。你有六个模块,因为恰逢“六柱”类之前创建是很重要的。

保存或发布您的网页

现在你的六个模块都准备好了,去桌面主题选项→然后把下面的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%;浮动:左;}。九列。et_pb_module {宽度:11.11%;浮动:左;}。八列。et_pb_module {宽度:12.5%;浮动:左;}。七列。et_pb_module {宽度:14.28%;浮动:左;}。六列。et_pb_module {宽度:16.66%;浮动:左;}。五列。et_pb_module {宽度:20%;浮动:左;}">。十列。et_pb_module {宽度:10%;浮动:左;}。九列。et_pb_module {宽度:11.11%;浮动:左;}。八列。et_pb_module {宽度:12.5%;浮动:左;}。七列。et_pb_module {宽度:14.28%;浮动:左;}。六列。et_pb_module {宽度:16.66%;浮动:左;}。五列。et_pb_module {宽度:20%;浮动:左;}</trans>

现在预览你的网页。你应该看到在一六栏的布局你的广告模块。

你可能已经注意到你进入自定义的CSS代码包括六个不同的类别。这使您能够创建布局五,六,七,八,九,或十列。

六柱类就是你现在创造的。但是,如果你想要一个不同数量的列,你只需要改变两件事。

第一个变化是与不同的CSS类更新行的模块设置自定义的CSS。例如,如果你想要的五列,你会把“五列”中的CSS类文本框。

变化之二是确保你有六而不是五的广告模块。

需要多栏的布局?

如果你擅长数学(我们是谁在开玩笑?就用你的计算器应用程序)可以添加多列,你想你的布局。你需要的只是计算的百分比,百分比和创建一个类。

例如,如果你想要一个12栏的布局,这里是你做了什么:

1除以12,乘以100得到8.33%。(这将是你的一个栏目。宽度)

添加一个自定义的CSS类,称为“十二柱”认为你行模块12个模块。

下面的这个百分比自定义CSS输入:

<trans data-src=".twelve-columns {width: 8.33%; float: left;}" data-dst="。十二列{宽度:8.33%;浮动:左;}">。十二列{宽度:8.33%;浮动:左;}</trans>


你列的布局更具有创造力

创造更多的创意栏的布局,你可以将这个功能与专业部分。

例如,这里是你如何能让一个一半五分之五布局。

select the section from the DIV的专业运动员。

插入以下列布局:

插入左半柱简介模块:

去行模块设置在右行模块。

自定义CSS选项卡,输入“五列”中的CSS类文本框。

插入一个全型柱和添加五个模块行重复你早一步。

其结果是一个一半的五分之五栏布局。


后的思考


我第一次加入这个功能,当完成客户谁想要一大堆的标志来展示自己的特色,客户和合作伙伴添加更多的列项目。他们还想订购和使用迪维生成器编辑图像/理性的能力。完美的解决方案。我希望你发现这也是一个有用的解决方案。


本页内容由塔灯网络科技有限公司通过网络收集编辑所得,所有资料仅供用户学习参考,本站不拥有所有权,如您认为本网页中由涉嫌抄袭的内容,请及时与我们联系,并提供相关证据,工作人员会在5工作日内联系您,一经查实,本站立刻删除侵权内容。本文链接:http://www.dengtar.com/10773.html
相关企业建站知识
 八年  行业经验

多一份参考,总有益处

联系深圳网站公司塔灯网络,免费获得网站建设方案及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:余经理:13699882642

Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.