Flatsomewordpress中的一种商城主题,后台使用UXbulider编辑器进行搭建。支持在线模板导入及元素导入。

 

2.1UX Builder可视化编辑器 – 导入模块

点击ux builder进行可视化编辑

 

点击Flatsome Studio 可以导入已经设计好的模块

 

Import – 导入你想要的模块。可以选择是否同时导入图片。(导入图片速度会相对慢一些)

Preview – 可以预览该模块。

 

2.2UX Builder可视化编辑器 – 页面设置

点击右上角的小齿轮设置页面模板类型。

我们一般使用第二个 Page – Full Width 全宽布局。

 

2.3UX Builder可视化编辑器 – 布局元素设置

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

以下均为布局样式,建议在搭建时以Section为一个block。

以下是常用布局的用法。

 

布局元素设置 – Section

Section – 是元素中层级最高的。(显示在最外层)

 

能够设置块的背景图/视频/文字黑白

Dark默认为黑底白字,Light默认为白底黑色

 

布局元素设置 – Row

Row – 布局样式的容器,只是个盒子。

 

能够设置行内模块的间距,容器的宽度,行内模块的对齐原则。

 

布局元素设置 – Column

Column – row内的布局元素,遵循12栅格原则。

 

可随意调整布局宽度,一行总和不超过12。

 

布局元素设置 – Grid

Grid – 布局样式。

 

可在布局内添加banner、image,布局样式可以套用slider

可以随意调整高度,宽度,间距,阴影等。

 

布局元素设置 – Slider

Slider – Column内的布局元素。

 

可以添加Banner、Image、图标,布局样式可以套用Section、Row、Grid

可以随意设置背景颜色、宽度等。

 

布局元素设置 – Widget Area

Widget Area – Column内的内容元素

 

可以选择显示的内容及样式。

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

深度阅读:

WordPress的Flatsome 主题使用教程:1 主题选项设置 Flatsome是wordpress中的一种商城主题,后台使用UXbulider编辑器进行搭建。支持在线模板导入及元素导入。主题选项中的设置修改为整个网站的全局设置。许多页面中的元素模块例如按钮等,都是继承了主题选项中的button设置。 1.1主题选项设置 — Header修改 ...
WordPress的Flatsome 主题使用教程:3 UX Builder可视化编辑器 Flatsome是flatsome中更换颜色,但无法在媒体库预览缩略图。 可以随意更改ICON宽度、位置;文本字体的大小等。效果如下:内容元素设置 - Gap Gap - section内的内容元素。可以随意设置Gap的高度,但无法单独设置Gap的颜色,但可以...
如何编辑flatsome主题的footer模块——添加Blocks 今天给大家介绍一种编辑footer模块最为便捷的方法——通过添加“Blocks模块”,进而再通过UX Build可视化工具进行编辑,操作简单的同时也方便调整元素位置。 1.首先,新建Blocks在空白框处可填写Blocks名称,而后点击UX Builder进...

发表评论

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

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

wechat logo