WordPress divi主题

如何将滑入式产品信息添加到您的 Divi 产品页面

| 5月 6, 2022 | Divi主题使用教程 | 0 条评论

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

您设计产品页面的方式在很大程度上说明了您的商店。 您的产品页面的设计是购买体验的重要组成部分,因此多做一些通常是值得的。 如果您希望创建更具交互性的产品页面,您会喜欢这篇文章的。 在本教程中,我们将向您展示如何在精美的产品页面布局中添加滑入式产品信息。 我们还将将此布局转换为产品页面模板,您将能够免费下载 JSON 文件!

google广告开户

让我们开始吧。

预览

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

桌面

产品信息

移动的

产品信息

免费下载滑入式产品页面模板

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

1. 添加/打开 WooCommerce 产品

产品详情

从创建新产品或打开现有产品开始。 要在设计中获得完全相同的结果,您需要在产品中添加以下详细信息:

  • 姓名
  • 描述
  • 透明背景的产品图片
  • 价格
  • 类别

产品信息

启用 Divi Builder 并修改产品页面设置

启用 Divi Builder 并更改右上角的页面布局。

产品信息

WordPress divi主题

切换到可视化生成器

更改页面布局后,您可以通过单击“在前端构建”切换到 Divi 的 Visual Builder。

产品信息

2.创建滑入式产品信息产品页面布局

删除页面上的多行

在产品页面编辑器中,您会注意到与您的产品相关的各种元素。 我们只需要第二行的元素,所以继续删除该部分中的第一行和最后一行。

产品信息

修改截面设置

背景颜色

是时候开始修改不同的元素来创建我们的滑入式产品信息布局了! 打开部分设置并更改背景颜色。

  • 背景颜色:#ffe4a5

产品信息

浆纱

也为尺寸设置添加一个最小高度。 此步骤将允许该部分占据浏览器的整个高度。

产品信息

间距

然后,转到间距设置并删除所有默认的顶部和底部填充。

  • 顶部填充:0px
  • 底部填充:0px

产品信息

fiverr建站WordPress程序员

能见度

也隐藏该部分的溢出。 这将有助于确保在动画发生时不会出现水平条。

  • 水平溢出:隐藏
  • 垂直溢出:隐藏

产品信息

修改行设置

浆纱

接下来,打开行设置并修改不同屏幕尺寸的尺寸设置。

  • 使用自定义装订线宽度:是
  • 天沟宽度:1
  • 宽度:100%
  • 最大宽度:100%(桌面)、90%(平板电脑和手机)

产品信息

间距

也删除该行的默认顶部和底部填充。

独立站选品工具
  • 顶部填充:0px
  • 底部填充:0px

产品信息

位置

然后,转到位置设置并通过相应地修改设置来确保该行保持在该部分的底部:

  • 位置:绝对(桌面),默认(平板电脑和手机)
  • 位置:底部中心

产品信息

修改第 2 列设置

背景颜色

接下来,我们将对第二列进行一些更改。 使用白色背景颜色。

  • 背景颜色:#FFFFFF

产品信息

高质量外链购买

间距

然后,将一些自定义填充值添加到间距设置中。

  • 顶部填充:10vw
  • 底部填充:10vw
  • 左填充:8vw
  • 右填充:8vw

产品信息

默认过滤器

转到列的过滤器设置,并确保亮度、反转和棕褐色过滤器将其默认值保持在正常状态。

  • 亮度:100%
  • 反转:0%
  • 棕褐色:0%

产品信息

悬停过滤器

但是,在悬停时,我们将相应地更改值:

JasperAI 10000字免费额度试用
  • 亮度:49%
  • 反转:100%
  • 棕褐色:100%

产品信息

位置

我们还通过应用以下位置设置来确保将列放置在行容器的右下角:

  • 位置:绝对(桌面),默认(平板电脑和手机)
  • 位置:右下角

产品信息

修改第 2 列中的 Woo 标题模块

标题文本设置

是时候开始定制第 2 列中的不同模块了! 打开 Woo Title Module 并更改 H1 文本设置如下:

  • 标题字体:Playfair Display
  • 标题文字颜色:#000000
  • 标题文字大小:3vw(桌面)、5vw(平板电脑)、7vw(手机)

产品信息

WordPress备份工具updrafplus

修改第 2 列中的 Woo 价格模块

价格文本设置

接下来打开 Woo 价格模块设置并更改价格文本设置。

  • 价格字体:Poppins
  • 价格文字颜色:#e5bc87
  • 价格文本大小:1.4vw(台式机)、3vw(平板电脑)、4vw(手机)

产品信息

间距

在不同的屏幕尺寸上添加一些自定义的顶部和底部边距。

  • 最高边距:2vw(台式机)、4vw(平板电脑和手机)
  • 底边距:3vw(台式机)、5vw(平板电脑和手机)

产品信息

修改第 2 列中的 Woo 描述模块

文字设置

进入 Woo 描述模块。 相应地修改模块的文本设置:

  • 文字字体:Poppins
  • 文字字体粗细:轻
  • 文字大小:0.8vw(桌面)、1.8vw(平板电脑)、2.7vw(手机)
  • 文本行高:2.1em

