Page Builder演练第2部分：块

在​ 管理员 ​侧边栏上，转到​ Content > Elements>Blocks。

单击右上角的​ Add New Block。

对于​ Block Title，输入Google Map。

对于​ Identifier，输入google-map。

选择要提供块的​ Store View。

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

单击右上角的​ Save。

向下滚动到Page Builder内容预览（当前为空）并单击​ Edit with Page Builder。

在Page Builder面板中，展开​ Media ​并将​ Map ​占位符拖到舞台上。

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

如果为商店配置了Google Maps，则会显示商店位置的映射。

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

如果尚未为您的存储配置Google Maps，则会显示占位符映射。

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

在舞台的右上角，单击​ 关闭全屏 （ ）图标。

单击此图标会返回块的​ Content ​部分，并显示预览。

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

转到Google Cloud Platform Console。

单击项目下拉列表，然后选择或创建要为其添加API密钥的项目。

要配置API凭据，请按照Google Maps文档中的说明操作。

将API密钥复制到剪贴板。

返回Commerce管理员并转到​ Stores > Settings>Configuration。

在左侧面板中的​ General ​下，选择​ Content Management。

展开 Advanced Content Tools。

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

有关Content Management Advanced Tools配置选项的详细信息，请参阅​ 配置参考指南。

对于​ Google Maps API Key，粘贴您复制的密钥。

单击​ Test Key。

如果您的密钥有问题，请返回Google Maps平台网站以解决该问题。 然后，重试。

验证密钥后，单击​ Save Config。

在​ 管理员 ​侧边栏上，转到​ Content > Elements>Pages。

在网格中，查找您在第一个教程中创建的​ Simple Page，并在​ Action ​列中选择​ Edit。

展开​ Content ​部分的 ，然后单击​ Edit with Page Builder ​或内容预览区域内。

在​ Layout ​下的Page Builder面板中，将​ Row ​占位符拖到舞台顶部。

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

在Page Builder面板中，展开​ Add Content ​并将​ Block ​占位符拖到新行中。

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

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

在“编辑块”页面上，单击​ Select Block。

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

在搜索框中，输入map，然后按Enter/Return键查找您创建的块。

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

在网格中，单击​ Select ​以选择Google Maps块。

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

在舞台的右上角，单击​ 关闭全屏 （ ）图标。

单击此图标会返回该页面的​ Content ​部分，并显示预览。

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

在​ 管理员 ​侧边栏上，转到​ Content > Elements>Dynamic Blocks。

{width="700" modal="regular"}

单击右上角的​ Add Dynamic Block。

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

完成新动态块的基本设置：

• 将​ Enable Dynamic Block ​设置为Yes。

• 对于​ Dynamic Block Name，输入Tee Shirt Promo。

• 将​ Dynamic Block Type ​设置为Content Area并单击​ Done。

  动态块类型确定块在页面布局中的放置位置。 在为商店设置动态块时，请考虑页面布局和主题，以便更好地使用可用空间。 有些商店的活动内容区域仅限于固定宽度，而有些商店则扩展了屏幕的全宽。

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

• 对于​ Customer Segment，选中要应用于动态块的每个区段的复选框，然后单击​ 完成 ​以保存区段列表。

  对于以下示例，有两个客户区段按性别识别注册客户。 此动态块仅会显示在注册女顾客在您的商店中购物时登录到其帐户中。

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

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

在​ Appearance ​下，选择​ Full Bleed。

对于​ Minimum Height，输入400px。

滚动到​ Background ​部分，并单击​ Select from Gallery ​并选择第一个教程中上传的wide-banner-background.png图像来设置​ Background Image。

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

包含图像的 {width="600" modal="regular"}

在Page Builder面板中，展开​ Elements ​并将​ Text ​占位符拖到第二列。

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

在编辑器中输入以下三行文本：

Even more ways to mix and match.

Buy 3 Luma tees and get a 4th free.

Shop Tees >

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

选择所有三行文本并使用工具栏将​ 行高 ​设置为40px。

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

按如下方式设置每行的​ Font Size：

由于此块可放置在页面上的任何位置，因此请使用默认段落样式，而不是标题级别。 此外，不必担心列中文本尚未正确换行。

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

在另一个浏览器选项卡中，打开店面并导航到将成为链接目标目标的页面。

