为创意列表设计释放 Divi 文本模块的力量

创建独特的列表设计是网页设计的一个重要方面。 读者喜欢精心设计的列表的结构和美感，因为它可以让他们更快地处理信息。

使用 Divi 的文本模块，您拥有将普通列表转换为精美艺术品所需的一切。 Divi 的文本模块设置允许您在内容中定位和设置不同的 html 元素 - 包括列表。 通过一些设计技巧，您可以利用这些选项的强大功能以令人惊讶的方式自定义您的列表。

在本教程中，我将向您展示如何在 Divi 中创建独特的列表设计。

让我们开始吧。

抢先看

以下是我们将在本教程中构建的四种列表设计。

受文本模块设置的启发

如果你像我一样，你可能会忽略一些潜伏在 Divi Builder 深处的“隐藏”选项。 有一些埋藏宝藏的一个模块是文本模块。 文本模块设置有多个选项卡，用于保存不同 html 元素的样式选项。 这可以是一个非常方便和创造性的设计工具。 这些选项卡包括正文、链接、无序列表、有序列表和块引用的选项。

而且，在这些选项卡下有一些隐藏的宝石，您可能没有想过在您的设计中使用它们。 例如，您知道可以更改无序列表的列表样式选项吗？ 有许多独特的选项可用（准确地说是 18 个），包括罗马数字和带前导零的小数。

这些可能看起来微不足道，但是当您利用设计选项时，您可以产生一些非常有创意的设计。

您还可以在标题样式选项下的每个选项卡下定位不同标题级别（或标签）的样式。

这种在内容中定位多个 html 元素的能力开辟了一些美妙的可能性。 希望他们也能激励你。

有关这方面的更多信息，请查看解释了其中一些精彩文本选项的功能更新。

创建您的 HTML 列表

一个 html 列表可以是“有序的”（带有数字、罗马数字等）或“无序的”（带有方形图标、圆形图标等）。 对于无序列表，列表项将被包裹在“ul”标签中（“ul”代表“无序列表”）。 对于有序列表，列表项被包裹在“ol”标签中（“ol”代表“有序列表”）。 每个列表项都包含在一个“li”标签中（“li”代表“列表项”）。

以下是有序列表的基本结构：

<ol>
     <li>List Item</li>
     <li>List Item</li>
     <li>List Item</li>
</ol>

默认情况下，如下所示：

1. 项目清单
2. 项目清单
3. 项目清单

您实际上可以使用 Divi 文本模块中的所见即所得编辑器创建 HTML 列表。 确保您正在可视化选项卡中进行编辑，只需输入您的列表项，确保每个项后都有一个换行符（按 Enter）。 然后突出显示内容并单击编辑器顶部的列表图标之一。

现在转到文本选项卡以查看 HTML 的外观：

这适用于简单列表，但如果您想创建嵌套列表（列表中的列表），最好使用 HTML（使用文本选项卡）创建它们，以避免在所见即所得中尝试这样做的麻烦编辑器（可视选项卡）。

这是嵌套列表的基本结构，它有一个有序列表，每个列表项都有一个嵌套的无序列表。

<ol>
  <ol>
  <li>Ordered List Item
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
  <li>Ordered List Item
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
  <li>Ordered List Item
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
</ol>

默认情况下，这个嵌套的 html 列表如下所示：

1. 有序列表项
   • 无序列表项
2. 有序列表项
   • 无序列表项
3. 有序列表项
   • 无序列表项

您还可以在列表中添加其他 html 标签。 例如，我们可以将有序列表项包装在 h5 标签中。 结果将如下所示：

<ol>
  <li><h5>Ordered List Item</h5>
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
  <li><h5>Ordered List Item</h5>
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
  <li><h5>Ordered List Item</h5>
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
</ol>

别担心，这和我将要学习的本教程一样复杂。 但是您需要意识到的是，这种结构具有三个不同的标签（ol、ul 和 h5），它们可以通过文本模块中 Divi 强大的设计设置相互独立地设置样式。

稍后我们将需要这个结构，但现在，让我们启动并运行我们的页面以在可视化构建器中开始我们的设计。

为列表创建部分和行

创建一个新页面并部署 Visual Builder。 然后选择从头开始创建页面的选项。 然后创建一个具有两列行的常规部分。

