Visual Composer可视化编辑器是一个强大的可视化拖拽模块,它的强大之处不仅仅能够不写一行代码就能制作出一个精致的站点,同时也能够自适配响应式。本文将带你了解如何使用VC的列设置调整响应式布局。

问题】 如何使用VC元素的列设置修改响应式布局

我们在后台模块中编辑一个1/2+1/2的左图右文布局

这是pc端的展示样式

如果你还不会使用可视化编辑器作出以下布局,可以查看Visual Composure建站系列教程

这是手机端的展示样式

可见手机端的响应式自动进行了排列,且排列整齐。这是VC自适应的响应式布局。效果非常好。

但是,并不是所有的响应式适配都能完美自适应,有时候为了实现独特的PC端样式,行内元素的排列会较为复杂。相对的,自适应的响应式会出现一定的问题。这时候就需要对行中的内部列进行自适应选项。

 

【解决方案】案例解析

创建一个1/4*4布局,选择信息框元素

选择一个图标

填写标题及描述

框式样改为图标在上

你将得到如下布局

前台展示效果

这时候我们使用F12查看手机端的效果展示

呈现为自然垂直竖排的形式,这是VC自适应的响应式效果

这时我想对手机端的展示效果做一些修改,想让图标两两并排排,但不影响PC端原来的样式。这时可以使用列设置。

回到后台,点击列上的小铅笔进入列设置

选择自适应选项

修改最下方的宽度属性为 6列 – 1/2并保存

同样的,在另外三个列设置中都做同样的修改

你会发现,后台的1/4结构并没有改变,刷新后查看前台样式,PC端没有改变,手机端样式变成了1/2+1/2布局。

所有基于响应式的修改都遵循该修改原则,以修改列宽度的方式来修改手机端布局的样式。

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

发表评论

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

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

wechat logo