如何使用 Flatsome Theme UX Builder 创建滑块

滑块是网站上经常使用的常见功能。 如果您使用 Flatsome 主题来构建您的网站，您可以使用 Flatsome 主题 UX 构建器创建一个滑块。

UX builder 是一个易于使用的用户友好的前端页面编辑器。 它允许以最简单的方式向 Flatsome 主题驱动的网站添加滑块。 您可以获得 WordPress 中任何滑块插件的帮助，以轻松完成工作。

为什么你的网站需要一个滑块？

滑块是一项功能，可让您将幻灯片添加到您的网站。 该幻灯片元素可以是图像/徽标/文本。 添加这些将使您的网站对客户有吸引力、欢迎和参与。 这是一个与您不容错过的访客建立联系的机会。

您应该在滑块中添加什么？

选项是开放的。 你可以添加任何你想添加到你的 Flatsome 网站。 除此之外，您还可以将一些常见的东西添加到滑块中。 如果您想知道应该添加什么，可以按照下面的列表进行操作

• 优惠或销售相关更新
• 照片库展示您的照片
• 任何形式的通知等。

为了优化图像，您还可以使用摄影师使用的照片库插件 WordPress，这将是最适合您的。

如何使用 Flatsome 主题 UX 构建器创建滑块？

在这里，我将展示使用 Flatsome 主题 UX 构建器创建滑块的分步过程。

第 1 步：转到您的商店页面并将指针悬停在编辑页面上。

第 2 步：将出现一个名为Edit with UX Builder 的选项，单击该选项。

第 3 步：在左侧，将出现一个名为Parallax Shop的侧边栏。 您可以在那里找到几个元素，在所有元素下方，您会找到添加元素。 点击那个。

第 4 步：在这里，您可以通过单击Slider添加一个滑块。

第 5 步：您会发现各种类型的滑块模板。 向下滚动，探索并选择其中任何一个。

第 6 步：为了演示，我正在考虑一个名为Huge Sale的模板。 这就是它的外观。

第 7 步：在这里，您可以编辑整个布局并根据需要对其进行自定义。 自定义后，单击Apply 。

第 8 步：如果要添加更多元素，可以单击“添加到滑块”以添加新元素。

第 9 步：您可以添加 3 种类型的元素。 这些是横幅、图像和徽标。 单击这三个框中的任何一个以添加元素。

第10步：在左侧， Parallax Shop会出现。 要添加媒体，请单击选择媒体。

第 11 步：将出现一个弹出窗口。 您可以从媒体库中选择媒体，也可以从计算机上传，或者如果您有其他网站并且知道如何从 WordPress 导出媒体库，您也可以执行此类操作。

第 12 步：上传或选择媒体后，您需要点击使用此图片。

第 13 步：媒体将被嵌入，您可以通过单击页面上的应用将此媒体添加到主站点。

第十四步：点击应用后，会出现更新选项。 您需要单击“更新”按钮以将整个过程激活到实时站点。

完成整个过程后，滑块将如下所示。

恭喜！ 您已经使用 Flatsome 主题 UX 构建器创建了一个滑块。 自定义滑块有很多选项，例如更改背景颜色、自定义滑块时序、更改可拖动性、更改滑块类型等。

让我们来介绍一下 Flatsome 主题滑块的其他自定义设置。

如何使用 Flatsome 主题 UX builder 更改滑块的背景颜色？

第 1 步：转到您的商店页面并将指针悬停在编辑页面上。

第 2 步：将出现一个名为Edit with UX Builder 的选项，单击该选项。

第 3 步：将出现一个Parallax Shop ，您可以在其中找到Slider选项。 点击设置。 之后，您会找到一个下拉列表。 从该列表中，单击选项。

第 4 步：它会将您带到Slider的自定义页面。 您将看到几个选项，您需要从中找到“布局”部分。 在 Layout 选择中，您会找到Bg Color ，单击该颜色。 它会向您显示可用的背景颜色，选择其中任何一种。

第5步：选择颜色后，您可以在Parallax Shop页面底部找到Apply按钮，单击该按钮以应用新的背景颜色。

