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建站公司有哪些? 1、WordPress网站建设的目的必须明确。 你建设一个WordPress外贸网站到底是为了什么的?必须明确:WordPress网站建设的目的是为了用户访问,通过WordPress网站让客户了解到客户想要得到的东西,脱离了用户访问的站点就没有什么作...
青岛城市woocommerce外贸建站哪家好 青岛城市woocommerce外贸建站哪家好?这个没有统一的标准。不过可以给大家一些建议去筛选自己满意的服务商。一、看中价格高与低。 如果做网站本身没有多少预算,那么肯定要找便宜划算的。这点毋庸置疑。那么找个人或者工作室,并且靠谱一点的这是最佳选择。毕竟这些服务商相对来说成本费用低,价...
临沂woocommerce外贸建站哪家好 想要在临沂寻找一家靠谱的woocommerce外贸建站公司?网络建站需要哪些步骤?下面的资料可以给您提供一些帮助。 1、关于外贸建站的网站域名 woocommerce外贸建站的域名哪里注册?怎么注册?简单说下,woocommerce外贸建站的域名注册分为个人和公司,分别需要个人和公司的信...
昆明有好的WordPress网站建设公司或团队吗? 昆明有好的WordPress网站建设公司或团队吗?首先你选择用wordpress做网站就是一个明智之举,接下来专业做网站的WordPress花园提供的内容或许对您有帮助。一、先去网上搜一下,然后一家家的对比 在互联网时代,你也可以在网络上去了解一下各个wordpress网站建设...
邯郸选择woocommerce外贸建站需要注意哪些 随着目前互联网的发展趋势,企业网站已经和名片一样成为刚需,甚至于比名片都重要,因为这个是客户,合作伙伴,求职人员了解企业的第一站,也是第一印象建立的渠道。那么,邯郸的朋友如何选择一个邯郸的woocommerce建站公司?站在比较客观的角度,大概可以归纳为以下几点:第一步:邯郸woocomme...
贵阳wordpress建站哪家好? 贵阳wordpress建站哪家好?第一:你信任的、并且对网络行业、对技术了解的人给你的意见 支撑网站正常运行的后台管理技术、资讯实时更新技术、流量统计分析技术、在线沟通技术等等是关键。当然,可能建站团队都说他们有这些东西,那你就得擦亮眼睛了:这些东西是他们团队自己开发的吗?能不断升级更...
在台州如何使用wordpress进行网站建设 wordpress建站已是当今社会的主流,在台州的朋友们想问,在台州如何选择wordpress进行网站建设,可以参考下文一些尝试者对wordpress建站的看法。 在WordPress面前,台州Wordpress建站者的问题已经解决 95%以上的网站,都可以用WordPress配合优质主题快速搭...
广州专业的WordPress律师网站建设公司 大部分律师对于网站建设,其实是不太了解的,有的觉得做得好看高大上就行,有的觉得做了网站就能带来案源。但是目前网站建设公司那么多,价格也参差不齐,如何向服务商描述自己的需求,并且实现自己的想要的效果呢?这篇文章主要就是介绍对于律师来说,如何去做一个适合自己的网站,广州专业的WordPress律师网站建...

发表评论

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

wechat logo