在文本模块中创建 HTML 列表

在行的第一列中，添加一个新的文本模块。 在文本设置的内容框中，输入以下 HTML 列表：

<ol>
 	<li>
<h5>Design</h5>
<ul>
 	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</li>
</ul>
</li>
 	<li>
<h5>Develop</h5>
<ul>
 	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</li>
</ul>
</li>
 	<li>
<h5>Deliver</h5>
<ul>
 	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</li>
</ul>
</li>
</ol>

这个结构应该看起来很熟悉。 h5 标题文本将是有序列表项，而“lorem ipsum”虚拟文本将是嵌套的无序列表项。

默认情况下，它看起来像这样：

到目前为止还不算太令人印象深刻，我知道。 但是有了这些内容，现在我们可以开始使用 Divi 设计我们的列表的有趣部分！

重要提示：由于每个设计都是第一个设计的修改版本，因此最好从本教程中的第一个设计开始并保持它们的有序性。

列表设计#1

首先，让我们给我们的文本模块一个渐变背景，如下所示：

渐变背景左颜色：rgba(0,0,0,0.04)
渐变背景右颜色：rgba(255,255,255,0)
梯度方向：90度
起始位置：25%
结束位置：0%

样式化有序列表项

现在转到设计选项卡并选择文本切换下的有序列表选项卡。

然后更新以下内容：

有序列表字体：Abril Fatface
有序列表字体粗细：粗体
有序列表文本颜色：#559cad
有序列表文本大小：45px
有序列表行高：1.6em
有序列表样式类型：十进制前导零
有序列表样式位置：外部
有序列表项缩进：2vw

您会注意到 h5 和嵌套的无序列表将继承父有序列表的样式。 别担心，您将能够覆盖其他项目的样式。

样式化无序列表项

现在单击有序列表选项卡以更改以下设置：

无序列表字体：Montserrat
无序列表字体粗细：轻
无序列表文本颜色：
无序列表文本大小：18px
无序列表样式类型：无
无序列表项缩进：0.01px

样式化 H5 标题

我们需要设置样式的最后一项是 H5 标题。 为此，请转到标题文本下的选项，然后单击 H5 选项卡。 然后更新以下内容：

标题 5 字体：蒙特塞拉特
标题 5 字体粗细：轻
标题 5 字体样式：大写 (TT)
标题 5 文本颜色：#4f6d7a
标题 5 文字大小：5vw（桌面）、70px（平板电脑）、40px（智能手机）

为了完成我们文本模块的设计，添加以下自定义填充：

自定义填充（桌面）：3vw 顶部，3vw 底部
自定义填充（平板电脑）：2vw 左
自定义填充（智能手机）：50px 左

保存设置。

现在复制文本模块并将其粘贴到行的第二列中。 您可能会注意到，需要在复制文本模块中调整列表编号，以便从上一个列表继续。 我们希望我们的第二个文本模块列表以数字 4（而不是 1）开头。 为此，我们需要向我们的 html 列表添加一个小的更改。 转到文本模块设置中的内容框，并将开始的“ol”标签替换为以下内容：

<ol start="4">

现在让我们看看最终的结果。

列表设计#2

对于第二个示例列表设计，我将复制我们创建的第一个部分，以便为我们提供一个良好的开端。 我还将使用背景渐变为列表设计介绍一个很酷的背景。

创建自定义背景渐变设计

在复制部分中，使用以下渐变背景更新部分设置：

渐变背景左颜色：#ffffff
渐变背景右颜色：rgba(155,29,32,0.08)
梯度方向：45度
起始位置：50%
结束位置：0%

保存设置。

现在使用以下背景渐变更新您的行设置：

渐变背景左颜色：rgba(155,29,32,0.08)
渐变背景右颜色：rgba(255,255,255,0)
梯度方向：45度
起始位置：25%
结束位置：0%

Column 2 Gradient Background Left Color: rgba(255,255,255,0)
第 2 列渐变背景右颜色：#ffffff
第 2 列梯度方向：45deg
第 2 列起始位置：65%
第 2 列结束位置：0%

这些背景渐变设计的关键在于它们都具有相同的 45 度渐变方向。 然后，您可以使用起始位置均匀地隔开设计。

列表设计 #2 的样式设置

