Page Builder演练第1部分：简单页面

下载simple-page-assets文件并将文件保存到您的本地系统。

导航到下载的文件并解压缩文件。

在Windows系统上，右键单击并选择​ Extract All ​文件。 然后，选择目标文件夹并单击​ Extract。

在Mac系统上，只需双击zip文件，然后将提取的文件移动到目标文件夹即可。

该文件夹包含以下图像文件：

{width="500"}

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

单击右上角的​ Add New Page ​并执行以下操作：

• 若要防止在您的存储中发布此页面，请将​ Enable Page ​设置为No。

• 对于​ Page Title，输入Simple Page。

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

展开​ Design ​部分的 。

请注意，默认情况下，Layout ​设置为Page -- Full Width。 除了五个标准布局选项外，Page Builder还添加了页面、类别和产品的全宽布局。

如果样本数据可用，请将​ New Theme ​设置为Magento Luma。 否则，您可以选择其他可用的主题或将其留空以使用默认主题。

New Theme ​设置可用于覆盖默认主题并将其他主题应用到页面。

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

单击右上角的​ Save。

保存该页面后，名称​ 简单页面 ​将显示在页面的左上角。

展开​ Content ​部分的 。

此操作显示带有空行的Page Builder预览。

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

单击​ Edit with Page Builder ​或在内容预览区域内。

在展开的Page Builder 工作区中，左侧的面板提供了可用于在阶段中构建内容的内容工具。

将鼠标悬停在空行上以显示工具箱。

每个内容容器都有一个工具箱，其中包含一组相似的选项。

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

