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

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

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

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

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

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

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

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

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

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

选择标题元素

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

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

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

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

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

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

我们这里选择线

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

保存后刷新

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

我们继续回到后台设置

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

刷新后查看前台样式

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

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

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

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

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

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

我们分别在下方填写10px

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

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

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

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

深度阅读:

【WP可视化编辑器】交互式横幅-Interactive-Banners 预览地址:https://ultimate.brainstormforce.com/interactive-banners/ 作用: 图片文字在同框内展示,鼠标进过时,对图片覆盖一个蒙版,或对图片进行一个缩放 预览效果:后台:...
【WP可视化编辑器】价格框-price-box 预览地址:https://ultimate.brainstormforce.com/price-box/ 作用: 有6种展示的风格,对商品的套餐,价格,简介进行展示,为用户提供一个连接按钮,可用作加入购物车或购买 预览效果:后台:...
【WP可视化编辑器】信息圆-Info-Circle 预览地址: https://ultimate.brainstormforce.com/info-circle/ 作用: 进行展示信息,将需要展示的信息放在圆的周围,当鼠标经过时,展示的信息在圆心显示 预览效果:后台: ...
可视化编辑+交互式横幅2+Interactive Banner 2 预览地址:https://ultimate.brainstormforce.com/interactive-banner-2/ 作用:有12种效果图,对文字、图片、线条进行动画修饰,一般用来做广告部分 预览效果: ...
【WP可视化编辑器】交互式横幅2-interactive banner 2 预览地址 https://ultimate.brainstormforce.com/info-circle/作用 创建动态图文信息展示模块,一共有12种风格。预览后台 ...
【WP可视化编辑器】Icon-Icon-M 预览地址: http://massive.mpcthemes.net/icon/ 作用: 有8种效果,对图标的处理,添加蒙版,偏移,文字提醒等 预览效果:后台: ...
【WP可视化编辑器】动画区块-Animation Block 预览地址: https://ultimate.brainstormforce.com/animation-block/ 作用: 动画的样式多样,可以自行调整动画效果,给一些模块添加动画会给人视觉体验更佳 预览效果:后台: ...
Visual Composure建站教程7 – 如何添加团队成员 【教学目的】 让大家理解一般的静态模块和动态调用模块的区别。团队成员模块属于VC中的调用模块。所谓调用模块,言下之意为从别处调取数据过来使用。也就是说在VC元素中的调用模块设置,会从其他地方读取数据进行展示。而VC的调用模块设置只是用来设置被调用过来的数据的样式及结构。调用模块的意义...

发表评论

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

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

wechat logo