Visual Composer元素细化举例分析:修改和润色VC中元素字体大小、间距和样式

VC中存在非常多的元素。每个元素的功能都不尽相同。对于一个新手来说,看到这么多元素,会出现很多疑惑,不知道什么元素能实现什么功能,什么元素实用,是否要掌握其中所有的元素用法。

但其实你只需要掌握其中10%的元素用法,就可以掌握剩余90%的元素用法。每个元素间的设置、用法道理均是相通的。学会了这些,你就可以实现在短时间内不写一行代码,做出一个精美的站点。

首先我将罗列出几个制作网站常用到的基础元素

行元素 – 必不可少的基础模块,是所有其他元素的容器

文本块 – 最基础的文本编辑模块

单张图片 – 基础的图片展示模块

空间 – 网页中的留白、间距,代码中的margin

通常使用上述几种元素就可以设计出一个图文结合,排列整齐的网站

但是通过使用那些基础元素后你会发现,元素支持的设置太少,无法实现自己想要的预期效果,这个时候需要自己手动写CSS修改。

其实你错了。VC存在大量的元素,其中预设的样式设置非常多样,只要你学会如何去细化设置元素,你可以得到很多现成的CSS样式。下面我将以标题元素进行举例。

选择标题元素

  • 标题中输入 “公司简介”
  • 子标题中输入“About Us”

然后保存修改,我们看看前台的样式会是什么样子

默认的标题大小是34px 子标题大小是15px,而且是居中显示,标题之间的间距很小。

我觉得这个标题样式太过单调,想增加一点线条感。

那么我们先回到后台的标题设置。

往下滚动,出现了一个叫分隔的设置标签。

我们这里选择线

这时候出现了5个额外设置,且都是针对线的样式设置

保存后刷新

可以看到默认的样式非常奇怪,且难看

我们继续回到后台设置

  • 将分隔位置选为标题和子标题之间
  • 线宽填入50
  • 线颜色改为灰色

刷新后查看前台样式

已经初具规模,但细节还需要调整

我们回到后台,在选项上方选择Typography,自定义你的标题及副标题样式

  • 在这里我勾选加粗
  • 字体大小些为32
  • 颜色改为蓝色
  • 子标题将大小改为18

得到了经过修饰的标题样式。但是标题之间的间距仍然非常拥挤。

我们回到后台,选择设置上方的Design

如下有三个设置,可以分别设置三个字段之间的间距

我们分别在下方填写10px

一个简单的标题样式就完成了

其他元素模块的设置思路亦是如此。设置下方的设置选项通常都是不同功能的修饰。

当你对某些样式不满意时,尝试选择/修改不同的样式设置,你会发现VC现有的基础模块功能之强大,大部分需要写代码来实现的效果只需调整选项即可实现。

深度阅读:

【WP可视化编辑器】交互式横幅2-interactive banner 2 预览地址 https://ultimate.brainstormforce.com/info-circle/作用 创建动态图文信息展示模块,一共有12种风格。预览后台 ...
【WP可视化编辑器】信息横幅-info banner 预览地址:https://ultimate.brainstormforce.com/info-banner/ 作用:信息介绍加上背景图片又加上可了解更多按钮,一共有两种风格 预览:后台: ...
可视化编辑+交互式横幅2+Interactive Banner 2 预览地址:https://ultimate.brainstormforce.com/interactive-banner-2/ 作用:有12种效果图,对文字、图片、线条进行动画修饰,一般用来做广告部分 预览效果: ...
【WP可视化编辑器】Stats Counter-计数器 作用:图标加可跳转的数字,图标有字体图标管理和自定义两种模式,数字刚打开网页时会从0开始跳转到你设置的数字预览地址:https://ultimate.brainstormforce.com/stats-counter/预览:后台: ...
WP可视化编辑器】信息框-info-box 预览地址: https://ultimate.brainstormforce.com/info-box/ 作用: 对信息的展示,图标的形状多样,鼠标经过图标时图标有个动画效果,标题和内容呈上下排列 预览效果:后台: ...
【WP可视化编辑器】只是图标-Just Icon 预览地址: https://ultimate.brainstormforce.com/just-icon/ 作用: 图标类型多样,在网站底部可以用到,鼠标经过时有一个提示的文字,可以控制文字出现的位置 预览效果:后台:...
【WP可视化编辑器】信息表-Info-Table 预览地址: https://ultimate.brainstormforce.com/info-table/ 作用: 将信息以表格式的形式输出,为上下布局可以插入图片,设计风格多样化,可以用来展示个人信息 预览效果:后台: ...
【可视化编辑器】timeline-时间轴 作用:在一条直线上,标注一点加背景图片文字,描述一个事件或一个物体,形成坐标轴,坐标轴按时间来排序预览地址:https://ultimate.brainstormforce.com/timeline/预览:后台: ...

发表评论

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

wechat logo