第 6 步：然后Parallax Shop将为您带来一个新页面，您需要在其中单击更新以更新您当前的站点。 之后，背景将设置为新颜色。

如何使用 Flatsome 主题 UX 构建器更改滑块的可拖动选项？

第 1 步：转到您的商店页面并将指针悬停在编辑页面上。

第 2 步：将出现一个名为Edit with UX Builder 的选项，单击该选项。

第 3 步：将出现一个Parallax Shop ，您可以在其中找到Slider选项。 点击设置。 之后，您会找到一个下拉列表。 从该列表中，单击选项。

第 4 步：在Parallax Shop中，您会找到名为Draggable的选项。 您可以打开/关闭该功能。

第5步：选择开/关后，您可以在视差商店页面底部找到应用按钮，单击该按钮以应用新的背景颜色。

第 6 步：然后Parallax Shop将为您带来一个新页面，您需要在其中单击更新以更新您当前的站点。 之后，滑块将设置为具有拖动功能。

如何使用 Flatsome 主题 UX 构建器激活自动滑动？

第 1 步：转到您的商店页面并将指针悬停在编辑页面上。

第 2 步：将出现一个名为Edit with UX Builder 的选项，单击该选项。

第 3 步：将出现一个Parallax Shop ，您可以在其中找到Slider选项。 点击设置。 之后，您会找到一个下拉列表。 从该列表中，单击选项。

第 4 步：您会找到一个名为Auto Slide的部分，您可以在其中打开/关闭Auto Slide选项。 此外，您可以使用Timer自定义滑动间隔时间并打开/关闭Pause on Hover的状态。

第5步：选择开/关后，您可以在视差商店页面底部找到应用按钮，单击该按钮以应用新的背景颜色。

第 6 步：然后Parallax Shop将为您带来一个新页面，您需要在其中单击更新以更新您当前的站点。 之后，将使用滑块的自定义设置滑块。

如何使用 Flatsome 主题 UX 构建器更改箭头样式？

第 1 步：转到您的商店页面并将指针悬停在编辑页面上

第 2 步：将出现一个名为Edit with UX Builder 的选项，单击该选项。

第 3 步：将出现一个Parallax Shop ，您可以在其中找到Slider选项。 点击设置。 之后，您会找到一个下拉列表。 从该列表中，单击选项。

第 4 步：您可以在Parallax Shop中找到箭头部分。 您可以打开/关闭箭头，更改箭头样式和箭头颜色。

第5步：选择开/关后，您可以在视差商店页面底部找到应用按钮，单击该按钮以应用新的背景颜色。

第 6 步：然后Parallax Shop将为您带来一个新页面，您需要在其中单击更新以更新您当前的站点。 之后，滑块将设置为新的箭头样式。

如何使用 Flatsome 主题 UX 构建器更改项目符号样式？

第 1 步：转到您的商店页面并将指针悬停在编辑页面上。

第 2 步：将出现一个名为Edit with UX Builder 的选项，单击该选项。

第 3 步：将出现一个Parallax Shop ，您可以在其中找到Slider选项。 点击设置。 之后，您会找到一个下拉列表。 从该列表中，单击选项。

第 4 步：您可以在Parallax Shop中找到Bullet部分。 您可以打开/关闭子弹并更改子弹样式。

第5步：选择开/关后，您可以在视差商店页面底部找到应用按钮，单击该按钮以应用新的背景颜色。

第 6 步：然后Parallax Shop将为您带来一个新页面，您需要在其中单击更新以更新您当前的站点。 之后，滑块将设置为新的子弹样式。

结论

在本教程中，几乎讨论了滑块的每个主要部分。

如果本教程对您来说似乎很复杂，我建议您花时间从头开始遵循该过程。

Flatsome 是 WordPress 中最受欢迎的主题之一。 因此，定制领域非常广泛，了解所有功能需要时间。

面临什么困难？ 随意发表评论。 我们很乐意帮助你。 如果您想了解更多关于 Flatsome 主题的信息，您可以在此处阅读更多关于 Flatsome 主题的教程，成为该领域的专家。