舟山定制网站设计:如何向DiviBuilder文章或页面中添加更多列

舟山网站建设 | 2019-04-30

DiviBuilder允许页面布局最多有四列。而且,对大多数网站来说,四列是你所需要的。但有时您需要添加更多的列。当然,有一些插件可以让您嵌入短代码来向布局中添加额外的列。但是,在使用DiviBuilder时,这可能会受到限制,因为短代码要求您在模块中工作。

这就是为什么在今天的文章中,我将向您展示如何使用DiviBuilder将更多的列添加到您的行中,而无需使用插件或短代码。通过这种方式,您可以添加任意数量的列来组织任何类型的Divi模块。您是否需要一个十列布局来使用图像模块显示客户标识或投资组合部分?是否需要使用Blurb模块列出公司服务的六列布局?你可以的!最好的部分是,您仍然可以使用DiviBuilder编辑这些列中的模块。

首先,部署DiviBuilder并坚持使用显示的标准区段布局。

选择行模块设置。舟山定制网站设计在“常规设置”下,选择使行完全宽度的选项。

舟山定制网站设计

在“自定义CSS”选项卡下,在“CSS类”文本框中输入“六列”。稍后我们将向该类添加CSS。

储蓄与退出

现在,将一个全宽度列插入到您的行中。

插入Blurb模块。

在“常规设置”下的“Blurb模块设置”中,更新以下设置:

插入标题:[输入标题]
上传图片(宽度300 px,我使用unspash.com上的图片)
文本定位:中心
插入内容:[输入内容]
输入管理标签(可选)

储蓄与退出

现在,舟山定制网站设计需要复制您刚刚自定义的Blurb模块,以生成五个额外的模块给您总共六人模糊模块。这里有六个模块是很重要的,因为这与您之前创建的“六列”类是一致的。

舟山定制网站设计

保存或发布页面。

现在您的六个模块已经准备好了,请转到divi→主题选项并在“自定义CSS”文本框中添加以下CSS:

.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;}

现在预览你的页面。您应该看到六列布局中的blurb模块。

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

现在要创建的是六列类。但是,如果您想要不同数量的列,您只需更改两件事。

第一个更改是用不同的CSS类更新行模块设置自定义CSS。例如,如果您想要五列,您会将“五列”放在CSSClass文本框中。

第二个改变是确保您有五个BUURB模块,而不是六个。

需要更多的列布局吗?

如果你擅长数学(我们在开玩笑吗?)只需使用您的计算器应用程序),您可以添加任意数量的列到您的布局。只需计算所需百分比并为该百分比创建一个类即可。

例如,如果您想要一个12列布局,下面是您所做的工作:

使您的专栏布局更具创造性

舟山定制网站设计要创建更有创意的列布局,可以将此功能与专业部分结合起来。

例如,下面是如何进行五分之五的布局。

从DiviBuilder中选择“特定”部分。

插入以下列布局:

在左半栏中插入一个blurb模块:

转到右行模块上的行模块设置。

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

插入一个全宽度列,并将五个模块添加到您的行中,重复前面执行的步骤。

舟山定制网站设计

结果是五分之一的列布局。

照顾移动

如果不希望在所有设备上保持自定义列布局相同,则可以输入一些额外的CSS,以便在移动设备上将列缩小到更易读的大小。随意改变百分比以满足你的需要。

@media (max-width: 980px){
.ten-columns .et_pb_module {width: 20%;}
.nine-columns .et_pb_module {width: 33.3%;}
.eight-columns .et_pb_module {width: 25%;}
.seven-columns .et_pb_module {width: 25%;}
.six-columns .et_pb_module {width: 33.3%;}
.five-columns .et_pb_module {width: 33.3%;}
}

@media all and (max-width: 767px) {
.ten-columns .et_pb_module {width: 100%;}
.nine-columns .et_pb_module {width: 100%;}
.eight-columns .et_pb_module {width: 100%;}
.seven-columns .et_pb_module {width: 100%;}
.six-columns .et_pb_module {width: 100%;}
.five-columns .et_pb_module {width: 100%;}
}

就这样。现在,您可以使用DiviBuilder向页面布局添加更多列。

最后思想

在完成一个客户端的项目时,我首先添加了这个功能,该客户端希望为一组标识添加更多的列,以显示它们的特色客户端和合作伙伴。他们还希望能够使用DiviBuilder命令和编辑图像/徽标。解决方案非常有效。我希望你发现这也是一个有用的解决方案。


上一篇:舟山公司网站设计:分享WordPress文章的初学者指南下一篇:已经没有了