产品信息

间距

也添加一些响应式底部边距。

  • 底边距:3vw(台式机)、5vw(平板电脑和手机)

产品信息

在第 2 列中修改 Woo 添加到购物车模块

字段设置

接下来我们有 Woo 添加到购物车模块。 更改模块的字段设置。

  • 字段背景颜色:rgba(255,255,255,0)
  • 字段文本颜色:#000000
  • 字段字体:Poppins
  • 字段文本大小:0.9vw(桌面)、2vw(平板电脑)、3vw(手机)

产品信息

  • 所有角落:0px
  • 字段底部边框宽度:1px
  • 字段底部边框颜色:#e5bc87

产品信息

按钮设置

继续按钮设置并相应地设置按钮样式:

  • 为按钮使用自定义样式:是
  • 按钮文字大小:0.9vw(桌面)、2vw(平板电脑)、3vw(手机)
  • 按钮文字颜色:#ffffff
  • 渐变色 1:#e5bd89
  • 渐变色 2:#e5bc87
  • 渐变类型:线性
  • 渐变方向:153度
  • 按钮边框宽度:0px

产品信息

  • 按钮边框半径:1px
  • 按钮字体:Poppins

产品信息

  • 顶部填充:1vw(桌面)、2vw(平板电脑)、3vw(手机)
  • 底部填充:1vw(桌面)、2vw(平板电脑)、3vw(手机)
  • 左填充:3vw(桌面)、6vw(平板电脑)、9vw(手机)
  • 右填充:3vw(桌面)、6vw(平板电脑)、9vw(手机)

产品信息

间距

通过在不同的屏幕尺寸上添加一些按钮边距来完成模块的设置。

  • 底边距:2vw (Destkop), 4vw (Tablet & Phone)

产品信息

修改第 2 列中的 Woo 元模块

文字设置

继续打开 Woo 元模块并更改文本设置。

  • 元字体:Poppins
  • 元字体粗细:轻
  • 元文本大小:0.8vw(桌面)、1.8vw(平板电脑)、3vw(手机)

产品信息

链接文本设置

更改链接文本颜色。

产品信息

将代码模块添加到第 2 列

要更改 Woo 图像模块的缩放背景颜色,我们需要一点 CSS 代码,我们将把它放在第 2 列的新代码模块中。

产品信息

添加 CSS 代码以更改 Woo 图像缩放背景颜色

将以下几行 CSS 代码添加到代码模块:

<style>
.zoomImg {
background-color: #FFE4A5 !important;
}
</style>

产品信息

3. 为容器添加同步动画设置

Woo 图像模块

现在我们已经为产品页面上的不同元素设置了样式,是时候实现滑入式产品信息效果了! 为此,我们将使用 Divi 的内置动画设置。 打开第 1 列中的 Woo 图像模块并应用以下动画:

  • 动画风格:幻灯片
  • 动画方向:向上
  • 动画开始不透明度:50%
  • 动画速度曲线:轻松

产品信息

第 1 列

接下来打开第 1 列设置并使用以下动画设置:

  • 动画风格:幻灯片
  • 动画方向:左(桌面),上(平板电脑和手机)
  • 动画延迟:950ms(桌面),0vw(平板和手机)
  • 动画强度:25%
  • 动画开始不透明度:100%
  • 动画速度曲线:Ease-In-Out

产品信息

第 2 栏

最后,将以下动画设置应用于第 2 列:

  • 动画风格:幻灯片
  • 动画方向:左(桌面),上(平板电脑和手机)
  • 动画时长:1200ms
  • 动画延迟:800ms(桌面),0ms(平板和手机)
  • 动画开始不透明度:100%
  • 动画速度曲线:Ease-In-Out

产品信息

4.将产品页面布局变成模板

将布局保存到 Divi 库

完成整个产品页面设计后,您可以将其保存到 Divi 库中。 我们将使用这个保存的产品页面布局来创建一个新的产品页面模板。

产品信息

转到 Divi 主题生成器并添加新模板

转到 Divi Theme Builder 并添加一个新模板。

产品信息

在所有产品上使用模板

在所有产品上使用新模板。

产品信息

将布局上传到产品页面模板的正文

然后,单击“添加自定义正文”,然后单击“从库添加”。

产品信息

导航到“您保存的布局”并选择您已上传到 Divi 库的产品页面布局。

产品信息

5. 保存主题生成器更改并查看结果

将布局上传到新产品页面模板后,剩下要做的就是保存所有 Theme Builder 更改并在您的网站上查看结果!

产品信息

预览

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

桌面

产品信息

移动的

产品信息

最后的想法

在这篇文章中,我们通过向您展示了如何设计滑入式产品信息布局,向您展示了如何为您的产品页面增添趣味。 这是向您的产品页面添加一些额外交互的好方法。 您还可以免费下载 JSON 文件! 如果您有任何问题或建议,请随时在下面的评论部分发表评论。

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

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