如何使用 Divi 创建滚动时尚目录

在这篇文章中，我们将向您展示如何创建滚动时尚目录。 使用这种方法将帮助您与观众建立联系，就像将纸质目录交给他们一样。 创建在线滚动时尚目录可能有助于增加您从目录中获得的结果。 例如，通过包含指向商店商品的直接链接，购买过程也将得到改进。

结果

我们将逐步向您展示如何创建的结果在桌面上看起来像这样：

在手机和平​​板电脑上是这样的：

如何使用 Divi 创建滚动时尚目录

订阅我们的 YouTube 频道

使用 Photoshop 为图像添加透明形状

我们将向您展示的第一件事是如何使用 Photoshop 为图像添加透明部分。 Photoshop 有一个免费的替代品 GimpShop，但在本教程的这一部分，我们将仅使用 Photoshop。 我们需要两张具有两种不同形状的图像； 一种用于台式机，一种用于手机和平板电脑。 在这一部分，我们将简单地向您展示如何为图像添加透明形状。 之后，您可以自己制作所有需要的图像。

打开 Photoshop

首先在您的计算机上打开 Photoshop。

打开图片

接下来，打开您要编辑的第一张图片。 对于您将在本教程中使用的所有三个图像，该方法保持不变。 这就是为什么我们只解释一次。

双击图像并创建图层

打开要编辑的图像后，双击该图像并为其创建一个新图层。

添加另一层

继续在它上面添加另一个空层。

选择图层 1 和多边形套索工具

选择图层 1 并开始使用多边形套索工具。

做一个形状

在激活多边形套索工具的同时，继续在图像中创建透明形状。

使图层 1 不可见并在选择图层 0 时按 Delete

选择要变得透明的区域后，继续使图层 1 不可见，再次选择图层 0，然后按键盘上的删除按钮。

选择矩形选框工具并单击图像上的某处

完成后，选择矩形选框工具并单击图像上的某处。

将图像另存为 PNG

最后，您需要将图像另存为 PNG，并对您将在整个布局中使用的所有四个图像重复相同的过程。

主菜单栏设置

我们正在创建的布局所需的主菜单栏设置如下：

• 隐藏徽标图像：启用
• 菜单高度：30
• 文字大小：15
• 字母间距：-1
• 字体：拉托
• 字体样式：粗体和大写
• 文字颜色：#FFFFFF
• 活动链接颜色：#FFFFFF
• 背景颜色：rgba(255,255,255,0)
• 下拉菜单背景颜色：rgba(255,255,255,0)

版本介绍

修改主菜单栏后，您可以继续添加一个新页面，使用 Divi Builder 并切换到 Visual Builder。

添加新部分

在该页面中，首先添加一个标准部分。

部分背景颜色

该颜色的背景需要是“#d6d6d6”。

自定义填充

移至该部分的“设计”选项卡。 在 Spacing 子类别中，将“24px”添加到顶部填充，将 0px 添加到底部。

添加一列行

完成后，您可以继续向该部分添加一列行。

浆纱

转到“设计”选项卡并修改“尺寸”子类别：

• 使这一行全宽：是
• 使用自定义装订线宽度：1

自定义填充

向下滚动并将“0px”添加到行的顶部填充。

第一个文本模块

完成后，您可以向该行添加一个文本模块。 输入要显示的文本后，转到“设计”选项卡并确保以下更改适用于“文本”子类别：

• 文本字体：旧标准 TT
• 字体样式：大写
• 文本字体大小：72（桌面）、41（平板）、29（手机）
• 文字颜色：#000000
• 文字字母间距：11px
• 文本行高：1em
• 文字方向：居中

打开间距子类别并将“30px”添加到顶部和底部填充。

分频器模块

在文本模块的正下方，添加一个分隔线模块并启用“显示分隔线”选项。

转到“设计”选项卡并选择“#FFFFFF”作为分隔线颜色。

