媒体 — 滑块

打开要放置滑块的页面、块或动态块，并展开​ Content ​部分。

在Page Builder面板中，展开​ Media ​并将​ Slider ​占位符拖到舞台上的行、列或选项卡中。

在以下示例中，行的背景颜色为黄色(#fffd16)。

{width="600" modal="regular"}

滑块容器显示在舞台上，只有一张空幻灯片。

单击滑块容器以显示文本编辑器并输入第一张幻灯片的内容。

您还可以使用Content设置包含更复杂的横幅内容。

单击滑块底部的导航点以显示单个幻灯片的工具箱，然后选择​ 设置 （ {width="20"} ）图标。

滑块有两个工具箱。 确保您使用的是底部的幻灯片工具箱。

根据需要按照以下部分完成设置：

• Appearance
• Background
• Content
• Search Engine Optimization
• Advanced

完成后，单击​ Save ​以应用设置并返回到Page Builder工作区。

单击幻灯片下方的导航点以显示工具箱，然后选择​ 复制 （ {width="20"} ）图标。

{width="500" modal="regular"}

单击新幻灯片的导航点并显示工具箱，然后选择​ 设置 （ {width="20"} ）图标。

根据以下部分根据需要修改设置：

• Appearance
• Background
• Content
• Advanced

完成后，单击​ Save ​以应用设置并返回到Page Builder工作区。

将鼠标悬停在顶部的滑块容器上以显示工具箱，然后选择​ 添加 （ {width="20"} ）图标。

{width="500" modal="regular"}

带有自己的导航点和工具箱的新空白幻灯片将添加到滑块中，并显示在舞台上。

{width="500" modal="regular"}

单击新幻灯片的导航点并显示工具箱，然后选择​ 设置 （ {width="20"} ）图标。

根据以下部分根据需要修改设置：

• Appearance
• Background
• Content
• Advanced

完成后，单击右上角的​ Save ​以关闭​ Edit Slide ​页面。

创建要在幻灯片上看到的构件。

打开要放置滑块的页面、块或动态块，并展开​ Content ​部分。

在Page Builder面板中，展开​ Media ​并将​ Slider ​占位符拖到舞台上的行、列或选项卡中。

单击滑块容器以显示文本编辑器工具栏，然后单击​ 插入构件 （ {width="20"} ）图标。

选择所需的​ Widget Type。

指定根据构件类型而不同的设置

{width="600" modal="regular"}

完成后，单击右上角的​ Insert Widget。

根据需要修改其他设置。

完成后，单击右上角的​ Save。

{width="600" modal="regular"}

更改舞台上的滑块显示并查看要更改的幻灯片。

在单个幻灯片工具箱中，选择​ 设置 （ {width="20"} ）图标，并根据需要完成设置，具体步骤如下：

单击右上角的​ Save ​以应用设置并返回到Page Builder工作区。

选择以下幻灯片放置类型之一：

{width="600" modal="regular"}

输入​ Slide Name。

在编辑模式下工作时，幻灯片名称将作为工具提示显示在导航点上方。 从店面看不到幻灯片名称。

导航中的 {width="500" modal="regular"}

输入幻灯片的​ Minimum Height。

最小高度可以是具有任何有效CSS单位（如100px、50%、50em、100vh）的数字，也可以是计算（如100vh - 237px）。

例如，您可以设置幻灯片的最小高度以覆盖页面的整个高度，然后将背景图像和视频用于引人注目的设计选项。

单击占位符或现有文本，然后输入要显示在幻灯片上的新文本。

编辑器工具栏显示在文本框上方。

使用编辑器工具栏输入文本和设置文本格式，以及插入元素，例如链接、图像和小组件。

{width="500" modal="regular"}

单击滑块底部的导航点以显示单个幻灯片的工具箱，然后选择​ 设置 （ {width="20"} ）图标。

在​ Content ​部分中，输入要与幻灯片一起显示的​ Message Text。

向下滚动到​ Content ​部分，并使用​ Message Text ​编辑器输入横幅文本并设置其格式。

您还可以插入元素，如文本链接、图像和小组件。

使用编辑器工具栏根据需要设置文本格式。

此示例中的第一张幻灯片具有背景图像，但没有消息文本。 滑块上方的Buy 3 Get 1 Free文本位于文本容器中（稍后添加）。

如果需要，请为幻灯片指定​ Link。

该链接是客户单击幻灯片区域时显示的目标页面。 您可以使用以下三种链接类型之一：

• URL — 链接到相对或完全限定的URL。

• Product — 根据产品名称或SKU标识目标页面。 根据部分名称或全名按名称搜索产品。 从搜索结果列表中选择产品。

  {width="600" modal="regular"}

• Category — 将目标页面标识为类别树中的特定类别或子类别。 根据部分名称或全名搜索类别。 从所显示树的展开部分中选择类别。

  {width="600" modal="regular"}

• Page — 将目标页面标识为特定内容页面。 根据部分名称或全名搜索页面。 从搜索结果列表中选择页面。

  {width="600" modal="regular"}

从2.4.1版本开始，由于店面显示时出现问题，Page Builder不再支持链接幻灯片以及嵌套文本中的链接。 如果您在​_Message Text_​中使用链接，则无法配置​_Link_​选项。 如果您希望在整个幻灯片中使用单个链接，则可以从文本中删除所有链接。

{width="300"}

如果要阻止访客离开您的商店，请选中​ Open in new tab ​复选框。 取消选中复选框后，链接的目标将在同一浏览器选项卡中打开，这可以有效地将访客导航到您商店之外的位置。

如果需要，可添加按钮以提示客户关注该链接。

幻灯片​ 外观 ​位置在文本下方放置单个链接或按钮。 完成要添加链接或按钮的属性。

{width="600" modal="regular"}

• 将​ Show Button ​设置为以下项之一：

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  选项	描述
  Always	幻灯片上始终会显示一个按钮。
  On Hover	仅当将鼠标悬停在幻灯片上时，才会显示一个按钮。
  Never Show	幻灯片上从不显示按钮。

• 输入要显示在按钮上的​ Button Text。

• 将​ Button Type ​设置为以下项之一：

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  选项	描述
  Primary	从当前样式表中应用主按钮样式。
  Secondary	应用当前样式表中的辅助按钮样式（如果适用）。
  Link	创建超链接而不是按钮。

  当前主题中的按钮样式决定了按钮格式。 通常，主按钮的背景颜色比辅助按钮更突出。

将​ Show Overlay ​设置为以下项之一：

您可以使用叠加将背景颜色应用到由“外观”设置定义的活动内容区域。 幻灯片背景图像在幻灯片的整个宽度内保持可见。

{width="600" modal="regular"}

如果选择显示叠加，请设置​ Overlay Color：

• 单击​ 无颜色 ​样本，然后选择样本。
• 在​ Color ​字段中，输入有效的颜色名称或十六进制值。

{width="600" modal="regular"}

要控制添加到幻灯片的内容的水平位置，请选择​ Alignment：

设置应用于幻灯片所有四面的​ Border ​样式：

如果设置了除None之外的边框样式，请完成边框显示选项：

{width="600" modal="regular"}

（可选）从当前样式表中指定要应用于幻灯片的​ CSS classes ​的名称。

用空格分隔多个类名。

输入​ Margins and Padding ​的值（以像素为单位）以指定幻灯片的外部边距和内边距。

在幻灯片中输入每个相应的值。

在Page Builder面板中，展开​ Elements ​并将​ Text ​占位符拖到舞台上的行、列或选项卡集中。

拖动时，红色基准线将插入点标记在滑块上方。

{width="600" modal="regular"}

根据需要使用编辑器设置文本格式。

{width="500" modal="regular"}

将鼠标悬停在滑块容器上以显示主工具箱，然后选择​ 设置 （ {width="20"} ）图标。

{width="500" modal="regular"}

输入幻灯片的​ Minimum Height。

最小高度可以是具有任何有效CSS单位（如100px、50%、50em、100vh）的数字，也可以是计算（如100vh - 237px）。

例如，您可以设置滑块的最小高度来拉伸页面的完整高度，从而为全页背景图像和视频提供引人注目的选项。

{width="400"}

如果希望滑块在页面加载时开始，请将​ Autoplay ​设置为Yes并将​ Autoplay Speed ​设置为幻灯片之间延迟的毫秒数。

默认情况下，速度设置为4000毫秒，即4秒。 如果将自动播放设置为No，则默认情况下将显示第一张幻灯片，客户必须单击幻灯片导航（点或箭头）以按顺序显示下一张幻灯片。

{width="600" modal="regular"}

若要平滑从一张幻灯片到下一张幻灯片的过渡，请将​ Fade ​设置为Yes。

渐隐后，幻灯片似乎保持不变，但内容会从一个幻灯片平滑更改为另一个幻灯片。 如果没有淡化，您会看到从一张幻灯片到下一张幻灯片的水平移动。

{width="600" modal="regular"}

要在页面打开时无限期地重复幻灯片放映，请将​ Infinite Loop ​设置为Yes。

要选择滑块的导航控件类型，请执行以下操作：

• 要在每张幻灯片的左右两侧包含​ 下一个 ​和​ 上一个 ​箭头，请将​ Show Arrows ​设置为Yes。

• 若要在滑块下方包含一组导航点，请将​ Show Dots ​设置为Yes。

{width="600" modal="regular"}

根据需要完成高级滑块设置。

完成后，单击​ Save ​以应用设置并返回到Page Builder工作区。

若要控制幻灯片在父滑块容器中的位置，请选择​ Alignment：

设置应用于滑块容器所有四个侧面的​ Border ​样式：

如果设置了除None之外的边框样式，请完成边框显示选项：

（可选）从当前样式表中指定要应用于滑块容器的​ CSS classes ​的名称。

用空格分隔多个类名。

输入​ Margins and Padding ​的值（以像素为单位）以确定滑块容器的外边距和内边距。

在图表中输入相应的值。

打开已包含滑块的页面，将​ Enable Page ​设置为Yes。

单击右上角的​ Save ​箭头并选择​ Save & Close。

在​ 页面 ​网格中查找该页面，并在​ Action ​列中选择​ View。

{width="600" modal="regular"}

预览滑块时，请调整窗口大小，以便查看它在移动设备上的显示方式。

{width="400" modal="regular"}