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布局。

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

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

深度阅读:

在wordpress中添加图片弹出效果 Fancybox功能十分强大,效果十分绚丽的wordpress插件,几乎人人都在用!Fancybox自带许多jquery选项,熟悉jquery的朋友也可以速度上手。 P.S.这个教程是在论坛上(http://wordpress.org.cn/forum.php)有个网友向我提问fancyb...
WordPress主题制作教程1.1-什么是WordPress主题 WordPress主题会改变您的网站设计和布局。WordPress.org主题目录中有数以千计的免费WordPress主题,尽管有许多WordPress网站都使用自定义主题。    主题可以做什么? 主题采用WordPress存储的内容和数据,并将其显示在浏览器中。创建Wor...
如何使用插件将谷歌字体下载到自己的WordPress网站 不少 WordPress主题和插件都会使用到谷歌的字体,对于国内环境来说,很影响速度。使用 Self-Hosted Google Fonts 插件来实现自主托管所有网站使用的Google字体。Self-Hosted Google Fonts 将扫描您网站上的所有CSS,并自动下载必要的Google ...
在wordpress添加相关文章 通过WordPress Related Posts插件,在当前文章底部添加一些相关文章的列表,提高网站的粘稠度,让你的网站流量暴增!!!使用这款WordPress Related Posts插件,会根据tags,category以及相关的关键字,在文章结束之后列出一些和当前文章有关的文章,可以设定字...
如何隐藏wordpress更新提醒 wordpress总是更新,一个月来两次有木有! 看到更新信息很讨厌,或者你不希望你的客户看到更新信息然后手痒去点击,导致新版本的wordpress和已经安装的插件不兼容,结果整个网站崩溃掉... 所以你最好使用Hide update reminder这个插件阻止wordpress更新!...
WordPress中隐藏网页显示效果方法 WordPress中在进行后台搭建网站页面时,外来访问者可以在你搭建的同时访问你的网站,这会带来许多网站隐私上的不便。那么,我们可以通过如下插件Coming Soon Page & Maintenance Mode by SeedProd做一个前台展示的隐私处理。1.插件——添加插件...
【WP可视化编辑器】i悬停-iHover 预览地址: https://ultimate.brainstormforce.com/ihover/ 作用: 通过hover事件做出相应需要的动画效果,效果样式繁多,炫酷 预览效果:后台: ...
WordPress中如何修改网页中文章的固定链接 在WordPress中,当你在编辑文章的时候你会发现默认的文章名字会成为固定链接后缀名的一部分,使用中文的文章名,固定链接也会变成中文,形成乱码,再进行逐个的修改非常麻烦,下面有一种方法可以一次性设置所有的页面后缀名1.设置——固定链接——自定义结构 输入/%post_id%2.在下...

发表评论

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

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