WordPress divi主题

如何在您的 Divi 登陆页面上创造性地展示热门产品

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

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

在着陆页上展示热门产品时,不仅要选择合适的产品,而且要有吸引力地展示它们。 借助 Divi 的新 WooCommerce 模块,无数新的设计可能性落入我们的怀抱。 为了帮助您获得灵感,我们将重新创建一个美丽而优雅的流行产品设计,您可以将其用于您的下一个 Divi 登录页面。 您还可以免费下载 JSON 文件!

google广告开户

让我们开始吧。

预览

在深入学习本教程之前,让我们快速浏览一下不同屏幕尺寸的结果。

桌面

静止的

热门产品

徘徊

热门产品

移动的

热门产品

免费下载热门产品布局

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

让我们开始重建吧!

添加新部分

间距

首先将常规部分添加到新页面或现有页面。 打开部分设置并相应地调整顶部和底部填充值:

  • 顶部填充:8vw
  • 底部填充:8vw

热门产品

添加新行

立柱结构

继续使用以下列结构添加新行:

WordPress divi主题

热门产品

浆纱

在不添加任何模块的情况下,打开行设置并修改行的大小设置。

  • 使用自定义装订线宽度:是
  • 天沟宽度:1
  • 宽度:85vw
  • 最大宽度:100%

热门产品

将 Woo 图像模块添加到列

动态内容

是时候开始添加模块了! 我们需要的第一个模块是 Woo Image Module。 选择您要展示的产品。

热门产品

图片

转到设计选项卡并更改图像设置。

  • 图像圆角:20px(所有角)

热门产品

  • 盒子阴影模糊强度:50px
  • 阴影颜色:rgba(0,0,0,0.3)

热门产品

将 Woo 标题模块添加到列

动态内容

我们需要的下一个模块是 Woo Title Module。 选择您喜欢的产品。

热门产品

fiverr建站WordPress程序员

标题文本设置

修改模块的标题文本设置如下:

  • 标题标题级别:H3
  • 标题字体:Prata
  • 标题文字大小:3vw(桌面)、5vw(平板电脑)、7vw(手机)

热门产品

间距

通过添加一些跨不同屏幕尺寸的自定义边距值来完成模块的设置。

  • 最高利润率:7vw(桌面)、14vw(平板电脑和手机)
  • 底边距:2vw(桌面)、4vw(平板电脑和手机)
  • 左边距:2vw(桌面),5vw(平板电脑和手机)
  • 右边距:2vw(桌面),5vw(平板电脑和手机)

热门产品

将 Woo 描述模块添加到列

动态内容

进入下一个模块,即 Woo 描述模块。 选择您喜欢的产品。

独立站选品工具

热门产品

文字设置

转到模块的设计选项卡并更改文本设置,如下所示:

  • 文字字体:蒙特塞拉特
  • 文字大小:0.8vw(桌面)、1.6vw(平板电脑)、2vw(手机)
  • 文字行高:1.8em

热门产品

间距

也可以在不同的屏幕尺寸上使用自定义边距值。

  • 最高边距:2vw(台式机)、4vw(平板电脑和手机)
  • 底边距:2vw(桌面)、4vw(平板电脑和手机)
  • 左边距:2vw(桌面),5vw(平板电脑和手机)
  • 右边距:2vw(桌面),5vw(平板电脑和手机)

热门产品

高质量外链购买

将 Woo 添加到购物车模块添加到列

动态内容

在 Woo 描述模块的正下方,我们将添加一个 Woo 添加到购物车模块。 选择您喜欢的产品。

热门产品

默认字段设置

转到模块的设计选项卡并更改字段设置,如下所示:

  • 字段背景颜色:#ffffff
  • 字段文本颜色:#3d3d3d
  • 字段字体:蒙特塞拉特

热门产品

  • 字段边框宽度:0px
  • 字段边框颜色:#3d3d3d

热门产品

JasperAI 10000字免费额度试用

悬停字段设置

修改悬停时的边框宽度。

热门产品

默认按钮设置

接下来打开按钮设置并设置按钮样式。

  • 为按钮使用自定义样式:是
  • 按钮文字大小:1vw(桌面)、3vw(平板电脑)、4vw(手机)
  • 按钮文字颜色:#3d3d3d
  • 按钮背景颜色:#FFFFFF
  • 按钮边框宽度:0px
  • 按钮边框颜色:#3d3d3d

热门产品

热门产品

WordPress备份工具updrafplus
  • 顶部填充:0.5vw
  • 底部填充:0.5vw
  • 左填充:2vw
  • 右填充:2vw

热门产品

悬停按钮设置

更改悬停时的按钮边框宽度。

热门产品

间距

然后,转到间距并在不同的屏幕尺寸上添加一些自定义边距值。

  • 底边距:7vw(桌面)、14vw(平板电脑和手机)
  • 左边距:2vw(桌面),5vw(平板电脑和手机)
  • 右边距:2vw(桌面),5vw(平板电脑和手机)

热门产品

