Flatsome 主题使用教程

摘要:当我们熟知Flatsome是WordPress主题的最好选择之一时,接下来就是安装和使用它了。在Themeforest上购买此付费主题,安装到WordPress只需要5分钟时间。但是,最难的部分就是如何使用Flatsome,因为它里面包含了太多的元素,让刚开始打理自己网站的新手们去一一实验摸索是一件很费劲的事。

因此,本篇文章专门针对诸位”有识之士“(明白Flatsome确实是个不错的主题的各位站长们)编写的Flatsome主题使用教程。


Flatsome主题一直是我们最受欢迎的WordPress主题之一。它是个多用途主题,最重要的特点之一就是为了与免费的WooCommerce插件集成以运行电子商务站点。默认情况下,Flatsome将在标题中显示购物车图标,并具有许多选项,可轻松地展示所有WooCommerce产品。

如果你不是运行电子商务网站,Flatsome也完全可以满足你的需求,其功能多样,你可以将此主题用于商业、投资组合和任何其他类型的网站。因为它的优点实在是太多,主要是页面简洁、代码干净而且网速非常快。

Flatsome WordPress主题由UX主题团队(UX Themes)设计、开发和维护,是Themeforest上最受欢迎和评级最高的主题之一,销售额超过30,000。UX团队的目标是设计易于使用和可自定义的主题。

当然,我也用它创建了很多网站。

现在,我就开始给大家介绍WordPress主题Flatsome的使用教程,让大家开始学习认识此主题中的所有功能,以便你轻松地用它来创建自己需要的网站样式。

在这之前,你首先要了解的事情就是Flatsome 是一个可以高度定制的主题,因此,本篇文章就围绕“定制”来展开。


Flatsome主题使用教程主要分为三大部分:

认识主题选项设置

运用 Flatsome studio创建页面布局模板

UX bulider 自建并布局页面


主题选项设置 

Flatsome 是WordPress主题商城中的一种主题,后台使用 UX bulider 编辑器进行搭建,支持在线模板导入和网站元素导入。

每个Flatsome 主题下都有很多种模板可供选择(下面要讲的 运用 Flatsome studio创建页面 ),但是呢,每个模板都是基于 Flatsome 主题 之下的,因此页首和页尾都是 Flatsome 自有默认模式,不会发生变化。所以我们要提及主题选项设置的更改,因为它可以让你的网站更加的与众不同,并且具有自己独特的元素和风格。

现在我们先来说说什么属于主题选项设置的部分,这就涉及到网站的四大组成部分了。

网页的四大组成部分

如上图所示,为了好区分和学习网页的编辑设置,我们把网页分为四大区域:页中的内容(Content)、侧边栏(Sidebar)、页首(Header)和页尾(Footer)。

  • 内容:运用 UX bulider 编辑器进行自建的网页内容或者从 Flatsome studio 调用的模板内容
  • 侧边栏:有可能是隐藏的,也有可能是显示的(图中用细虚线表示)。侧边栏可能显示一些最新文章、文章分类等,每个项目都称为小工具(widgets)。
  • 页首:通常包括左边的Logo(默认为 Flatsome 的 Logo )和右边的导航或搜索框之类的。
  • 页尾:图中有两部分页尾,分别是粉红色和绿色。粉红色一般是放小工具的地方,绿色部分一般是会放权限之类的内容。

其中页首和页尾就是 Flatsome 主题的默认模式,任你选择哪一种模板或者怎样自建内容布局,它们两大部分都不会发生改变。当然,除非你更改主题选项设置。
关于主题选项设置的内容有很多,我们在这里就不一一细述,你只需要知道它们在你的网站中起什么作用就可以了。
如果你想看,我们有专门介绍 Flatsome 主题选项设置的文章,只需要点击查看即可。

Flatsome studio里调用模板

UX主题在3.0版本之后启动了 Flatsome Studio 的功能。在此之前,网站所有者都必须形象化页面布局并使用UX bulider 设计。

Flatsome Studio 包含了数百种网站类别模板,请看下图。

为了方便起见,我们列出 Flatsome Studio 中所包含的模板类别。

  • 最新的
  • 关于我们
  • 横幅
  • 号召行动
  • 公司
  • 分类
  • 客户
  • 联系我们
  • 倒数时间
  • 电子商务
  • 整页,满版布局
  • 画廊
  • 网格元素
  • 页头
  • 信息卡
  • 服务/图标
  • 报名
  • 滑块
  • 我们的团队
  • 证明书/介绍信
  • 文本
  • 影像

