WordPress divi主题

如何使用 Divi 为 Woo 产品页面创建响应式块设计

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

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

现在您可以在 Divi 中使用 woo 模块,唯一的限制就是您的想象力。 每个动态 woo 模块都可以像构建器中的所有其他模块一样进行自定义。 在这篇文章中,我们将向您展示如何为您的产品页面重新创建创意块设计。 动态模块被组合成一个从黑暗背景中脱颖而出的创意集。 您还可以免费下载 JSON 文件!

google广告开户

让我们开始吧。

预览

在开始之前,让我们看一下不同屏幕尺寸的设计。

桌面

移动的

免费下载响应式模块设计

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

订阅我们的 Youtube 频道

1. 添加/打开 WooCommerce 产品

产品详情

打开现有产品或创建新产品。 要重新创建此块样式设计,您需要填写以下信息:

  • 标题
  • 描述
  • 价格
  • 类别
  • 属性
  • 特色图片

属性选项卡是从中提取 woo 附加信息模块的信息的地方。 要添加此信息,请单击属性选项卡并创建三个自定义属性,如下所示:

WordPress divi主题
  • 属性:
    • 容量:250ml / 2 茶杯
    • 材质:纯铜
    • 状况:正常磨损

特色图片必须与设计中的颜色具有相同的颜色背景。

启用 Divi Builder 和修改页面设置

填写完所有产品详细信息后,继续启用 Divi Builder。 将页面布局更改为“全角”。

切换到可视化生成器

继续切换到 Visual Builder。

删除默认产品部分

由于我们正在创建自定义产品页面,请继续删除默认的 woo 产品部分。

2. 重新创建响应式块设计

添加新部分

背景

重新创建设计的第一步是添加一个新部分。 添加跨不同屏幕尺寸的渐变背景。

fiverr建站WordPress程序员
  • 背景:渐变
  • 颜色1:浅灰色#f2f6f5
  • 颜色 2:几乎黑色 #313131
  • 方向:
    • 桌面:90%
    • 平板电脑 + 手机:180%
  • 开始+结束:
    • 桌面:50%
    • 平板电脑:40%
    • 电话:30%

浆纱

调整部分的大小设置。

  • 宽度:100%
  • 最大宽度:100%

间距

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

  • 顶部 + 底部填充:0vw

独立站选品工具

能见度

最后,调整部分的溢出。

  • 垂直+水平溢出:隐藏

添加第 1 行

立柱结构

设置部分后,添加第一行和一列。

浆纱

在设计选项卡中,针对不同的屏幕尺寸调整尺寸。

高质量外链购买
  • 宽度:
    • 桌面:50%
    • 平板电脑 + 手机:100%
  • 最大宽度:100%
  • 行对齐:左

能见度

最后,将水平和垂直溢出设置为可见。

  • 水平+可见溢出:可见

添加 Woo 面包屑

内容

添加第一个模块,woo 面包屑模块​​。 选择“此产品”。

JasperAI 10000字免费额度试用

文本

在设计选项卡中,为文本设置如下样式。

  • 文字字体:Fenix
  • 文字颜色:棕色 #594239
  • 字体大小:
    • 台式机:1vw
    • 平板电脑:2vw
    • 电话:3vw

间距

为不同的屏幕尺寸添加一些间距值。

  • 最高边距:3vw
  • 左边距:
    • 台式机:10vw
    • 平板电脑+手机:20vw

添加 Woo 图像

添加内容

现在是时候使用 Woo Image 模块添加产品图片了。 在内容选项卡中,选择“此产品”。

WordPress备份工具updrafplus

浆纱

继续调整模块的大小。

能见度

最后,隐藏溢出。

  • 水平+垂直溢出:隐藏

添加第 2 行

立柱结构

添加具有两列的第二行。

浆纱

首先,调整大小。

  • 天沟宽度:1
  • 宽度:
    • 桌面:53%
    • 平板电脑 + 手机:53%
  • 最大宽度:100%
  • 对齐方式:右

间距

然后,间距值。

  • 最高边距:
    • 台式机:-47vw
    • 平板电脑+手机:0vw
  • 左边距:
  • 底部填充:
  • 左填充:
    • 桌面:0vw
    • 平板电脑:16vw
    • 电话:12vw
  • 右填充:

自定义 CSS

在“高级”选项卡中,添加一些自定义 CSS。

display: flex;

能见度

最后,将溢出设置为可见。

  • 水平+垂直溢出:可见

第 1 列设置

间距

在添加任何模块之前,请调整第 1 列中的间距值。

  • 左填充:4vw
  • 右填充:0vw

第 2 列设置

间距

也调整第 2 列的间距值。

  • 顶部填充:
    • 台式机:7vw
    • 平板电脑:17vw
    • 电话:28vw
  • 右填充:

将文本模块添加到第 1 列

添加内容

现在是时候添加模块了。 从文本模块开始。 插入产品的描述性内容。

文本

然后,设置文本样式。

  • 字体:菲尼克斯
  • 颜色:#f2eed0
  • 尺寸:
    • 台式机:1.3vw
    • 平板电脑:2.6vw
    • 电话:3.8vw
  • 字母间距:1px
  • 对齐方式:中心

浆纱

针对不同的屏幕尺寸调整模块的尺寸。

  • 宽度:
    • 桌面:50%
    • 平板电脑:60%
    • 电话:80%

间距

此外,调整间距值如下。

  • 顶部 + 底部填充:1vw
  • 左+右填充:1vw

边界