接下来，在样式子类别中选择“实心”作为分隔线样式和“顶部”作为分隔线位置。

然后，打开 Sizing 子类别并应用以下设置：

• 分隔线重量：10px
• 高度：23px
• 宽度：100%
  

第二个文本模块

在分隔模块的正下方，添加另一个文本模块。 在字符映射表 (Windows) 或字符调色板 (Mac) 中选择您想要的任何图标并将其放置在内容选项卡中。 对于此示例，我们使用了以下符号：“↓”。 然后，转到“设计”选项卡并应用以下设置：

• 文字字体大小：42px
• 文字颜色：#000000
• 文字方向：居中

桌面时尚目录（新版块）

现在，添加另一个标准部分。 此部分将包含两行，它们将在桌面上显示目录的不同部分。

部分设置

背景颜色

使用“#FFFFFF”作为本节的背景色。

自定义填充

然后，转到“设计”选项卡并将“15px”添加到顶部填充。

第一排

列结构

对设置进行更改后，添加具有以下列结构的行：

背景颜色

打开行设置并添加 'rgba(255,255,255,0.14)' 作为背景颜色。

背景图片

添加您在本文的 Photoshop 部分制作的图像之一，并使用“色调”作为背景图像混合。

浆纱

最后，对 Sizing 子类别进行以下更改：

• 使这一行全宽：是
• 使用自定义装订线宽度：是
• 天沟宽度：1

第一个文本模块

完成行设置后，将文本模块添加到第二列。 对 Text 子类别使用以下设置：

• 文字字体：苦涩
• 文字字体大小：63px
• 文字颜色：#000000
• 文字方向：居中

分频器模块

在第一个文本模块的正下方，添加一个分隔器模块并启用“显示分隔器”选项。

转到“设计”选项卡并使用“#000000”作为分隔线颜色。

在样式子类别中，使用“实体”作为分隔线样式，使用“顶部”作为分隔线位置。

向下滚动同一选项卡，并将以下设置应用于 Sizing 子类别：

• 分隔线重量：3px
• 高度：23px
• 宽度：57%
• 模块对齐：左

最后，添加“30px”的顶部边距和“50px”的底部边距。

第二个文本模块

一旦分隔线就位，继续并添加将包含标题的第二个文本模块。 首先，在“内容”选项卡中使用“#000000”作为其背景色。

然后，转到“设计”选项卡并将以下设置应用于“文本”子类别：

• 文字字体：苦涩
• 文字字体大小：92px
• 文字颜色：#000000
• 文本行高：1em
• 文本方向：左

打开 Border 子类别并使用以下边框：

• 使用边框：是
• 边框颜色：#000000
• 边框宽度：3px
• 边框样式：纯色

此外，使用“77%”的宽度和左模块对齐。

最后，将“15px”添加到文本模块的顶部、右侧、底部和左侧填充。

第三个文本模块

在上一个文本模块的正下方添加另一个文本模块。 这将代表描述。 转到“设计”选项卡并为“文本子类别”使用以下设置：

• 文字字体：Lato
• 文字字体大小：16px
• 文字颜色：#000000
• 文本行高：1em
• 文本方向：左

打开 Sizing 子类别，使用“70%”作为宽度并选择左侧模块对齐。

最后，添加“20px”的顶部边距。

第五课文模块

第五个文本模块用作简约按钮。 在“内容”选项卡中，使用“→”符号 + 文本并在其后面放置一个链接。

然后，转到“设计”选项卡。 对 Text 子类别使用以下设置：

• 文字字体：苦涩
• 文字字体大小：23px
• 文字颜色：#000000
• 文本行高：1em
• 文本方向：左

向下滚动相同的选项卡，直到您遇到 Sizing 子类别。 在该子类别中，使用“49%”的宽度和正确的模块对齐方式。

最后，添加“80px”的顶部边距。

第六课文模块

