WordPress divi主题

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

by | May 9, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

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

google广告开户

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

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

让我们开始吧!

抢先看

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

免费下载粘滞条布局

要掌握本教程中的设计,您首先需要使用下面的按钮下载它。 要访问下载,您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者,您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包! 如果您已经在列表中,只需在下面输入您的电子邮件地址,然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

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

WordPress divi主题

让我们来看看教程好吗?

你需要什么开始

要开始,您需要执行以下操作:

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

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

第 1 部分:在产品页面上设计粘滞栏

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

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

产品页面应与此类似。

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

fiverr建站WordPress程序员

行设置

在添加任何模块之前,更新行设置如下:

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

使行具有粘性

要使行保持粘性,请将以下自定义 CSS 添加到桌面的主元素:

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

然后将以下 CSS 添加到同一主元素以用于平板电脑显示:

top: 0px;

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

独立站选品工具

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

完成 CSS 后,按如下方式更新 Z 索引:

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

列自定义 CSS

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

高质量外链购买
display:flex;
align-items:center;

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

添加 Woo 标题

将新的 Woo 标题模块添加到粘性行的列。

然后更新设置如下:

JasperAI 10000字免费额度试用
  • 标题文字颜色:#ffffff
  • 标题文字大小:28px(桌面)、20px(平板电脑)、16px(手机)
  • 宽度:30%
  • 填充:2vw 顶部,2vw 底部,2vw 左侧,2vw 右侧

添加 Woo 价格

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

然后更新 Woo Price 设置如下:

  • 价格文字大小:28px(台式机)、20px(平板电脑)、16px(手机)
  • 宽度:30%
  • 填充:2vw 顶部,2vw 底部,2vw 左侧,2vw 右侧
  • 右边框宽度:1px
  • 右边框颜色:#777777
  • 左边框宽度:1px
  • 左边框颜色:#777777

WordPress备份工具updrafplus

添加 Woo 添加到购物车模块

对于最后一条内容,在 Woo 价格模块之后添加一个 Woo 添加到购物车模块。

然后更新设置如下:

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

  • 显示数量字段:OFF(平板电脑)
  • 显示库存:关闭

  • 文本对齐:右
  • 为按钮使用自定义样式:是
  • 按钮文字大小: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 索引使其保持在最前面,如下所示:

添加购物车通知模块

创建行后,将 Woo Cart Notice Module 添加到行并更新设置,如下所示:

  • 文字文字大小(电话):15px
  • 边距:0em 底部

就是这样! 是否要删除页面顶部的默认购物车通知元素取决于您,但最好保留它以实现更好的转换。

最后结果

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

桌面

移动的

最后的想法

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

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

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

干杯!