这些类别就是你的网站的组成部分,在使用它们时,你只需要将几种类别组合起来,就是一个完美的网站类型了。比如,一般的网站都会需要页头、联系我们、关于我们等,你需要在这三种类别的模板中挑选一个你喜欢的元素添加到你的网站,那么,网站的这三部分设计就不用你花费心思去研究啦。

由此可以看出,要想使网站拥有一个完美的外观 ,你只需要从 Flatsome Studio 中选择一个符合你需求的网站模板即可。而且其中的元素板块你还可以用 UX bulider 自定义,是不是很方便呢?

现在我们来看如何利用 Flatsome Studio 建立一个网站。

1.点击Edit with UX Bulider

要使用UX Builder,需要新建一个空白页面或文章,并且确定好标题。创建页面后,可以从页面后端或前端访问页面构建器。

页面后台
页面前端

2.打开 Flatsome Studio

启用UX Builder 之后,就开始布局页面了。点击下对方的添加元素,就可以为你的网站增砖添瓦了。如下图所示:

下图是进入内容布局的界面,你可以看到它上面有个Flatsome Studio选项出现在网站元素的顶部, 按下按钮以启用Flatsome Studio模式。

3.导入网站所需模板

现在,你进入到Flatsome Studio里,在左边的分类栏里面找到所需要的模板。鼠标所到之处模板方格会高亮,而且模板视图上面有两个选项:预览没和导入。

预览有助于实时查看元素。导入将在页面上添加元素。

要导入模板,只需要按“导入”键即可。

import

开始导入模板之后,会有系统提示你是否同时导入模板中的图片,默认是导入图片的,不过导入图片会比较慢;没有图片,纯板块元素导入速度会比较快。

5.更新页面

导入之后你就可以在页面前端看到你的模板了,不过要记得更新。

现在你就可以在你的模板里面添加内容了,如果你想要更改模板中的元素也是可以的,这就需要以下我们用 UX Bulider 自定义网站了,请接着往下看,这才是重头戏。

UX Bulider 自建页面

Flatsome内置了一个用户友好的可视化编辑器——UX bulider,也称作用户体验生成器,它可以让你从站点的前端设计页面。
UX bulider 像是玩拼图一样,自己建立很多内容拼图,再用拖拉的方式来改变排版,几乎所见即所得,而且它有预设很多互动元素,让你直接插入使用,非常方便。

使用UX搭建页面的思路是先布局,再填充内容 。

由上图可以看出Flatsome主题元素库中, 自建元素只有很多种。现在我们开始介绍这些元素的用途和功能。

Layout—— 布局元素设置

  1. Section(段落的布局)
  2. Row(行、排的布局)
  3. Slider(滑块、滑动的布局)
  4. Grid(网格的布局)
  5. Navigation(导航的布局)
  6. Page Header(页首的布局)
  7. Widget Area(小工具/小部件区域的布局)
  8. Block(区块的布局)

Section:段落/部落布局

Section是元素中层级最高的、包容性最强的一种布局,通常显示在最外层。

共有18种 Section 样式,见下图。 你可以选择任意一种你喜欢的段落布局。通常系统会自动选择第一个Default(默认),模式中 Dark 为黑底白字、 Light 为白底黑字。

由上图可以看出:section布局可以包含除本身外的所有元素。

点击section 的齿形工具栏就可以设置section ,在这里面你能够设置区块的背景图、视频、文字。

Row:行、排的布局

与Section 布局一样, Row也是布局的一种容器,容器里面还可以放置其他元素。
共有14种Row 样式,见下面第一张图。每种样式下都是以栏目( column )分类的。

点击工具栏 Row 齿轮图标的自定义选项即可进入Row设置界面,在Row设置里能够设置行内每个栏目的间距、栏目的背景颜色、容器的宽度,行内模块的对齐原则等。

点击 column 齿形图标即可进入 column 布局。

Column : Row内的布局元素

Column 是Row内的布局元素, 可随意调整布局宽度,一行总和不超过12, 遵循12栅格原则。

但是,Column 里可以包含所有 Flatsome 主题里的自定义元素。可以说,它是 Section 的缩小版。

Slider:滑块、滑动的布局

Slider可以单独成为一种布局格式,也可以在被包含在Column 、 Section 之中。 它可以随意设置背景颜色、宽度等 。

Grid:网格的布局

Grid是一种多网格空间排版的布局样式 ,共有9种预设格式。

可在布局内添加banner、image,布局样式可以套用slider,可以随意调整高度,宽度,间距,阴影等。

Widget Area:小工具/小部件区域的布局

小工具、小部件区域指的是网站页面的“关于、最新的、分类、活动”等之类的东西,而这些东西一般会在侧边栏展示,或者是展示在网页末尾。

与以上布局方式不同的是,Widget Area的布局没有包含元素,他也没有被包含在某一种布局中,是单独存在的。

