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

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

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

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

保存更新后的前台样式。

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

保存后更新前台样式。

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

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

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

 

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

深度阅读:

Visual Composure建站教程5 – 如何添加全宽的行 【教学目的】一般的行元素模块,都遵循盒子模型(box),浏览器两边会留白,有时候需要设置全宽的行元素,让样式更加美观,比如你在用一张图片做背景的时候,当然不希望两边留白。这个时候你仍然存在一个疑惑,为什么当前的行模块背景图只是一个局部居中的背景,而不是一个全宽的背景。这时候就涉及到行模块的基...
WP可视化编辑器】信息框-info-box 预览地址: https://ultimate.brainstormforce.com/info-box/ 作用: 对信息的展示,图标的形状多样,鼠标经过图标时图标有个动画效果,标题和内容呈上下排列 预览效果:后台: ...
【WP可视化编辑器】高级轮播-advanced-carousel 预览地址: https://ultimate.brainstormforce.com/advanced-carousel/ 作用: 对事物进行轮播,在规定时间内将设定好的元素,以...
Visual Composure建站教程3 – 如何创建一个行 概念:行(row)是VC编辑器最重要的一个模块,它是所有模块的载体。其作用是为所有的模块提供布局,同时兼顾响应式设计,手机端布局。该布局遵循12栅格布局。即为将整个页面划分成相同大小的12列。可在行内内嵌一层行。使用方法:点击添加元素,选择行(row)。会出现一个空白的行模块。 ...
Visual Composer元素细化举例分析:修改和润色VC中元素字体大小、间距和样式 VC中存在非常多的元素。每个元素的功能都不尽相同。对于一个新手来说,看到这么多元素,会出现很多疑惑,不知道什么元素能实现什么功能,什么元素实用,是否要掌握其中所有的元素用法。但其实你只需要掌握其中10%的元素用法,就可以掌握剩余90%的元素用法。每个元素间的设置、用法道理均是相通的。...
【WP可视化编辑器】Stats Counter-计数器 作用:图标加可跳转的数字,图标有字体图标管理和自定义两种模式,数字刚打开网页时会从0开始跳转到你设置的数字预览地址:https://ultimate.brainstormforce.com/stats-counter/预览:后台: ...
Visual Composure建站教程7 – 如何添加团队成员 【教学目的】 让大家理解一般的静态模块和动态调用模块的区别。团队成员模块属于VC中的调用模块。所谓调用模块,言下之意为从别处调取数据过来使用。也就是说在VC元素中的调用模块设置,会从其他地方读取数据进行展示。而VC的调用模块设置只是用来设置被调用过来的数据的样式及结构。调用模块的意义...

发表评论

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

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

wechat logo