在这一点上，我们真的可以用独特的方式来调整我们的列表的设计。 对于第二个示例，我将向您展示只需进行一些小的更改即可轻松转换您的设计。 转到第一列中的文本模块并按如下方式更新设置：

首先删除背景渐变。
无序列表字体粗细：中等
无序列表文本颜色：rgba(0,0,0,0.5)
有序列表字体粗细：常规
有序列表文本颜色：#9b1d20
标题 5 字体粗细：细
标题 5 文本颜色：rgba(0,0,0,0.8)
标题 5 文字大小：5vw（桌面）

现在将模块样式复制到右栏中的文本模块。

这是我们第二个示例的最终设计。

列表设计#3

对于第三个例子，我认为给出一个居中的单列列表设计的例子会很好。 要创建此设计，请复制第二个示例部分。 在新复制的部分中，将行结构更改为一列，然后删除第二个文本模块。

现在使用新的渐变背景颜色更新部分设置：

渐变背景左颜色：#559CAD
渐变背景右颜色：#4f6d7a

使用新的左侧渐变背景颜色更新行设置：

渐变背景左颜色：#4f6d7a

然后向文本模块添加一个新的背景渐变。

渐变背景左颜色：rgba(255,255,255,0)
渐变背景右颜色：#559cad
梯度方向：45度
起始位置：75%
结束位置：0%

这为单列列表创建了列表设计 #2 中对称背景设计的较暗版本。 这种设计的关键是通过在部分、行和模块中添加一个来对背景渐变进行分层。

列表设计 #3 的样式设置

对于第三个示例，我想向您展示居中对齐的列表是什么样的。 对于有序列表项，我将使用更传统的十进制/数字样式。

转到文本模块设置并更新以下内容：

有序列表字体：Poppins
有序列表字体重量：重
有序列表文本对齐：居中
有序列表文本大小：4vw（桌面），50px（平板电脑）
有序列表文本颜色：#f4f1bb
有序列表样式类型：十进制
有序列表样式位置：内部
有序列表项缩进：0vw

（注意：将样式位置更改为内部会导致数字堆叠在标题文本上方，这对于此设计很方便。）

无序列表字体粗细：轻
无序列表文本颜色：#ffffff

标题 5 字体：Lato
标题 5 字体粗细：细
标题 5 字母间距：6vw（桌面）、70px（平板电脑）、40px（智能手机）
标题 5 文本颜色：#ffffff
标题 5 文字大小：6vw

自定义填充（桌面）：左 15%，右 15%
自定义填充（平板电脑）：左 5%，右 5%

对于此设计，您还应该在智能手机上删除自定义的 50 像素左填充。

这是最终的设计。

列表设计#4

对于第四个示例，我将采用更精简的“列表”设计（看看我在那里做了什么？）。 对于有序列表，我将在 Lato 字体中使用大写的大写罗马数字。 我还将通过向每个模块添加框阴影来构建列表。

列表设计 #4 的样式设置

要快速启动此列表设计，请使用列表设计 #1 复制第一部分。 然后更新新部分中的第一个文本模块设置，如下所示：

删除背景渐变。

有序列表字体：Lato
有序列表字体重量：轻
有序列表文本颜色：#000000
有序列表文本大小：6vw
有序列表样式类型：upper-roman
有序列表项缩进：0vw

标题 5 字体：Lato
标题 5 字体粗细：粗体
标题字体样式：下划线
标题 5 下划线颜色：rgba(0,0,0,0.14)
标题 5 下划线样式：双
标题 5 文本颜色：#000000
标题 5 文字大小：40px

自定义填充：3vw 左，3vw 右

删除从以前的设计中继承的平板电脑和智能手机的自定义左填充。

框阴影水平位置：6px
框阴影垂直位置：6px
框阴影传播强度：0px
框阴影模糊强度：0px
阴影颜色：#000000
框阴影位置：内阴影

将模块样式复制到第二列。 然后将框阴影位置更新为外阴影。

这是最终结果。

就是这样！

最后的想法

在上述示例中构建和调整 html 列表后，您应该更好地了解如何像 Divi 专家一样利用文本模块设置的强大功能。 您将不再需要满足于内容中无聊的列表设计。 我希望这些技术能激励你为下一个项目创建令人惊叹的列表设计。

我很想看到你的一些例子，所以请随时在评论中分享。

干杯!