WordPress divi主题

为 Divi 下载漂亮的全屏产品页面

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

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

由于 WooCommerce 模块已成为 Divi 的一部分,我们向您展示了您可以使用 Divi 的内置选项创建的几个产品页面设计。 今天,我们将向该列表添加一个新教程,向您展示如何创建漂亮的全屏产品页面。 我们将所有产品内容放在一个部分中,同时创造出令人惊叹的设计。 尽管我们限制了产品页面上所需的垂直滚动,但无论如何设计看起来并没有压倒性的。 我们还确保设计在小屏幕尺寸上保持美观和响应。 您还可以免费下载 JSON 文件!

google广告开户

让我们开始吧。

预览

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

桌面

全屏产品页面

移动的

全屏产品页面

免费下载全屏产品布局

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

订阅我们的 Youtube 频道

让我们开始重建吧!

打开现有产品页面

您需要做的第一件事是打开现有产品页面或创建新页面。 对于这个特定的布局,我们在产品页面中添加了以下元素:

  • 产品名称
  • 特色图片
  • 简短的介绍
  • 描述
  • 价格

启用 Divi 和修改页面设置

继续启用 Divi 并在页面设置中更改页面布局。

WordPress divi主题

全屏产品页面

切换到可视化生成器

完成后,您可以切换到 Visual Builder。

全屏产品页面

删除现有部分

在 Visual Builder 中,您会注意到包含默认产品页面项目的部分。 您可以继续删除整个部分。 在本文的后续步骤中,我们将重新创建自己的替代设计。

全屏产品页面

添加新部分

间距

是时候开始创作了! 添加新部分,打开部分设置并修改顶部和底部填充值。

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

全屏产品页面

溢出

也隐藏该部分的溢出。

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

全屏产品页面

添加新行

立柱结构

继续使用以下列结构向该部分添加新行:

fiverr建站WordPress程序员

全屏产品页面

浆纱

在不添加任何模块的情况下,打开行设置并调整大小设置,如下所示:

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

全屏产品页面

第 1 列

Z 指数

我们还在可见性设置中增加了第一列的 z 索引。

全屏产品页面

独立站选品工具

第 2 栏

渐变背景

接下来打开第 2 列设置并添加跨不同屏幕尺寸的渐变背景:

  • 颜色 1:#ffcb49
  • 颜色2:#ffffff
  • 渐变类型:径向
  • 径向:中心
  • 起始位置:66%(台式机)、50%(平板电脑和手机)
  • 终端位置:66%(台式机)、50%(平板电脑和手机)

全屏产品页面

将 Woo 标题模块添加到第 1 列

动态内容

是时候开始添加模块了! 在第 1 列中,我们唯一需要的模块是 Woo 标题模块。

全屏产品页面

标题文本设置

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

高质量外链购买
  • 标题字体:蒙特塞拉特
  • 标题字体粗细:超轻
  • 标题文本对齐方式:左(桌面)、居中(平板电脑和手机)
  • 标题文字大小:9vw

全屏产品页面

浆纱

也修改模块的大小。

  • 宽度:50vw(桌面),100%(平板电脑和手机)

全屏产品页面

间距

连同间距设置。

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

全屏产品页面

JasperAI 10000字免费额度试用

变换旋转

最后但同样重要的是,在变换设置中旋转整个模块。

  • 左:270 度(桌面),0 度(平板电脑和手机)

全屏产品页面

将 Woo 图像模块添加到第 2 列

动态内容

进入第二个模块! 在那里,我们唯一需要的模块是 Woo Image Module。

全屏产品页面

图像设置

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

WordPress备份工具updrafplus
  • 图像圆角:1vw(所有角)

全屏产品页面

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

全屏产品页面

浆纱

通过更改尺寸设置中的宽度和模块对齐来完成 Woo 图像模块的设置。

  • 宽度:35vw
  • 模块对齐:中心

全屏产品页面

将 Woo 描述模块 #1 添加到第 3 列

动态内容

到最后一栏! 在那里,我们需要的第一个模块是 Woo 描述模块。

  • 产品:本产品
  • 描述类型:简短描述

全屏产品页面

文字设置

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

  • 文字字体:蒙特塞拉特
  • 文本字体样式:大写
  • 文字大小:1vw(桌面)、2vw(平板电脑)、3vw(手机)
  • 文字字母间距:-0.07vw
  • 文字行高:1.8em

全屏产品页面

间距

也修改间距设置。

  • 最高边距:9vw
  • 左填充:2vw(桌面),5vw(平板电脑和手机)
  • 右填充:5vw

全屏产品页面

将 Woo 价格模块添加到第 3 列

动态内容

进入下一个模块,即 Woo 价格模块。

全屏产品页面

价格文本设置

更改模块的价格文本设置如下:

  • 价格字体:蒙特塞拉特
  • 价格文字颜色:#333333
  • 价格文字大小:3vw(台式机)、7vw(平板电脑)、10vw(手机)
  • 价格线高度:1.8em

全屏产品页面

间距

也修改间距设置。

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

全屏产品页面

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

动态内容

我们需要完成此设计的下一个也是最后一个模块是 Woo 添加到购物车模块。

全屏产品页面

字段设置

更改模块的字段设置如下:

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

全屏产品页面

  • 字段文本大小:1vw(桌面)、2vw(平板电脑)、3vw(手机)
  • 场圆角:50vw(所有角)

全屏产品页面

按钮设置

也可以使用按钮设置。

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

全屏产品页面

全屏产品页面

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

全屏产品页面

间距

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

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

全屏产品页面

将产品页面变成模板

将页面布局保存到 Divi 库

完成全屏产品页面后,您可以使用 Divi 的 Theme Builder 将其用于您的每个产品。 为此,请保存您刚刚在 Divi 库中创建的布局。

全屏产品页面

将新模板添加到主题生成器

转到 Divi 设置中的 Theme Builder 并添加一个新模板。

全屏产品页面

选择您希望此布局显示的产品页面。

全屏产品页面

将布局上传到模板的正文

然后,单击“添加全局主体”并选择“从库中添加”。

全屏产品页面

在“您保存的布局”选项卡中选择您的布局。

全屏产品页面

并保存您的所有更改!

全屏产品页面

预览

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

桌面

全屏产品页面

移动的

全屏产品页面

最后的想法

在这篇文章中,我们向您展示了如何重新创建一个漂亮的全屏产品页面,您可以将其用于您正在设置的任何类型的电子商务网站。 我们匹配了各种 woo 模块的设置,以创造令人惊叹的结果并限制所需的垂直滚动。 我们希望这种设计也能激发您创建自己的全屏产品页面! 如果您有任何疑问,请随时在下面的评论部分发表评论。

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