用UX Bulider自建页面

3 min read

Flatsome内置了一个用户友好的可视化编辑器——UX bulider，也称作用户体验生成器，它可以让你从站点的前端设计页面。

UX bulider 像是玩拼图一样，自己建立很多内容拼图，再用拖拉的方式来改变排版，几乎所见即所得，而且它有预设很多互动元素，让你直接插入使用，非常方便。

使用UX搭建页面的思路是先布局（Layout），再填充内容（Content）。

Flatsome主题元素库中，自建元素只有很多种。现在我们开始介绍这些元素的用途和功能。

Layout—— 布局元素设置 #

Section：段落布局 #

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

共有18种Section预设样式，你可以选择任意一种你喜欢的段落布局。

默认
黑底默认
白底分栏
白底居中
黑底顶部箭头
黑底右侧元素框+文本
黑底左侧元素框+文本+按钮
白底右侧元素框+文本
白底左侧元素框+文本
白底左侧媒体框+文本+按钮
白底右侧媒体框+文本+按钮
白底左侧大媒体框+文本+按钮
白底右侧大媒体框+文本+按钮
黑底右侧大媒体框+文本+按钮
黑底左侧大媒体框+文本+按钮
白底媒体框居中+两侧文本
白底顶部媒体框+下面文本
白底底部媒体框+上面文本

section布局可以包含除本身外的所有元素。

通常系统会自动选择第一个Default（默认），模式中 Dark 为黑底白字、 Light 为白底黑字。点击section 的齿形工具栏就可以设置section ，在这里面你能够设置区块的背景图、视频、文字。

Row：行、排的布局 #

与Section 布局一样， Row也是布局的一种容器，容器里面还可以放置其他元素。Row的预设样式共有14种。

分别以不同的Column（栏、列）来划分不同的样式，比如：1栏、2栏、3栏、4栏；

还有以栏目元素框的大小来划分：右侧大栏、左侧大栏；

栏目以虚线框全宽展示的Row样式：虚线全宽两栏、虚线全宽三栏；

栏目有媒体框的：左侧媒体框、右侧媒体框；

还有3栏向下投影的、6栏虚线分割的。

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

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

Columns：栏、列，Row内的布局元素 #

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

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

Slider:滑块、滑动的布局 #

当你在元素库中添加一个Slider时，你会进入到它的设置页面，如下图所示的左侧黑色栏，在那里面，你可以随意设置此滑块的背景颜色、宽度等。

在这个页面，同时还可以为Slider添加包含的元素，下面动画中的最后一张就是你可以在Slider布局中选择的元素。

Slider可以单独成为一种布局格式，也可以在被包含在Column 、 Section 之中。

Grid：网格的布局 #

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

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

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

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

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

Navigation（导航的布局）、 Page Header（页首的布局）、Block（区块的布局） #

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

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

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

Content——内容元素设置 #

Banner :横幅 #

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

Banner 元素共有16种样式，基本上是以文本颜色（黑、白）和文本位置分类的。文本颜色与横幅底色相反，默认为黑底白字或白底黑字。横幅底色一般可以忽略不计，因为你在其上添加的图像会自动覆盖样式底色，在设置中，你可以为你的图像添加背景颜色—Overlay。

这16种样式分别是：黑底空白、黑底简单中心、黑底左边、黑底右边、黑底左边文本+按钮、黑底右边文本+按钮、白底文本+按钮在左边、白底文本+按钮在右边、白底左边文本框、黑底右边白底文本框、左边黑底文本框、右边黑底圆形文本框、大甩卖横幅、售卖标语、带有泡泡的售卖标语、简单的售卖标语。

如下图所示，我们将选择默认的Blank样式来创建一个静态Banner，其中我们挪动了文本位置和背景颜色。当然你还可以在左侧黑框Banner设置栏中更改其他选项设置，比如高度、背景效果、链接等。

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

如上图所示我们可以拖动文本框来改变其在Banner 中的位置。

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

通常我们会在网站的首页有一个滑动的横幅，制作过程如下图所示：

Text ：文本 #

Text 内容元素共有10种预设格式，默认一般是段落，不过还有：引导段落、带有标题的段落、带有副标题的段落、标题、标题大写、带有副标题的标题、图片在左边的段落和标题、图片在右边的段落和标题、引用段。

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

在此文本编辑框中，我们要认识Formats（格式）功能，它其中包含了：

链接样式（Link styles）
动画效果（Animations)
动画延迟（Animations-Delay）
能见度（Visibility）
不透明度（Opacity)
行高（Line Height）
填充像素（Padding）
文本颜色（Text Color）
文字背景（Text Background）
列表格式（List Styles）
一般我们列举会有：简单的圆点列表清单（这里使用）和编号清单列表（数字编号列表）。这里的列表格式还包括了三种不同的列表样式：打对号项目清单、箭头项目清单和星标项目清单。
带领文本格式（Lead Text）
计数（Count Up Number）
大写（UPPERCASE）
花式下划线（Fancy Underline）
细字体（Thin Font）
替代字体（Alternative Font）

Icon Box：图标框 #

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

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

Gap：间隔 #

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

Image：图像 #

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

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

Image Box：图像框 #

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

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

Gallery：画廊 #

Gallery就是将几张相同尺寸大小的图片排列在一起，形成画廊一样的图片内容模式，整体的摆放在 Gallery 设置里，你可以选择每行显几列图片，画廊的展示方式到底是选择滑块、排列、还是网格状。

countdown：倒计时 #

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

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

补充说明一句：倒计时一般是为了展示节日促销活动而有的专门倒计时样式，而只有B2C店家才会经常有降价优惠活动，B2B企业是不会有促销的，他们都是批量定制生产产品。

Tabs：标签 #

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

Button：按钮 #

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

How can we help you?