许多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可视化编辑器】只是图标-Just Icon 预览地址: https://ultimate.brainstormforce.com/just-icon/ 作用: 图标类型多样,在网站底部可以用到,鼠标经过时有一个提示的文字,可以控制文字出现的位置 预览效果:后台:...
【WP可视化编辑器】高级按钮-advanced-button 预览地址: https://ultimate.brainstormforce.com/advanced-button/ 作用: 对按钮做的一些动画,可以给按钮的内容添加蒙版、阴影等,再加上一些特效让按钮具有3D感,体验效果比较好 预览效果:后台: ...
Visual Composure建站教程3 – 如何创建一个行 概念:行(row)是VC编辑器最重要的一个模块,它是所有模块的载体。其作用是为所有的模块提供布局,同时兼顾响应式设计,手机端布局。该布局遵循12栅格布局。即为将整个页面划分成相同大小的12列。可在行内内嵌一层行。使用方法:点击添加元素,选择行(row)。会出现一个空白的行模块。 ...
【WP可视化编辑器】价格框-price-box 预览地址:https://ultimate.brainstormforce.com/price-box/ 作用: 有6种展示的风格,对商品的套餐,价格,简介进行展示,为用户提供一个连接按钮,可用作加入购物车或购买 预览效果:后台:...
【WP可视化编辑器】模态框-modal 预览地址: https://ultimate.brainstormforce.com/modal/ 作用: 出现一个模态框,可以将模态框的显示放在一些元素上,比如button,img,文字或者页面加载时弹出模态框 预览效果:后台: ...
Visual Composure建站教程4 – 如何给行添加背景色/背景图 【教学目的】如果没有背景图,每一行都是白色,网页会非常单调,所以这个章节将教大家如何给行元素添加背景色或者图片。点击行右上角的小铅笔进入行编辑。行样式选择第二个,Default VC。随后选择行设置下的第二个设计选项。你会看到有一个背景(Background-...
【WP可视化编辑器】图片分割-image-separator 预览地址:https://ultimate.brainstormforce.com/image-separator/ 作用: 图片的显示层在文字上方,可以添加动画,在窗口的显示位置 预览效果:后台: ...
【WP可视化编辑器】button-BUTTON-M 预览地址: http://massive.mpcthemes.net/button/ 作用: button按钮有13种样式,每种样式都用不同的动画做处理,让用户体验更佳 预览地址:后台: ...

发表评论

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.