您可以使用完全限定的URL或省略对商店域的引用的相对URL。

完整URL
： https://mystore.com/women/tops-women/tees-women.html

相对URL
： ../women/tops-women/tees-women.html

返回到Page Builder工作区选项卡和文本编辑器，选择第三行中的Shop Tees >文本，然后在编辑器工具栏中选择​ 粗体 （ ）。

在第三行中仍选择Shop Tees >文本的情况下，在编辑器工具栏中选择​ 插入/编辑链接 （ ）。

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

对于​ URL，输入您准备的相对链接。

将​ Target ​设置为None。

此设置将在同一浏览器窗口中打开页面，而不是打开新选项卡。

对于​ Title，输入Shop Tees。

标题链接属性被某些浏览器用作工具提示。

要保存链接并返回Page Builder工作区，请单击​ OK。

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

在舞台的右上角，单击​ 关闭全屏 （ ）图标。

单击此图标会返回动态块的​ Content ​部分，并显示预览。

单击右上角的​ Save。

在编辑模式下再次打开​ T恤促销活动 ​动态块。

展开 Related Promotions ​部分并单击​ Add Cart Price Rules。

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

在​ 添加相关购物车价格规则 ​页面上，选中​ 购买3件T恤衫的复选框，获取第4个免费 ​价格规则，然后单击​ Add Selected。

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

价格规则显示在​ 相关购物车价格规则 ​下的​ 相关促销活动 ​部分中。 您可以将多个价格规则与一个动态块关联。 但是，这个简单的示例只使用一个。

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

单击右上角的​ Save。

在​ 管理员 ​侧边栏中，转到​ Content > Elements>Pages

查找您在第一次演练练习中创建的​ 简单页面，并以编辑模式将其打开。

展开 Content ​部分并单击​ Edit with Page Builder。

将鼠标悬停在与动态块具有相同图像的顶行上以显示工具箱和​ 删除 （ {width="20"} ）图标。

要确认从页面中删除该行，请单击​ OK 。

在​ Layout ​下的Page Builder面板中，将新的​ Row ​占位符拖到舞台顶部。

在Page Builder面板中，展开​ Add Content ​并将​ Dynamic Block ​占位符拖到新行中。

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

将鼠标悬停在动态块容器上以显示工具箱并选择​ 设置 （ {width="20"} ）图标。

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

在​ Edit Dynamic Block ​页面上，单击​ Select Dynamic Block。

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

查找您创建的​ Tee Shirt Promo ​动态块，然后单击​ Select。

下面显示了动态块信息的摘要。

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

接受默认​ Template Dynamic Block Block Template。

完成后，单击​ Save ​保存设置并返回Page Builder工作区。

页面预览中的 {width="600" modal="regular"}

在舞台的右上角，单击​ 关闭全屏 （ ）图标。

单击此图标会返回该页面的​ Content ​部分，并显示预览。

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

在​ 管理员 ​侧边栏中，转到​ Content > Elements>Dynamic Blocks。

在网格中查找您的​ Tee Shirt Promo ​动态块，并在编辑模式下将其打开。

展开 Content ​部分并单击​ Edit with Page Builder。

更改列宽：

• 将鼠标悬停在两列之间的边框上。

• 按住鼠标按钮并将边框向左拖动两个部分。

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

  第一列是12个网格分区中的4个(4/12)，第二列是12个网格分区中的8个(8/12)。

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

更改文本颜色：

• 选择前两行文本。

• 在编辑器工具栏上，选择​ Text Color ​并单击​ White ​色板。

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

在舞台的右上角，单击​ 关闭全屏 （ ）图标。

单击此图标会返回动态块的​ Content ​部分，并显示预览。

单击右上角的​ Save。

打开浏览器窗口到您的店面。

要查看示例页面，请修改地址栏中的URL，如下所示：

mystore.com/sample-page

如果您的存储配置为包含html后缀，请按照以下方式包含该后缀：

mystore.com/sample-page.html

以女性客户身份登录：

• 在主页右上角，单击​ Sign In。

• 如果您的系统上安装了示例Luma数据，请使用以下凭据：

  Email - roni_cost@example.com

  Password - roni_cost3@example.com

• 单击​ Sign In。

• 返回到示例页面，以查看您在T恤促销活动中创建的动态块。

为客户区段显示 {width="700" modal="regular"}