Visual Composure建站教程5 – 如何添加全宽的行

【教学目的】一般的行元素模块,都遵循盒子模型(box),浏览器两边会留白,有时候需要设置全宽的行元素,让样式更加美观,比如你在用一张图片做背景的时候,当然不希望两边留白。

这个时候你仍然存在一个疑惑,为什么当前的行模块背景图只是一个局部居中的背景,而不是一个全宽的背景。这时候就涉及到行模块的基础规定。行模块的位置默认出现在页面的Box布局中。所谓Box布局,即为页面主内容视图的范围空间。页面两边会留有一定的空白,主内容出现于页面中央,如下图案例截图所示。

那么当你想实现全宽背景图/背景色样式,但不更改页面内容的Box布局样式,就像下图这样:

点击右上角小铅笔

行拉伸选项 选择拉伸行

保存并查看前台样式,背景图/背景色变成了全宽

深度阅读:

【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