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

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

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

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

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

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

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

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

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

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

选择标题元素

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

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

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

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

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

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

我们这里选择线

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

保存后刷新

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

我们继续回到后台设置

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

刷新后查看前台样式

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

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

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

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

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

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

我们分别在下方填写10px

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

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

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

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

深度阅读:

【WP可视化编辑器】标题-Heading 预览地址: https://ultimate.brainstormforce.com/heading-2/ 作用: 给内容添加标题,可以对标题和字标题进行分割,一般用在文章内容较多 预览效果:后台: ...
VC如何给row添加类名或id 许多wordpress新手在写css样式的时候会发现,基于VC模块的HTML结构中会存在大量重复的类名,比如wpb_wrapper、wpb_column等。如果直接使用该选择器,将会导致所有重复的类名均有该效果。WP花园洋葱在这里教一个手动在row中添加类名的方法,可以方便使你的代码在你想实现的效果...
Visual Composure建站教程5 – 如何添加全宽的行 【教学目的】一般的行元素模块,都遵循盒子模型(box),浏览器两边会留白,有时候需要设置全宽的行元素,让样式更加美观,比如你在用一张图片做背景的时候,当然不希望两边留白。这个时候你仍然存在一个疑惑,为什么当前的行模块背景图只是一个局部居中的背景,而不是一个全宽的背景。这时候就涉及到行模块的基...
Visual Composure建站教程6 – 如何添加常用的静态元素 【教学目的】开始教大家使用一些常见的静态VC元素,包括文本元素、图片元素等。首先,选择添加行元素其次选择你想要的风格布局左侧选择单张图片模块单张图片设置 在图片+号处打开媒体库选择/上传图片图片尺寸手动填写full 保存修改。...
【WP可视化编辑器】价格框-price-box 预览地址:https://ultimate.brainstormforce.com/price-box/ 作用: 有6种展示的风格,对商品的套餐,价格,简介进行展示,为用户提供一个连接按钮,可用作加入购物车或购买 预览效果:后台:...
WP可视化编辑器】信息框-info-box 预览地址: https://ultimate.brainstormforce.com/info-box/ 作用: 对信息的展示,图标的形状多样,鼠标经过图标时图标有个动画效果,标题和内容呈上下排列 预览效果:后台: ...
【WP可视化编辑器】模态框-modal 预览地址: https://ultimate.brainstormforce.com/modal/ 作用: 出现一个模态框,可以将模态框的显示放在一些元素上,比如button,img,文字或者页面加载时弹出模态框 预览效果:后台: ...
Visual Composure建站教程7 – 如何添加团队成员 【教学目的】 让大家理解一般的静态模块和动态调用模块的区别。团队成员模块属于VC中的调用模块。所谓调用模块,言下之意为从别处调取数据过来使用。也就是说在VC元素中的调用模块设置,会从其他地方读取数据进行展示。而VC的调用模块设置只是用来设置被调用过来的数据的样式及结构。调用模块的意义...

发表评论

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

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