我们将需要的第六个也是最后一个模块与前一个模块几乎相同。 使用“→”+ 文本并在其后面放置一个链接。

文本子类别的设置如下：

• 文字字体：苦涩
• 文字字体大小：23px
• 文字颜色：#e02b20
• 文本行高：1em
• 文本方向：左

将宽度更改为“39%”并使用正确的模块对齐方式。

第二排

背景颜色

打开行设置并添加 'rgba(255,255,255,0.14)' 作为背景颜色。

背景图片

添加您在本文的 Photoshop 部分制作的图像之一，并使用“色调”作为背景图像混合。

列结构

您需要添加到标准部分的第二行与前一行正好相反。

克隆模块

我们在前一行中使用的模块与我们在这一行中需要的模块相同，所以继续，克隆它们并将它们放在第一列而不是第二列中。 我们需要在本文的下一部分中进行一些对齐更改。

第一个文本模块修改

打开第一个文本模块并添加“20px”的顶部边距。

分频器模块修改

然后，打开分隔器模块并将大小调整子类别中的模块对齐更改为右侧。

第二个文本模块修改

将第二个文本模块的文本方向设置为右侧。

并在 Sizing 子类别中选择正确的模块对齐方式。

第三个文本模块修改

第三个文本模块也需要正确的文本方向。

以及正确的模块对齐。

第五个文本模块修改

对于第五个文本模块，您唯一需要做的就是将宽度更改为“82%”。

第六文本模块修改

第六个文本模块的计数相同，但使用“87%”代替。

隐藏平板电脑和手机部分

完成两行后，您可以继续在手机和平​​板电脑上禁用整个部分。

平板电脑和手机目录（新版块）

为了让平板电脑和手机上的一切都看起来很棒，我们将创建一个新的标准部分。

部分设置

背景颜色

添加“#FFFFFF”作为该部分的背景颜色。

自定义填充

转到“设计”选项卡并添加“15px”的顶部填充。

第一排

列结构

然后，向该部分添加一个两列的行。

浆纱

转到该行的 Sizing 子类别并进行以下更改：

• 使这一行全宽：是
• 使用自定义装订线宽度：是
• 天沟宽度：1

图像模块

我们不使用背景图像，而是使用图像模块。 这样，我们将确保文本和图像不会重叠。 继续将图像模块添加到行的第一列并上传图像。

克隆桌面版第一行模块

然后，克隆您在桌面版本第一行中使用的所有模块，并将它们放在第二列中。

更改第二个文本模块字体大小

只有一件事需要改变； 第二个文本模块的字体大小。 将其更改为 65px。

第二排

列结构

然后，继续向该部分添加另一个两列行。

浆纱

此行也需要修改大小子类别：

• 使这一行全宽：是
• 使用自定义装订线宽度：是
• 天沟宽度：1

图像模块

将图像模块也添加到第一列并上传图像。

桌面版第二行的克隆模块

然后，继续克隆放置在桌面版本第二行中的模块。 克隆它们后，将它们放在此行的第二列中。

更改第二个文本模块字体大小

第二个文本模块的文本大小也需要更改。 继续并给它一个'65px'的字体大小。

隐藏桌面部分

完成两行后，您可以继续在桌面上禁用整个部分。

结果

瞧，按照本文中的所有步骤操作后，您应该在桌面上获得以下结果：

以及手机和平板电脑上的以下内容：

最后的想法

在这篇文章中，我们向您展示了如何创建一个漂亮的滚动时尚目录。 为了让我们的设计发挥作用，我们首先向您展示了如何使用 Photoshop 在您的图像中制作透明形状。 之后，我们在 Divi 教程中使用这些图像来创建设计。 如果您有任何问题或建议； 确保您在下面的评论部分发表评论！

请务必订阅我们的电子邮件通讯和 YouTube 频道，这样您就不会错过重大公告、有用提示或 Divi 免费赠品！

精选图片来自Rvector / shutterstock.com