元素 — 按钮

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

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

将鼠标悬停在按钮上以显示工具箱，然后选择​ 设置 （ ）图标。

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

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

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

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

使用以下类型之一设置​ Button Link：

• URL — 输入链接的目标URL。

  URL可以是商店中产品或页面的相对链接，也可以是完全限定的URL。

  相对URL示例 — ../luma-analog-watch.html

  完全限定的URL示例 — http://mystore.com/luma-analog-watch.html

  如果链接指向其他网站，则可以在新的浏览器选项卡中打开该链接，以保持当前页面对商店开放。

  要阻止访客离开您的商店，请选中​ Open in new tab ​复选框。

• Product — 输入产品名称（部分或完整）或SKU，然后在列表中选择产品名称。

  note note
  NOTE
  产品根据​_显示缺货产品_​设置显示在列表中。 对于使用Inventory management的多Source商家，产品列表仅受分配给默认网站的源的限制。

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

• Category — 输入类别名称（部分或完整）或单击空白字段以显示类别树。 然后，在树中选择类别名称。

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

• Page — 输入CMS页面的名称（部分或完整）或单击空白字段以显示完整列表。 然后，在搜索结果列表中选择该页面的名称。

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

根据需要完成高级设置。

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

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

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

输入要显示在第二个按钮上的文本。

单击“新建”按钮以显示其工具箱，然后选择​ 设置 （ {width="20"} ）图标。

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

将​ Button Type ​设置为Secondary。

根据需要设置​ Button Link。

在以下示例中，链接是转到联系我们页面的相对URL。

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

根据需要完成高级设置。

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

再次单击舞台上的第二个按钮，然后选择​ 复制 （ {width="20"} ）图标。

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

输入要显示在第三个按钮上的文本。

单击第三个按钮以显示工具箱，然后选择​ 设置 （ {width="20"} ）图标。

第三个按钮的 {width="500" modal="regular"}

根据需要更新​ Button Link。

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

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

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

在​ Appearance ​下，选择​ Stacked。

将​ All Buttons are same size ​设置为Yes。

{width="300"}

使用更改按钮容器的设置中的说明根据需要更新其余设置。

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

舞台上将显示完整的栈叠按钮集，其中包含一个主按钮和两个辅助按钮。

舞台上的 {width="500" modal="regular"}

单击要移动的按钮。

选择按钮的移动（ {width="20"} ）图标（显示在按钮文本的前面）并将其拖动到按钮容器内按钮的新位置。

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

单击舞台上的按钮以显示工具箱，然后选择​ 设置 （ {width="20"} ）图标。

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

根据需要更新标准设置。

• Button Text — 输入要显示在按钮上的文本（也可以直接从舞台更新）。

• Button Type — 确定按钮格式。

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

• Button Link — 确定单击按钮时提供的目标页面。

  table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
  选项	描述
  URL	使用相对或完全限定的URL来标识目标页面。
  Product	基于产品名称或SKU标识目标页面。 可以根据部分名称或全名搜索产品名称。 然后从搜索结果列表中选择产品。
  Category	将目标页面标识为类别树中的特定类别或子类别。
  Page	将目标页标识为特定的CMS页。

根据需要完成高级设置。

要保存设置并返回Page Builder工作区，请单击右上角的​ Save。

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

根据需要更新​ Appearance ​设置。

• 使用排列选项在容器中水平或垂直显示按钮：

  table 0-row-2 1-row-2 2-row-2 layout-auto
  选项	描述
  Inline	水平排列按钮。
  Stacked	垂直排列按钮。

• 根据您的喜好设置​ All buttons are same size ​选项。

  当设置为Yes时，容器中的所有按钮根据最长按钮文本的长度而具有一致的大小。

根据需要完成高级设置。

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

若要控制父容器中的位置，请选择​ Alignment：

设置应用于按钮或按钮容器所有四边的​ Border ​样式：

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

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

用空格分隔多个类名。

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

在图表中输入相应的值。