WordPress divi主题

如何在令人惊叹的 Divi 网站英雄部分突出产品类别

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

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

如果您熟悉电子商务网站,那么您无疑也熟悉产品类别。 产品类别可能是您网站上一些最强大的页面。 这就是为什么让它们易于查找并以简单而优雅的方式突出显示它们很重要的原因。 使用 Divi 的内置选项,您可以在多个方向进行设计。 在本教程中,我们将向您展示如何在您的英雄部分突出显示产品类别。 我们将从头开始创建设计示例,希望它也能激发您以自己的创造性方式突出产品类别!

google广告开户

让我们开始吧。

预览

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

突出产品类别

让我们开始创作吧!

订阅我们的 Youtube 频道

添加新部分

渐变背景

首先向您的页面添加一个新部分。 打开此部分的设置并为其添加渐变背景。

  • 颜色1:#ffffff
  • 颜色 2:#757f1e
  • 渐变类型:线性
  • 渐变方向:90度
  • 起始位置:50%
  • 结束位置:50%

突出产品类别

间距

然后,转到设计选项卡并在该部分添加一些自定义顶部和底部填充。

  • 上边距:130px
  • 底部填充:130px

突出产品类别

WordPress divi主题

添加第 1 行

立柱结构

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

突出产品类别

第 1 列背景颜色

在不添加任何模块的情况下,打开行设置并为第一列添加背景颜色。

  • 第 1 列背景颜色:rgba(0,0,0,0.19)

突出产品类别

第 1 列背景图像

将背景图像添加到第一列以及混合模式。

  • 第一列背景图片位置:底部中心
  • 第 1 列背景图像重复:无重复
  • 第 1 列背景图像混合:相乘

突出产品类别

第 2 列背景颜色

第二列只需要白色背景色。

  • 第 2 列背景颜色:#ffffff

突出产品类别

浆纱

继续转到行设置的设计选项卡并更改尺寸设置。

  • 使用自定义宽度:是
  • 单位:PX
  • 自定义宽度:2000px
  • 使用自定义装订线宽度:是
  • 天沟宽度:1
  • 均衡柱高:是

突出产品类别

fiverr建站WordPress程序员

间距

也删除该行的所有默认自定义填充。

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

突出产品类别

盒子阴影

并添加一个微妙的盒子阴影。

  • 盒子阴影模糊强度:80px

突出产品类别

将文本模块添加到第 2 列

添加内容

是时候开始添加模块了! 第二列中我们需要的第一个模块是标题文本模块。 添加一些选择的内容。

独立站选品工具

突出产品类别

标题文字设置

接下来,转到标题文本设置并进行一些更改。

  • 标题字体粗细:超粗体
  • 标题文字大小:60px(台式机和平板电脑),50px(手机)
  • 标题字母间距:-4px
  • 标题行高度:0.8em

突出产品类别

间距

添加一些自定义边距和填充值。

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

突出产品类别

高质量外链购买

将分隔模块添加到第 2 列

能见度

第二列中需要的第二个也是最后一个模块是分频器模块。 确保启用了显示分隔线选项。

突出产品类别

颜色

接下来更改分隔线的颜色。

突出产品类别

风格

也在样式设置中修改分隔线样式。

JasperAI 10000字免费额度试用

突出产品类别

浆纱

并在模块的尺寸设置中增加 Divider Weight。

突出产品类别

间距

最后,为 Divider Module 添加一些自定义的顶部和底部边距。

  • 最高边距:2vw
  • 底边距:15vw

突出产品类别

WordPress备份工具updrafplus

添加第 2 行

立柱结构

上第二排! 为其选择以下列结构:

突出产品类别

第 1 列背景颜色

打开行设置并为第一列添加背景颜色。

  • 第 1 列背景颜色:#212121

突出产品类别

浆纱

接下来,转到设计选项卡并调整行的大小。

  • 使用自定义宽度:是
  • 单位:PX
  • 自定义宽度:2000px
  • 使用自定义装订线宽度:是
  • 天沟宽度:1

突出产品类别

