如何使用 Divi 的 Woo 模块为产品页面设计粘滞条

已发表: 2019-10-16

粘滞条仍然是网页设计中的流行元素。它们非常适合通过将 CTA 保持在最前沿而不像弹出窗口那样具有侵入性来提高转化率。

在这个用例中，我们将使用 Divi 的 Woo 模块为 WooCommerce 产品设计一个粘性栏。粘滞条可以包含任何 Divi 模块。在本教程中，我们将创建一个包含“添加到购物车”按钮的粘性栏，以便在用户向下滚动页面时保持可见。此外，我们还将创建一个粘性购物车通知栏，以便用户在单击“添加到购物车”按钮后始终会看到“查看购物车”按钮。

这些粘性条元素将通过保持那些关键的 CTA 来帮助提高转化率。

让我们开始吧！

抢先看

以下是我们将在本用例教程中设计的内容的快速浏览。

免费下载粘滞条布局

要亲身体验本教程中的设计，您首先需要使用下面的按钮下载它。要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

您已成功订阅。请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

要将布局导入您的页面，只需提取 zip 文件并将 json 文件拖到 Divi Builder 中。

让我们进入教程好吗？

你需要什么开始

首先，您需要执行以下操作：

如果您还没有，请安装并激活已安装的 Divi 主题（如果不使用 Divi 主题，请安装并激活 Divi Builder 插件）。
安装并激活 WooCommerce 插件。如果这是第一次设置 WooCommerce，您将需要运行基本设置向导以准备好您的商店。完成后，您就可以添加新产品了。
如果您还没有任何产品，请创建一些产品。有关如何添加新产品的更多信息，请查看本教程。

之后，您将有一个空白画布开始在 Divi 中进行设计。

第 1 部分：设计产品页面上的粘性栏

我们将在此示例中使用模拟简单产品，因此您需要创建新产品或编辑现有产品。产品信息对于本教程并不重要，只要确保您拥有产品标题、价格、描述、图像等基础知识......

准备好简单的产品后，单击以在后端编辑产品并在产品页面上部署 Divi Builder。在 Divi 页面设置下，为页面布局选择“全角”，然后单击“在前端构建”。

产品页面应与此类似。

在包含面包屑和购物车通知的第一行下，添加一个具有单列布局的新行。

行设置

在添加任何模块之前，请按如下方式更新行设置：

背景颜色：#333333
使用自定义装订线宽度：是
天沟宽度：1
宽度：100%
填充：0px 顶部，0px 底部

使行具有粘性

要使行具有粘性，请将以下自定义 CSS 添加到桌面主元素：

position: -webkit-sticky !important;
position: sticky !important;
top: 50px;

然后将以下 CSS 添加到平板电脑显示的同一主元素中：

top: 0px;

如果您不熟悉“位置：粘性”css 属性，基本上它是固定位置和元素（在本例中为行）将与其容器一起滚动直到到达的相对位置之间的混合页面顶部或底部的指定位置（或指定的偏移量）。在此示例中，我们将偏移量设置为距浏览器窗口顶部 50 像素（为桌面上默认固定标题的高度留出空间）。然后在平板电脑上，偏移量更改为“top: 0px”，以修复移动浏览器顶部的行/粘滞栏。

注意：忽略将 CSS 添加到框中时看到的错误。该代码将正常工作。

在你的 CSS 之后，更新 Z 索引如下：

Z指数：10

现在，当用户向下滚动产品页面时，该行将变得粘滞。

列自定义 CSS

在开始用内容填充行之前，我们需要确保一列行内的模块将水平对齐而不是垂直对齐。我们可以使用一个简单的 CSS 技巧通过 flex 属性来做到这一点。打开列设置并将以下自定义 CSS 添加到主元素：

display:flex;
align-items:center;

这照顾了我们的粘性行设计。现在，我们需要用一些内容填充该行。

添加 Woo 标题

在粘性行的列中添加一个新的 Woo 标题模块。

然后按如下方式更新设置：

标题文字颜色：#ffffff
标题文字大小：28 像素（桌面）、20 像素（平板电脑）、16 像素（手机）
宽度：30%
填充：2vw 顶部，2vw 底部，2vw 左，2vw 右

添加 Woo 价格

接下来，通过单击鼠标悬停在您刚刚创建的 woo 标题模块上时出现的灰色加号图标来添加 woo 价格模块。

然后更新 Woo Price 设置如下：

价格文字大小：28px（桌面）、20px（平板电脑）、16px（手机）
宽度：30%
填充：2vw 顶部，2vw 底部，2vw 左，2vw 右
右边框宽度：1px
右边框颜色：#777777
左边框宽度：1px
左边框颜色：#777777

添加 Woo 添加到购物车模块

对于最后一段内容，在 Woo Price 模块之后添加一个 Woo Add to Cart 模块。

然后按如下方式更新设置：

通过隐藏移动设备上的库存数量和数量字段来简化添加到购物车元素。

显示数量字段：关闭（平板电脑）
显示库存：关闭

文本对齐：右
为按钮使用自定义样式：是
按钮文字大小：18px（平板电脑），14px（手机）
按钮文字颜色：#ffffff
按钮背景颜色：#7ac5af
按钮边框宽度：0px

宽度：40%
填充：2vw 左，2vw 右

结果

现在让我们看看它在直播页面上的样子。

这是在手机上。

第 2 部分：创建购物车通知粘滞条

创建购物车通知粘滞条实际上只涉及几个简单的步骤，但结果可能非常有效。您可能已经知道，购物车通知仅在用户单击“添加到购物车”按钮后才会出现。但引导用户进入结账页面的是购买过程中的下一个关键步骤。所以当购物车通知作为窗口底部的粘性条弹出时，对用户来说更引人注目。

要创建购物车通知粘滞条，首先在产品页面底部创建一个新的单列行。然后按如下方式更新行设置：

宽度：100%
填充：0px 顶部，0px 底部

然后通过将以下自定义 CSS 添加到主元素来使行具有粘性：

position: -webkit-sticky !important;
position: sticky !important;
bottom: 0px;

注意：正如我们之前所做的，您可以忽略在添加 position:sticky 属性时弹出的错误。

这将使行向上滚动时粘在窗口的底部。

然后更新 z 索引使其保持在最前面，如下所示：

Z指数：10

添加购物车通知模块

创建该行后，将 Woo Cart Notice Module 添加到该行并更新设置如下：

文字文字大小（手机）：15px
边距：0em底部

就是这样！是否要删除页面顶部的默认购物车通知元素取决于您，但为了更好的转换，保留它可能是个好主意。

最后结果

这是两个粘条就位的最终结果。

桌面

移动的

最后的想法

希望这篇文章能帮助我们了解如何在 Divi 中为我们的产品页面创建粘性条。我们介绍了如何创建一个包含产品标题、价格和添加到购物车按钮的粘性栏。我们还展示了如何创建购物车通知粘滞条。这两者都应该有助于购买过程并促进转化。我们甚至不需要插件！

随意探索在您自己的网站上使用产品页面粘滞条的新方法。

我们期待在评论中收到您的来信。

干杯!