Navigation(导航的布局)、 Page Header(页首的布局 )、Block(区块的布局)

这三种布局方式都是单独的模块,它们是网页中的特定部分,不包含元素。

在他们其中的设置中可以自定义相关选项,比如:你可以设置页首是否显示标题、对齐方式等。

而Block(区块)是你在仪表盘菜单的UX Blocks中添加了要使用的区块之后,在网页中才可以使用。

区块页面
在网页区块元素中选择已有的区块

Content——内容元素设置

  1. Banner (横幅)
  2. Text (文本)
  3. Icon Box(图标框)
  4. Gap(间隔)
  5. Image(图像)
  6. Image Box(图像框)
  7. Gallery(画廊)
  8. countdown(倒计时)
  9. Tabs(标签)
  10. Button(按钮)

Banner :横幅

Banner 的中文翻译为“横幅”,顾名思义,就是一种图文结合的内容元素设置,而内容元素设置不同于布局元素设置,它是展现模块内的内容元素的一种设置,而不是模块的布局。

Banner 元素共有18种样式,基本上是以横幅底色和文字排版分类的,分别是:空白、简单中心、左边、右边、按钮在左边、按钮在右边、白底左边、白底右边、左边文本框、右边文本框、左边黑色文本框、右边黑色环形文本框、大甩卖横幅、售卖标语、带有泡泡的售卖标语、简单的售卖标语。

如下图所示:我展示的是Left Light样式。你可以自由选择。并且在 Banner设置中修改横幅高度、背景图片、底色、增加链接等自定义选项。

Text Box: Banner 中自带的的文本编辑框

你可以设置文本框的相对宽度及整体字体大小、通过位置设置定位文本框在banner中的位置。 Text Box中还可以添加图片元素。
效果如下:

Banner 中自带的的文本编辑框

Text :文本

Text 内容元素指的就是纯文本内容,共有10种预设格式,默认一般是段落,不过还有:主管段落、带有标题的段落、带有副标题的段落、标题、标题大写、带有副标题的标题、图片在左边的段落和标题、图片在右边的段落和标题、引用段。

Flatsome主题的文本编辑器

Text 元素的设置就是 Flatsome主题的文本编辑器 ,无论你选择哪一种文本样式,你将在上图的编辑框中进行标题或段落文本的编辑。
在此编辑框中,你当然可以实现所有文字的形式,包括字体大小,加粗、斜线、链接、引用、对齐方式等。

Icon Box:图标框

图标框是没有其他样式可以选择的,因为它就是图标和文本的结合内容,如下图所示:

在Icon Box的设置里,你可以选择添加图标并且设置图标的对齐方式、宽度,还有文本大小等。Icon格式可以是PNG或SVG。

Gap:间隔

Gap就是设置页面的间隔,在 Gap设置里,你可以随意设置Gap的高度,但无法单独设置Gap的颜色,但可以套用在section中。

Image:图像

Image就是图像元素了, 插入图像,可以随意设置图像的宽度、高度、背景,也可以给图片附上跳转链接。

图像也是单独的元素,在图像里面没有可插入的元素,如果你想插入文本的话,请选择Image Box。

Image Box:图像框

Image Box是图片与文本结合在一起的内容组合元素。

在其设置里,你可以自由选择图像框的风格,这风格中包括文本框的放置位置、文本框中文本的对齐方式、字号大小等。

Gallery:画廊

Gallery就是几张图片排列在一起,形成画廊一样的图片内容模式,在 Gallery 设置里,你可以选择每行显几列图片,画廊的展示方式到底是选择滑块、排列、还是网格状。

但是,值得注意的是,在Gallery里,你所选择的图片要想整齐的展示,必须是一样大小的,不然大小差异太大会很难看的,。

countdown:倒计时

countdown本身就是倒计时,同时它也指的是页面上的倒计时内容,当你想在你的网站上展示倒计时时间时,你可以使用这个内容元素。

在其设置里,你可以自定义时间和展示方式(时钟还是文本)。

计时器

Tabs:标签

你可以在总标签下添加子标签,并且标签下面还有标签仪表板供你选择其他元素。
如下图,第三个子标签—美甲下面就选择了Slider(滑块布局),在 Slider 里面你又可以选择Banner、Image、Logo这三种内容元素和Section、Row、Grid这三种布局元素。

Button:按钮

按钮元素 Button 的预设样式共有10种,你能选择适合你的预设样式, 在每一种样式下 你都可以设置相应的数值,比如:按钮名称、是否添加图标、图标的对齐方式、字体大小等。

按钮设置

好啦,本篇 Flatsome主题使用教程 就先讲解到这里啦,希望能够给到大家帮助。

发表评论

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