【教学目的】如果没有背景图,每一行都是白色,网页会非常单调,所以这个章节将教大家如何给行元素添加背景色或者图片。

点击行右上角的小铅笔进入行编辑。行样式选择第二个,Default VC。

随后选择行设置下的第二个设计选项。

你会看到有一个背景(Background-color)选项设置,点击可以选用不同的背景颜色,下方Alpha可调整背景色的不透明度。

保存更新后的前台样式。

背景图片的插入在背景颜色选项的下方,点击灰色的+号打开媒体库选择/上传背景图片。

保存后更新前台样式。

这时候你会发现背景图片仅仅出现了一小部分。

那是因为背景图片的高度由行内元素的高度所决定。尝试在行内添加空白格(Empty Space)

你会发现背景图片的高度随之增大了对应的高度。(空白格的用法将在系列教程的后期内容中展开描述)

 

专业网站开发网页设计公司

深度阅读:

【WP可视化编辑器】i悬停-iHover 预览地址: https://ultimate.brainstormforce.com/ihover/ 作用: 通过hover事件做出相应需要的动画效果,效果样式繁多,炫酷 预览效果:后台: ...
【WP可视化编辑器】Icon-Icon-M 预览地址: http://massive.mpcthemes.net/icon/ 作用: 有8种效果,对图标的处理,添加蒙版,偏移,文字提醒等 预览效果:后台: ...
【WP可视化编辑器】谷歌趋势-Google Trends 作用:显示谷歌趋势,图表类型有6种,如地图区域利益,表格区域利益等可以设置表格大小和位置等,整个模块是由表格数据和文字组成,一共有3种风格样式链接网址:https://ultimate.brainstormforce.com/google-trends/链接:后台: ...
【WP可视化编辑器】高级按钮-advanced-button 预览地址: https://ultimate.brainstormforce.com/advanced-button/ 作用: 对按钮做的一些动画,可以给按钮的内容添加蒙版、阴影等,再加上一些特效让按钮具有3D感,体验效果比较好 预览效果:后台: ...
【WP可视化编辑器】DIVIDER-DIVIDER 预览地址: http://massive.mpcthemes.net/divider/ 作用: 对标题与内容进行分割,也可以添加图标在分割线上,可以对宽进行设置,样式效果有9 种 预览效果:后台: ...
【WP可视化编辑器】交互式横幅2-interactive banner 2 预览地址 https://ultimate.brainstormforce.com/info-circle/作用 创建动态图文信息展示模块,一共有12种风格。预览后台 ...
Visual Composure建站教程3 – 如何创建一个行 概念:行(row)是VC编辑器最重要的一个模块,它是所有模块的载体。其作用是为所有的模块提供布局,同时兼顾响应式设计,手机端布局。该布局遵循12栅格布局。即为将整个页面划分成相同大小的12列。可在行内内嵌一层行。使用方法:点击添加元素,选择行(row)。会出现一个空白的行模块。 ...
VC如何给row添加类名或id 许多wordpress新手在写css样式的时候会发现,基于VC模块的HTML结构中会存在大量重复的类名,比如wpb_wrapper、wpb_column等。如果直接使用该选择器,将会导致所有重复的类名均有该效果。WP花园洋葱在这里教一个手动在row中添加类名的方法,可以方便使你的代码在你想实现的效果...

发表评论

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

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