在行工具箱中，选择​ 设置 ( {width="20"}图标。

在​ Appearance ​下，选择​ 完全出血。

“完全出血”外观设置可将行和背景的内容区域的左右边框扩展到页面的全部宽度。

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

向下滚动到​ Advanced ​部分并将所有​ Margins and Padding ​设置设置为0。

此设置可确保横幅扩展行的完整宽度。

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

要保存设置并返回Page Builder工作区，请向上滚动到页面顶部并单击右上角的​ Save。

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

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

将鼠标悬停在横幅容器上以显示工具箱。

除了工具箱之外，还包含​ 上传图像 ​和​ 从图库中选择 ​按钮，以便您可以直接从舞台上快速更改横幅。

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

在横幅工具箱中，选择​ 设置 （ {width="20"} ）图标。

在​ Appearance ​下，选择​ Collage Right。

“拼贴右侧”设置将内容放置在横幅的右侧。

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

向下滚动到​ Background ​部分并设置横幅的背景图像：

• 对于​ Background Image，单击​ 上传。

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

  导航到保存提取的简单页面资产的目录，然后选择wide-banner-background.jpg文件。

  上传图像，并显示上传图像的缩略图。 文件名、图像尺寸和文件大小如下所述。

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

• 对于​ Background Mobile Image，单击​ 上传。

  在同一文件目录中，选择wide-banner-background-mobile.jpg文件。

  移动设备使用移动设备背景图像，每当将桌面浏览器窗口的大小调整为移动设备的宽度时，也会使用背景图像。

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

• 回滚到页面顶部并单击​ Save ​以保存设置并返回Page Builder工作区。

  背景显示在舞台上，并扩展行的完整宽度。

  带有背景图像的 {width="600" modal="regular"}

请注意行右侧显示的占位符文本。 此文本的位置反映了​ 拼贴右侧 ​外观设置。

单击占位符文本，然后输入以下消息作为两行：

Get fit and look fab in new seasonal styles.

New LUMA yoga collection

编辑器工具栏显示在文本框上方。 文本可以直接从舞台输入和格式化，也可以选择横幅工具箱中的​ 设置。

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

对文本应用格式：

• 选择文本的第一行。 然后，在​ 格式 ​下的编辑器工具栏上，选择Heading 2。

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

• 选择第二行文本。 然后，在​ 格式 ​下的编辑器工具栏上，选择Paragraph。

格式设置应用与当前主题关联的样式表中的样式。

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

将鼠标悬停在上面以显示横幅工具箱，再次选择​ 设置 （ {width="20"} ）图标，然后滚动到​ Content ​部分。

请注意，您的文本显示在​ 消息文本 ​框中。 可以从舞台或横幅设置的​ Content ​部分输入和编辑文本。

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

继续在​ Content ​部分中，设置横幅链接和按钮：

• 将​ 链接 ​设置为Category，然后单击​ Select ​以显示类别树。

• 选择What's New作为链接的类别。

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

• 将​ Show Button ​设置为Always。

• 对于​ Button Text，输入Shop Now作为按钮上显示的文本。

• 对于​ Button Type，接受Primary默认值。

  当前主题中的按钮样式决定了按钮格式。

设置横幅叠加：

您可以使用叠加将背景颜色应用到由“外观”设置定义的活动内容区域。 横幅背景图像在横幅全宽范围内保持可见。

• 将​ Show Overlay ​设置为Always。

• 对于​ Overlay Color，请执行下列操作之一：

  • 单击颜色方框并选择白色色板。
  • 单击​ 无颜色 ​文本框并输入White或十六进制值#ffffff。

  然后，单击​ Apply。

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

• 回滚到页面顶部并单击​ Save ​以保存设置并返回Page Builder工作区。

  按钮显示在舞台上横幅消息的下方。

  内容阶段中的 {width="600" modal="regular"}

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

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

您可以随时在两种工作区模式之间切换。

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

如果出现提示，请单击页面顶部消息中的缓存管理链接，然后刷新任何无效的缓存。

在“页面”网格中，找到您在本练习第一部分中创建的​ 简单页面，并在​ Action ​列中选择​ Edit。

展开​ Content ​部分的 。

单击​ Edit with Page Builder ​或在内容预览区域内。

在​ Layout ​下的Page Builder面板中，将​ Row ​占位符拖到舞台上，并将其放在横幅上方。

红色基准线标记两行之间的边界。

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

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

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

在​ Appearance ​下，接受​ 包含 ​默认设置。

此设置将行的内容区域限制为主题定义的页面宽度。

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

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

在​ Layout ​下的Page Builder面板中，将​ Column ​占位符拖到新行中。

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

该行现在分为两列，每列的宽度相等。 每列都是一个单独的内容容器，并具有自己的专用选项工具箱。

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

在第一列的左上角，单击圆形​ 网格 ​控件（ ）以显示网格准则。

网格可确保内容保持一致，并在桌面和移动设备上正确呈现。 有关配置网格大小的信息，请参阅Page Builder设置主题中的配置 Page Builder部分。

每个列容器顶部边框的圆括号(6/12)中的数字表示每列中的网格划分数，以及行中的划分总数。

{width="600" modal="regular"}的网格大小详细信息

在Page Builder面板中，展开​ Media ​部分并将​ Image ​占位符拖到第一列。

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

将示例图像插入占位符。

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

对于位于系统上的映像，可以选择以下任一方法：

• 上载图像文件：在第一列，单击​ Upload Image。 然后，导航到保存提取的简单页面资产的目录，并选择small-banner-1.jpg文件。

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

  重复此操作，将small-banner-2.jpg文件添加到第二列。

• 拖动图像文件：在您的桌面上，打开简单页面资产文件夹，并将其放在您正在处理Page Builder舞台的管理浏览器窗口旁边。 然后，将文件small-banner-1.jpg从简单页面资源文件夹拖放到第一列。

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

  重复此操作，将small-banner-2.jpg文件添加到第二列。

确定目录中的哪个页面要链接到每个图像。

将鼠标悬停在第一列中的图像上以显示工具箱，然后选择​ 设置 （ {width="20"} ）图标。

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

将图像链接到类别：

• 向下滚动并将​ 链接 ​设置为Category。

• 在类别树中，向下钻取并选择Men's Hoodies & Sweatshirt类别。

• 在右上角，Save ​设置并返回Page Builder工作区。

重复上一步骤，将第二列中的图像链接到​ 齿轮 ​类别。

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

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

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

出现提示时，请单击页面顶部消息中的缓存管理链接，然后刷新任何无效的缓存。

在“页面”网格中，找到您在本练习第一部分中创建的​ 简单页面，并在​ Action ​列中选择​ Edit。

展开​ Content ​部分的 。

单击​ Edit with Page Builder ​或在内容预览区域内。

在​ Layout ​下的Page Builder面板中，将​ Row ​占位符拖到舞台上，并将其置于本练习第二部分中创建的行上方。

红色基准线标记两行之间的边界。

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

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

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

在​ Appearance ​下的“编辑行”页面上，选择​ Full Width。

此设置将内容区域限制为由主题定义的最大页面宽度。 背景颜色和/或图像不受限制，并会扩展行的完整宽度。

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

在​ Background ​部分中，输入#f1f1f1作为​ Background Color。

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

向下滚动到​ Advanced ​部分，并将所有​ 边距和边距 ​值设置为0。

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

回滚到页面顶部并单击​ Save ​以保存设置并返回Page Builder工作区。

该行的背景颜色现在为淡黄色。

舞台中具有背景颜色的 {width="600" modal="regular"}

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

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

将第一列的右边框拖动到网格上12个(4/12)位置中的四个位置。

第二列的大小调整为12的8个(8/12)。

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

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

向下滚动到​ Advanced ​部分，并将所有​ 边距和边距 ​值设置为0。

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

回滚到页面顶部并单击​ Save ​以保存设置并返回Page Builder工作区。

在Page Builder面板中，展开​ Media ​并将​ Image ​内容类型拖到第一列。

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

在图像占位符中，单击​ Upload Image。

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

导航到保存提取的简单页面资产的目录，然后选择review-image.jpg文件。

上传的图像显示在第一列中，并与行的背景颜色无缝混合。

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

在Page Builder面板中，展开​ Elements ​部分并将​ Text ​内容类型拖到第二列。

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

单击文本元素以显示编辑器工具栏。

在工具栏中，单击​ 插入图像 （ ）图标，然后执行以下操作：

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

• 在​ Insert/edit image ​对话框中，单击​ Source ​字段旁边的​ 查找 （ ）图标。

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

• 在​ Select Images ​页面上，单击​ Choose Files。

• 在保存简单页面资产的文件夹中，选择rating.png。

• 返回页面，双击图像拼贴以将其选中并将其URL插入Source字段。

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

• 对于​ Image Description，输入5-Star Rating并单击​ OK ​将图像插入列。

• 在编辑器工具栏中，单击​ 居中对齐 （ ）以居中对齐列中的图像。

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

将插入点放在五星形图像的后面，按Enter/Return键以开始新行，然后输入以下文本：

Awesome Tank!

I'm a long distance runner and it keeps me pretty comfortable, although these companies always act like their shirts are magical and really it's just pretty basic stuff. Still it's a great shirt, and I would recommend it.

Antonia Racer Tank – Reviewed by Allyson

文字在键入时居中。

{width="600" modal="regular"}中居中的文本

设置文本格式：

• 在第一行文本中单击任意位置，然后在​ 格式 ​下的编辑器工具栏上选择Heading 2。

• 选择其余文本，然后在编辑器工具栏的​ 格式 ​下，选择Paragraph。

根据与主题关联的样式表对文本进行格式设置。

获取图像的尺寸，以便您可以在列中垂直居中对齐内容：

• 将鼠标悬停在第一列中的图像上以显示工具箱，然后选择​ 设置 （ {width="20"} ）图标。

• 在图像的缩略图下方，记下图像的尺寸。

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

• 单击右上角的​ 关闭。

将内容垂直居中于第二列：

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

• 对于​ Minimum Height，输入450作为第一列中图像的高度（以像素为单位）。

• 将​ Vertical Alignment ​设置为Center。

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

向下滚动到​ Advanced ​部分，并将所有​ Margins and Padding ​值设置为零( 0 )。

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

向后滚动到页面顶部并在右上角，单击​ Save ​以保存设置并返回Page Builder工作区。

阶段中带有审阅内容的 {width="600" modal="regular"}

选择Antonia Racer Tank文本，然后单击编辑器工具栏中的​ 插入链接 （ ）图标。

在​ 插入链接 ​对话框中，指定指向目录产品的链接：

• 输入产品​ URL。

  您可以输入相对或完全限定的URL。 在此示例中输入了以下相对链接：

  ../antonia-racer-tank.html

• （可选）对于​ Title，输入产品名称。

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

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

• 完成后，单击​ OK ​保存链接。

  现在，横幅中会突出显示链接的文本。

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

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

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

单击右上角的​ Save。

如有必要，请展开 Content ​部分。

单击​ Edit with Page Builder ​或在内容预览区域内。

将鼠标悬停在舞台上的第一行上以显示工具箱，然后选择​ 移动 （ ）图标。

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

在验证行中的所有内容均已选中时按住鼠标按钮，并将行拖到页面底部红色准则下方的位置。

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

重复此过程以将第一行移动到第二位置。

现在，页面中行的顺序与简单页面示例匹配。

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

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

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

如果出现提示，请单击页面顶部消息中的缓存管理链接，然后刷新任何无效的缓存。