默认边框设置

修改模块的边框设置。

  • 底部边框宽度:1px
  • 底部边框颜色:#3d3d3d

热门产品

悬停边框设置

并删除悬停时的边框宽度。

热门产品

将 Woo 价格模块添加到列

动态内容

我们在专栏中需要的最后一个模块是 Woo 价格模块。 选择您喜欢的产品。

热门产品

标题文本设置

转到模块的设计选项卡并相应地更改价格文本设置:

  • 价格文本字体:蒙特塞拉特
  • 价格文本字体粗细:轻
  • 价格文字颜色:#333333
  • 价格文字大小:2vw(台式机)、4vw(平板电脑)、6vw(手机)
  • 价格线高度:1.8em

热门产品

间距

也修改边距值。

  • 底边距:5vw
  • 左边距:2vw(桌面),5vw(平板电脑和手机)
  • 右边距:2vw(桌面),5vw(平板电脑和手机)

热门产品

克隆柱两次

完成列和其中的所有模块后,您可以克隆整个列两次。

热门产品

更改行列结构

接下来更改行的列结构。

热门产品

更改所有动态内容

继续将第 2 列和第 3 列中的所有动态内容更改为您选择的其他产品。

热门产品

更改第 2 列模块间距

Woo 标题模块

第二列中的模块需要一些额外的间距更改。 从 Woo 标题模块开始。

  • 左边距:5vw(所有设备)
  • 右边距:5vw(所有设备)

热门产品

Woo 描述模块

接下来更改 Woo 描述模块的间距设置。

  • 最高边距:4vw(所有设备)
  • 底边距:4vw(所有设备)
  • 左边距:5vw(所有设备)
  • 右边距:5vw(所有设备

热门产品

Woo 添加到购物车模块

转到 Woo 添加到购物车模块的间距设置。

  • 左边距:5vw(所有设备)
  • 右边距:5vw(所有设备)

热门产品

Woo 价格模块

并通过修改 Woo 价格模块的间距设置来完成第 2 列模块。

  • 左边距:5vw(所有设备)
  • 右边距:5vw(所有设备)

热门产品

列样式

所有列

背景颜色

现在我们已经准备好所有模块,我们可以开始设置列的样式了。 每一列都需要白色背景色。

  • 背景颜色:#ffffff

热门产品

边界

您也可以在每列的角落添加“20px”。

  • 圆角:20px(所有角)

热门产品

第 1 列和第 3 列

默认框阴影

继续向第 1 列和第 3 列添加默认框阴影。

  • 盒子阴影垂直位置:22px
  • Box Shadow 阴影模糊强度:150px
  • 阴影颜色:rgba(0,0,0,0)(桌面),rgba(0,0,0,0.1)(平板电脑和手机)

热门产品

悬停框阴影

更改悬停时的悬停阴影颜色。

  • 阴影颜色:rgba(0,0,0,0.27)

热门产品

默认过滤器

然后,转到过滤器设置并为第 1 列和第 3 列添加一些模糊。

  • 模糊:4px(桌面),0px(平板电脑和手机)

热门产品

悬停过滤器

消除悬停时的模糊。

热门产品

默认 Z 索引

将相同的默认 z 索引值分配给接下来的列。

热门产品

悬停 Z 指数

并在悬停时增加相同的 z 索引。

热门产品

仅第 1 列

转换翻译

继续使用变换转换选项更改第 1 列的位置。

  • 右:7vw(台式机)、0vw(平板电脑和手机)
  • 底部:2vw(台式机)、0vw(平板电脑和手机)

热门产品

仅限第 3 列

转换翻译

接下来打开第 3 列转换设置并应用以下设置:

  • 右:7vw(台式机)、0vw(平板电脑和手机)
  • 底部:-2vw(台式机)、0vw(平板电脑和手机)

热门产品

仅第 2 列

盒子阴影

转到第 2 列设置并应用微妙的框阴影。

  • 盒子阴影垂直位置:22px
  • 盒子阴影模糊强度:150px
  • 阴影颜色:rgba(0,0,0,0.27)(桌面),rgba(0,0,0,0.1)(平板电脑和手机)

热门产品

Z 指数

最后但同样重要的是,更改第二列的 z 索引,您就完成了!

热门产品

预览

现在我们已经完成了所有步骤,让我们最终看看不同屏幕尺寸的结果。

桌面

静止的

热门产品

徘徊

热门产品

移动的

热门产品

最后的想法

在这篇文章中,我们向您展示了如何在 Divi 登录页面上优雅地展示流行产品。 我们一步一步地向您展示了如何仅使用 Divi 的内置选项创建漂亮的结果。 这个设计示例展示了 Divi 的新 WooCommerce 模块的多功能性以及如何立即创建令人惊叹的电子商务网页设计。 如果您有任何问题或建议,请随时在下面的评论部分发表评论!

如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品,请务必订阅我们的电子邮件通讯和 YouTube 频道,这样您将永远是第一批了解并从这些免费内容中受益的人之一。

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题