DIVI主题 – 将Row内的多个Text Modules竖向排列改为横向排列

1. 在DIVI主题内, 通过简单的代码实现

打开DIVI主题的可视化编辑状态>>屏幕底下的三个点图标展开>>齿轮图标进入Page Setting>>Advanced>>CustomCSS>>添加如下代码

/*CSS FOR STACKING TEXT MODULES*/
.text_inline .et_pb_text {
display: inline-block;
margin: 0 10px;
}

打开DIVI主题的可视化编辑状态>>点击相应的Row>>点击齿轮进入设置>>Advanced>>CSS ID & Classes>>Classes>>添加

Classes即是上面的代码最前面的部分.

text_inline

2. 设置前

No.1

No.2

No.3

3. 设置后

4. 设置后-居中

在row设置>>Advanced>>Custom CSS>>Main Element>>添加如下代码:

text-align: center !important;

5. 适用于其它

其它代码, 包括上面的Text, 可以全部一起复制, 放入相应的页面

/*CSS FOR STACKING TEXT MODULES*/
.text_inline .et_pb_text {
display: inline-block;
margin: 0 10px;
}
/*CSS FOR STACKING ICON MODULES*/
.icon_inline .et_pb_icon {
display: inline-block;
margin: 0 10px;

}
/*CSS FOR STACKING BLURB MODULES*/
.blurb_inline .et_pb_blurb {
display: inline-block;
margin: 0 10px;
}
/*CSS FOR STACKING IMAGE MODULES*/
.image_inline .et_pb_image {
display: inline-block;
margin: 0 10px;
}