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文章页添加星级评分功能 想要给自己插件,可以为你的WordPress网站的评论功能添加一个五星评分功能,用户在评论的时候,可以选择星级,提交以后,会在他的评论内容下方显示他的评分,管理员可以在后台评论编辑界面修改用户的评分。进入插件安装,搜索Fa Comment Rating。就是这款插件。点击启用...
Visual Composure建站教程1 – 如何进入vc编辑器模式 如果你想通过可视化拖拽模块的方式,在不写一行代码的情况下,搭建一个精美的
Visual Composure建站教程4 – 如何给行添加背景色/背景图 【教学目的】如果没有背景图,每一行都是白色,网页会非常单调,所以这个章节将教大家如何给行元素添加背景色或者图片。点击行右上角的小铅笔进入行编辑。行样式选择第二个,Default VC。随后选择行设置下的第二个设计选项。你会看到有一个背景(Background-...
wordpress主题中的call to action 模块是什么? 在大家使用转换率很重要的设计“ Call To Action Design”,但在讲 Call To Action Design 前,要先了解什么是 Call To Action 的定义。要学好一个设计,很重要的是先了解它的定义,因为定义会决定设计的范畴与解读。先来看 Call To Act...
多域名同内容的常见问题 网站在生存发展中会遇到很多问题,会因为各种原因产生不同的域名,而这些域名的内容却都是相同的。SEO产生负影响呢?我们收集了众多站长对多域名同内容的问题并进行了解答。问:多个域名同内容是否有利于提高百度站长平台对新旧网站进行验证,然后在网站改版工具中进行相应的操作,可以让“唯一域名”继承原域名...
wordpress betheme 主题下如何更改页脚背景颜色 页脚作为一个wordpress网站附加信息的功能。今天我们将要看到如何更改页脚背景及文本颜色首先点击外观---BeTheme选项,弹出如图页面,点击颜色--页脚,就可以编辑啦。不仅可以编辑页脚背景和文本颜色,还可以更改页脚主题颜色 页脚链接颜色等等。赶快改变一下你的页脚吧...
如何在wordpress中添加新浪微博秀 在插件,到底是怎么操作呢?直接看视频吧!立刻在你的

发表评论

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

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

wechat logo