相应地为模块添加边框。

  • 边框样式:上 + 左 + 右
  • 边框宽度:
  • 边框颜色:
    • 上 + 左 + 右:奶油 #f2eed0

将 Woo 标题添加到第 1 列

添加内容

现在,添加一个 woo 标题模块并在内容选项卡中选择“此产品”。

背景

要设置模块样式,请添加深橙色背景。

  • 背景颜色
  • 颜色:铜橙色#d66b00

标题文字

然后,修改标题文本设置。

  • 标题标题级别:H1
  • 字体:菲尼克斯
  • 颜色:奶油色#f2eed0
  • 尺寸:
    • 台式机:2.9vw
    • 平板电脑:7.8vw
    • 电话:13.9vw
  • H1 字母间距:1px

浆纱

此外,调整模块的大小

间距

然后,添加一些填充值。

  • 顶部 + 底部填充:
    • 台式机:2vw
    • 平板电脑:3vw
    • 电话:4vw
  • 左+右填充:
    • 台式机:2vw
    • 平板电脑:3vw
    • 电话:4vw

边界

最后,添加边框如下。

  • 边框样式:上 + 左 + 右
  • 边框宽度:
  • 边框颜色:
    • 上 + 左 + 右:奶油 #f2eed0

将 Woo 描述标题添加到第 1 列

添加内容

在标题下方,添加 woo 描述模块。 在内容选项卡中,选择“此产品”。

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

文本

然后,设置文本样式。

  • 字体:Open Sans
  • 颜色:奶油色#f2eed0
  • 尺寸:
    • 台式机:08vw
    • 平板电脑:2vw
    • 电话:3vw

浆纱

另外,调整大小。

间距

同样,调整间距。

  • 顶部 + 底部填充:
    • 台式机:2vw
    • 平板电脑+手机:3vw
  • 左+右填充:
    • 台式机:2vw
    • 平板电脑+手机:3vw

边界

与其他模块类似,添加边框。

  • 边框样式:所有四个边框
  • 宽度:2px
  • 颜色:奶油色#f2eed0

将 Woo 附加信息添加到第 2 列

添加内容

现在是时候使用 woo 附加信息模块添加自定义属性了。 在内容选项卡中,选择“此产品”。

文本

更改文本设置如下。

  • 字体:Open Sans
  • 风格:斜体
  • 颜色:奶油色#f2eed0
  • 尺寸:
    • 台式机:0.6vw
    • 平板电脑:1.6vw
    • 电话:2.2vw

属性文本

然后,相应地设置属性文本的样式:

  • 字体:菲尼克斯
  • 颜色:奶油色#f2eed0
  • 尺寸:
    • 台式机:1.1vw
    • 平板电脑:2vw
    • 电话:3vw
  • 间距:1px

浆纱

另外,调整大小。

边界

最后,添加边框。

  • 边框样式:上 + 右 + 下
  • 边框宽度:
    • 上+右+下:2px
  • 边框颜色:
    • 上 + 右 + 下:奶油 #f2eed0

添加第 3 行

立柱结构

添加第三行,两列。

浆纱

在添加模块之前,针对不同的屏幕尺寸调整行的大小。

  • 宽度:
    • 桌面:50%
    • 平板电脑:87%
    • 电话:93%
  • 对齐方式:右

填充

另外,调整填充。

第 1 列设置

间距

继续调整第一列中的填充。

  • 左填充:
    • 台式机:5vw
    • 平板电脑+手机:12vw

将 Woo 价格添加到第 1 列

添加内容

现在,使用 woo price 模块添加产品的价格。 在内容选项卡中,选择“此产品”。

价格文本

然后,相应地设置文本样式。

  • 字体:菲尼克斯
  • 颜色:奶油色#f2eed0
  • 尺寸:
    • 台式机:1.5vw
    • 平板电脑:3.5vw
    • 电话:5vw

浆纱

此外,调整模块的大小。

  • 宽度:
    • 桌面:39%
    • 平板电脑:45%
    • 电话:54%

间距

也调整间距。

  • 顶部填充:
    • 台式机:1vw
    • 平板电脑:2vw
    • 电话:3v2
  • 底部填充:
    • 台式机:1vw
    • 平板电脑+手机:2vw
  • 左填充:
    • 台式机:1vw
    • 平板电脑+手机:2vw
  • 右填充:

边界

最后,添加边框。

  • 边框样式:所有四个边
  • 宽度:2px
  • 颜色:奶油色#f2eed0

添加 Woo 添加到购物车到第 2 列

添加内容

最后一个模块是 woo 添加到购物车模块。 在内容选项卡中,选择“此产品”。

按钮样式

按如下方式设置按钮样式。

  • 自定义样式:是
  • 按钮文字大小:
    • 台式机:1.3vw
    • 平板电脑:3.5vw
    • 电话:5vw
  • 文字颜色:奶油色#f2eed0
  • 背景颜色:铜橙色#d66b00

按钮填充

然后,为按钮添加一些填充值。

  • 顶部 + 底部填充:0.5vw
  • 左+右填充:1.5vw

浆纱

最后但同样重要的是,调整模块的大小,你就完成了!

预览

让我们最后看一下不同屏幕尺寸的结果。

桌面

移动的

这是一个包装

就是这样! 如果您的内容比本教程中的内容长或短,则可能会破坏块的间距。 您所要做的就是调整列设置,使其更适合合成。 我们希望本教程能激发您创造更多令人惊叹的 Divi 设计。 如果您有任何问题,请在评论中告诉我们。

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