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

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

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

点击右上角小铅笔

行拉伸选项 选择拉伸行

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

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

深度阅读:

【WP可视化编辑器】动画区块-Animation Block 预览地址: https://ultimate.brainstormforce.com/animation-block/ 作用: 动画的样式多样,可以自行调整动画效果,给一些模块添加动画会给人视觉体验更佳 预览效果:后台: ...
【WP可视化编辑器】标题-Heading 预览地址: https://ultimate.brainstormforce.com/heading-2/ 作用: 给内容添加标题,可以对标题和字标题进行分割,一般用在文章内容较多 预览效果:后台: ...
【WP可视化编辑器】信息横幅-info banner 预览地址:https://ultimate.brainstormforce.com/info-banner/ 作用:信息介绍加上背景图片又加上可了解更多按钮,一共有两种风格 预览:后台: ...
【WP可视化编辑器】花式文字-Fancy Text-Slideup 预览地址: https://ultimate.brainstormforce.com/text-slideup-effect/ 作用: 对文字做的一些处理加入了滚动的动画,可以用在一些数据上,对数据进行滚动,或是用在用户量上,给用户一种更直观地体验。 预览效果:后台:...
【WP可视化编辑器】DIVIDER-DIVIDER 预览地址: http://massive.mpcthemes.net/divider/ 作用: 对标题与内容进行分割,也可以添加图标在分割线上,可以对宽进行设置,样式效果有9 种 预览效果:后台: ...
【WP可视化编辑器】模态框-modal 预览地址: https://ultimate.brainstormforce.com/modal/ 作用: 出现一个模态框,可以将模态框的显示放在一些元素上,比如button,img,文字或者页面加载时弹出模态框 预览效果:后台: ...
【VC可视化编辑器U拓展】信息列表 Info-List 作用:对信息进行左右对称排列展示,在显示的过程中增加一些动画,图标的形状多样,对图标和文字进行美观排序。预览效果:样式1样式2   ...
【WP可视化编辑器】只是图标-Just Icon 预览地址: https://ultimate.brainstormforce.com/just-icon/ 作用: 图标类型多样,在网站底部可以用到,鼠标经过时有一个提示的文字,可以控制文字出现的位置 预览效果:后台:...

发表评论

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

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