如何使用 Divi 为 Woo 产品页面创建响应式块设计
已发表: 2019-11-02现在你可以在 Divi 中使用 woo 模块，唯一的限制就是你的想象力。 每个动态 woo 模块都可以像构建器中的所有其他模块一样进行自定义。 在这篇文章中，我们将向您展示如何为您的产品页面重新创建创意块设计。 动态模块被分组到一个从深色背景中脱颖而出的创意集。 您还可以免费下载 JSON 文件！
让我们开始吧。
预览
在开始之前，让我们来看看不同屏幕尺寸的设计。
桌面
移动的
免费下载响应式块设计
要体验免费的响应式块设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
免费下载
加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。
您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！
订阅我们的 YouTube 频道
1. 添加/打开 WooCommerce 产品
产品详情
打开现有产品或创建新产品。 要重新创建此块样式设计，您需要填写以下信息：
- 标题
- 描述
- 价钱
- 类别
- 属性
- 特色图片
属性选项卡是从中提取 woo 附加信息模块的信息的地方。 要添加此信息，请单击属性选项卡并创建三个自定义属性，如下所示：
- 属性：
- 容量：250ml / 2茶杯
- 材质：纯铜
- 状况：正常磨损
特色图片必须与设计中的颜色具有相同的颜色背景。
启用 Divi Builder 和修改页面设置
填写所有产品详细信息后，继续启用 Divi Builder。 将页面布局更改为“全角”。
切换到可视化生成器
继续切换到 Visual Builder。
删除默认产品部分
由于我们正在创建自定义产品页面，请继续删除默认的 woo 产品部分。
2. 重新创建响应式块设计
添加新部分
背景
重新创建设计的第一步是添加一个新部分。 添加跨不同屏幕尺寸的渐变背景。
- 背景：渐变
- 颜色 1：浅灰色 #f2f6f5
- 颜色 2：几乎黑色 #313131
- 方向：
- 台式机：90%
- 平板电脑 + 手机：180%
- 开始+结束：
- 台式机：50%
- 平板电脑：40%
- 电话：30%
浆纱
调整部分的大小设置。
- 宽度：100%
- 最大宽度：100%
间距
也删除默认的顶部和底部填充。
- 顶部 + 底部填充：0vw
能见度
最后，调整部分的溢出。
- 垂直+水平溢出：隐藏
添加第 1 行
列结构
设置完部分后，添加第一行和一列。
浆纱
在设计选项卡中，调整不同屏幕尺寸的尺寸。
- 宽度：
- 台式机：50%
- 平板电脑 + 手机：100%
- 最大宽度：100%
- 行对齐方式：左
能见度
最后，将水平和垂直溢出设置为可见。
- 水平+可见溢出：可见
添加 Woo 面包屑
内容
添加第一个模块，woo 面包屑模块。 选择“此产品”。
- 产品：本产品
文本
在设计选项卡中，按如下方式设置文本样式。
- 文字字体：Fenix
- 文字颜色：棕色 #594239
- 字体大小：
- 台式机：1vw
- 平板电脑：2vw
- 电话：3vw
间距
为不同的屏幕尺寸添加一些间距值。
- 最高利润率：3vw
- 左边距：
- 台式机：10vw
- 平板电脑 + 手机：20vw
添加 Woo 图像
添加内容
现在是使用 Woo Image 模块添加产品图像的时候了。 在内容选项卡中，选择“此产品”。
- 产品：本产品
浆纱
继续调整模块的大小。
- 宽度：100%
能见度
最后，隐藏溢出。
- 水平+垂直溢出：隐藏
添加第 2 行
列结构
添加具有两列的第二行。
浆纱
首先，调整大小。
- 天沟宽度：1
- 宽度：
- 台式机：53%
- 平板电脑 + 手机：53%
- 最大宽度：100%
- 对齐方式：右
间距
然后，间距值。
- 最高保证金：
- 桌面：-47vw
- 平板电脑 + 手机：0vw
- 左边距：
- 平板电脑：-5vw
- 电话：-8vw
- 底部填充：
- 台式机 + 平板电脑：4.1vw
- 左填充：
- 桌面：0vw
- 平板电脑：16vw
- 电话：12vw
- 右填充：
- 桌面：0vw
- 平板电脑：0vw
自定义 CSS
在高级选项卡中，添加一些自定义 CSS。
- 主要元素 CSS：
- 显示：弹性；
display: flex;
能见度
最后，将溢出设置为可见。
- 水平 + 垂直溢出：可见
第 1 列设置
间距
在添加任何模块之前，请调整第 1 列中的间距值。
- 左填充：4vw
- 右填充：0vw
第 2 列设置
间距
也调整第 2 列的间距值。
- 顶部填充：
- 台式机：7vw
- 平板电脑：17vw
- 电话：28vw
- 右填充：
- 台式机 + 平板电脑：15vw
将文本模块添加到第 1 列
添加内容
现在是添加模块的时候了。 从文本模块开始。 插入产品的描述性内容。
文本
然后，设置文本样式。
- 字体：Fenix
- 颜色：#f2eed0
- 尺寸：
- 台式机：1.3vw
- 平板电脑：2.6vw
- 电话：3.8vw
- 字母间距：1px
- 对齐方式：居中
浆纱
针对不同的屏幕尺寸调整模块的大小。
- 宽度：
- 台式机：50%
- 平板电脑：60%
- 电话：80%
间距
此外，按如下方式调整间距值。
- 顶部 + 底部填充：1vw
- 左 + 右填充：1vw
边界
相应地向模块添加边框。
- 边框样式：顶部 + 左侧 + 右侧
- 边框宽度：
- 上+左+右：2px
- 边框颜色：
- 上 + 左 + 右：奶油 #f2eed0
将 Woo 标题添加到第 1 列
添加内容
现在，添加一个 woo 标题模块并在内容选项卡中选择“此产品”。
- 产品：本产品
背景
要为模块设计样式，请添加深橙色背景。
- 背景颜色
- 颜色：铜橙#d66b00
标题文字
然后，修改标题文本设置。
- 标题标题级别：H1
- 字体：Fenix
- 颜色：奶油色#f2eed0
- 尺寸：
- 台式机：2.9vw
- 平板电脑：7.8vw
- 电话：13.9vw
- H1 字母间距：1px
浆纱
此外，调整模块的大小
- 宽度：100%
间距
然后，添加一些填充值。
- 顶部 + 底部填充：
- 台式机：2vw
- 平板电脑：3vw
- 电话：4vw
- 左 + 右填充：
- 台式机：2vw
- 平板电脑：3vw
- 电话：4vw
边界
最后，添加一个边框如下。
- 边框样式：顶部 + 左侧 + 右侧
- 边框宽度：
- 上+左+右：2px
- 边框颜色：
- 上 + 左 + 右：奶油 #f2eed0
将 Woo 描述标题添加到第 1 列
添加内容
在标题下方，添加一个woo描述模块。 在内容选项卡中，选择“此产品”。
- 产品：本产品
- 描述类型： 描述
文本
然后，设置文本样式。
- 字体：Open Sans
- 颜色：奶油色#f2eed0
- 尺寸：
- 台式机：08vw
- 平板电脑：2vw
- 电话：3vw
浆纱
另外，调整大小。
- 宽度：100%
间距
同样，调整间距。
- 顶部 + 底部填充：
- 台式机：2vw
- 平板+手机：3vw
- 左 + 右填充：
- 台式机：2vw
- 平板+手机：3vw
边界
与其他模块类似，添加边框。
- 边框样式：所有四个边框
- 宽度：2px
- 颜色：奶油色#f2eed0
将 Woo 附加信息添加到第 2 列
添加内容
现在是时候使用 woo 附加信息模块添加自定义属性了。 在内容选项卡中，选择“此产品”。
- 产品：本产品
文本
更改文本设置如下。
- 字体：Open Sans
- 样式：斜体
- 颜色：奶油色#f2eed0
- 尺寸：
- 台式机：0.6vw
- 平板电脑：1.6vw
- 电话：2.2vw
属性文本
然后，相应地设置属性文本的样式：
- 字体：Fenix
- 颜色：奶油色#f2eed0
- 尺寸：
- 台式机：1.1vw
- 平板电脑：2vw
- 电话：3vw
- 间距：1px
浆纱
另外，调整大小。
- 宽度：100%
边界
最后，添加边框。
- 边框样式：顶部 + 右侧 + 底部
- 边框宽度：
- 顶部 + 右侧 + 底部：2px
- 边框颜色：
- 顶部 + 右侧 + 底部：奶油 #f2eed0
添加第 3 行
列结构
添加第三行，两列。
浆纱
在添加模块之前，针对不同的屏幕尺寸调整行的大小。
- 宽度：
- 台式机：50%
- 平板电脑：87%
- 电话：93%
- 对齐方式：右
填充
另外，调整填充。
- 底部填充：12vw
第 1 列设置
间距
继续调整第一列中的填充。
- 左填充：
- 台式机：5vw
- 平板+手机：12vw
将 Woo 价格添加到第 1 列
添加内容
现在，使用 woo 价格模块添加产品的价格。 在内容选项卡中，选择“此产品”。
- 产品：本产品
价格文本
然后，相应地设置文本样式。
- 字体：Fenix
- 颜色：奶油色#f2eed0
- 尺寸：
- 台式机：1.5vw
- 平板电脑：3.5vw
- 电话：5vw
浆纱
另外，调整模块的大小。
- 宽度：
- 台式机：39%
- 平板电脑：45%
- 电话：54%
间距
同样调整间距。
- 顶部填充：
- 台式机：1vw
- 平板电脑：2vw
- 电话：3v2
- 底部填充：
- 台式机：1vw
- 平板电脑 + 手机：2vw
- 左填充：
- 台式机：1vw
- 平板电脑 + 手机：2vw
- 右填充：
- 平板电脑 + 手机：2vw
边界
最后，添加边框。
- 边框样式：所有四个边
- 宽度：2px
- 颜色：奶油色#f2eed0
添加 Woo 添加到购物车到第 2 列
添加内容
最后一个模块是 woo add to cart 模块。 在内容选项卡中，选择“此产品”。
按钮样式
按钮样式如下。
- 自定义样式：是
- 按钮文字大小：
- 台式机：1.3vw
- 平板电脑：3.5vw
- 电话：5vw
- 文字颜色：奶油色#f2eed0
- 背景颜色：铜橙#d66b00
按钮填充
然后，向按钮添加一些填充值。
- 顶部 + 底部填充：0.5vw
- 左 + 右填充：1.5vw
浆纱
最后但并非最不重要的一点是，调整模块的大小，就大功告成了！
- 宽度：100%
预览
让我们最后看看不同屏幕尺寸的结果。
桌面
移动的
这是一个包裹
就是这样！ 如果您的内容比本教程中的内容更长或更短，则可能会破坏块的间距。 您所要做的就是调整列设置，使它们更适合合成。 我们希望本教程能激发您创造更多令人惊叹的 Divi 设计。 如果您有任何问题，请在评论中告诉我们。