间距

通过将“0px”添加到顶部和底部填充来删除行的所有自定义填充。

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

突出产品类别

盒子阴影

最后但并非最不重要的一点是,给该行一个微妙的盒子阴影。

  • 盒子阴影模糊强度:80px

突出产品类别

将文本模块 #1 添加到第 1 列

添加内容

我们需要的第一个模块是文本模块。 在第一列中添加一个选择的内容。

突出产品类别

文字设置

继续转到设计选项卡并更改文本设置。

  • 文字字体粗细:轻
  • 文字颜色:#ffffff
  • 文字大小:18px(桌面)、15px(平板电脑)、12px(手机)
  • 文本行高:1em
  • 文字方向:左
  • 文字颜色:浅色

突出产品类别

突出产品类别

标题文字设置

修改标题文本设置。

  • 标题 3 文字颜色:#ffffff
  • 标题 3 文字大小:25 像素(桌面)、20 像素(平板电脑)、18 像素(手机)
  • 标题 3 字母间距:-1px

突出产品类别

间距

在间距设置中添加一些自定义填充值。

  • 上边距:30px
  • 底部填充:30px
  • 左填充:50px
  • 右内边距:50px

突出产品类别

将文本模块 #2 添加到第 2 列

添加内容

继续向第二列添加另一个文本模块。 在链接设置中添加一些选择内容并链接产品类别页面。

突出产品类别

默认背景颜色

然后,转到背景设置并添加背景颜色。

  • 背景颜色:#eaeaea

突出产品类别

悬停背景颜色

在悬停时更改此背景颜色。

  • 背景颜色:#ffbb00

突出产品类别

默认文本设置

接下来更改设计选项卡中的文本设置。

  • 文字字体粗细:超粗体
  • 文本字体样式:大写
  • 文字颜色:#333333
  • 文字大小:16px
  • 文字字母间距:-1px
  • 文本方向:中心

突出产品类别

突出产品类别

悬停文本设置

并在悬停时修改这些设置。

  • 文字颜色:#ffffff
  • 文字大小:20px

突出产品类别

默认间距

我们还应用了一些默认间距值。

  • 上边距:45px
  • 底部填充:45px
  • 左填充:5px
  • 右内边距:5px

突出产品类别

悬停间距

我们将在悬停时更改。

  • 上边距:-50px
  • 左边距:-20px
  • 上边距:70px
  • 底部填充:70px
  • 左填充:5px
  • 右内边距:5px

突出产品类别

默认框阴影

继续打开盒子阴影设置并添加一个完全透明的盒子阴影。

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

突出产品类别

悬停框阴影

更改悬停时完全透明的框阴影颜色以使其显示。

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

突出产品类别

克隆文本模块 #2 两次并放置在剩余的列中

完成第 2 列中的文本模块的修改后,您可以继续克隆该模块两次,并将副本放置在该行的剩余两列中。

突出产品类别

更改第一个副本

更改内容

打开第三列的第一个副本,更改产品类别的内容和链接。

突出产品类别

更改背景颜色

更改此模块的背景颜色。

  • 背景颜色:#dddddd

突出产品类别

更改第二个副本

更改内容

也更改第 4 列中第二个副本的内容。

突出产品类别

更改背景颜色

连同背景颜色。

  • 背景颜色:#c6c6c6

突出产品类别

将较小屏幕尺寸的图像模块添加到第 1 行的第 2 列

上传图片

最后但并非最不重要的一点是,我们还将在第一行的第二列添加一个图像模块,以针对较小的屏幕尺寸优化所有内容。

突出产品类别

能见度

通过在模块的高级选项卡中将其隐藏在桌面上,确保此模块仅出现在较小的屏幕尺寸上。

突出产品类别

预览

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

突出产品类别

最后的想法

在这篇文章中,我们重新创建了一个令人惊叹的设计示例,将您网站的主要产品类别置于聚光灯下。 我们希望本教程也能激发您创建自己的设计。 如果您有任何问题或建议,请务必在下面的评论部分发表评论!

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