VC如何给row添加类名或id

许多wordpress新手在写css样式的时候会发现,基于VC模块的HTML结构中会存在大量重复的类名,比如wpb_wrapper、wpb_column等。如果直接使用该选择器,将会导致所有重复的类名均有该效果。WP花园洋葱在这里教一个手动在row中添加类名的方法,可以方便使你的代码在你想实现的效果范围内。

 

首页我们制作一个简单的左图右文样式。

然后复制一层相同的行。

可以通过点击行右上角的第三个按钮复制行

然后保存更新查看前台样式

出现了两个相同的左图右文样式

随后我在后台写入css

.wpb_wrapper{

font-size:20px;

}

更新后我们发现上下两个段落的字体都变成了20px

但如果你只想改变上面一行的段落字体为20px

你会发现非常困难,因为上下的类名完全一样,不管你怎么写,都会影响到上下两个模块中的元素。

这时候应该选择给行加类名/id。

进入后台编辑,点击行元素右上角的小铅笔进入编辑模式

将行样式改为Default VC

划至底部,在附加class名字中写入你自定义的类名

注意:不要写常用类名以免冲突,也不需要写“.”

更新后审查元素,你会发现你的代码加在了整个行内

然后我们将类名修改成

.onion .wpb_wrapper{

font-size:20px;

}

更新并保存查看前台

你会发现上面的字体变成了20px而下面的字体并没有改变,效果实现。

这时候我们对后台样式做一下修改

你会发现两边的字体又同时放大了,原因是你将两个文本块放置在了同一行。而刚刚添加的自定义class为行样式,将会影响到整个行的效果。

这时候我们可以添加一个列元素的自定义class标签

我们在右侧的列上点击上方的小铅笔

进入列设置

在附加class名字上添加你的第二个自定义class并保存

然后我们将刚刚的代码修改为

.onion .tyga .wpb_wrapper{

font-size:20px;

}

保存更新后查看前台,效果再次实现。

我们添加的列自定义class被加在了列的box中

掌握了行和列的css自定义添加,这时候又一个难题出现了

如果两个文本块均在同一个行中出现,后台编辑效果如下图

 

这时候类名又再次重叠在一起

这时候可以添加元素中的自定义类名

选择下面的模块点击绿色的小铅笔进入编辑

在文本块设置中的附加class名字加上自定义类名

将代码修改为

.onion .tyga .quavo .wpb_wrapper{

font-size:20px;

}

样式效果再次区分

因此自定义class样式可以从行 列 元素中分别添加

元素中的自定义class样式可控范围最小

元素自定义ID的填写形式也是如此

用法与class相同

在实际运用中你需要思考最简化的写法来增加你的自定义class/id,避免冗余重复的代码。

 

深度阅读:

【WP可视化编辑器】交互式横幅2-interactive banner 2 预览地址 https://ultimate.brainstormforce.com/info-circle/作用 创建动态图文信息展示模块,一共有12种风格。预览后台 ...
【WP可视化编辑器】信息横幅-info banner 预览地址:https://ultimate.brainstormforce.com/info-banner/ 作用:信息介绍加上背景图片又加上可了解更多按钮,一共有两种风格 预览:后台: ...
可视化编辑+交互式横幅2+Interactive Banner 2 预览地址:https://ultimate.brainstormforce.com/interactive-banner-2/ 作用:有12种效果图,对文字、图片、线条进行动画修饰,一般用来做广告部分 预览效果: ...
【WP可视化编辑器】Stats Counter-计数器 作用:图标加可跳转的数字,图标有字体图标管理和自定义两种模式,数字刚打开网页时会从0开始跳转到你设置的数字预览地址:https://ultimate.brainstormforce.com/stats-counter/预览:后台: ...
WP可视化编辑器】信息框-info-box 预览地址: https://ultimate.brainstormforce.com/info-box/ 作用: 对信息的展示,图标的形状多样,鼠标经过图标时图标有个动画效果,标题和内容呈上下排列 预览效果:后台: ...
【WP可视化编辑器】只是图标-Just Icon 预览地址: https://ultimate.brainstormforce.com/just-icon/ 作用: 图标类型多样,在网站底部可以用到,鼠标经过时有一个提示的文字,可以控制文字出现的位置 预览效果:后台:...
【WP可视化编辑器】信息表-Info-Table 预览地址: https://ultimate.brainstormforce.com/info-table/ 作用: 将信息以表格式的形式输出,为上下布局可以插入图片,设计风格多样化,可以用来展示个人信息 预览效果:后台: ...
【可视化编辑器】timeline-时间轴 作用:在一条直线上,标注一点加背景图片文字,描述一个事件或一个物体,形成坐标轴,坐标轴按时间来排序预览地址:https://ultimate.brainstormforce.com/timeline/预览:后台: ...

发表评论

电子邮件地址不会被公开。 必填项已用*标注

wechat logo