如何使用 Divi 的文本和列表样式选项进行独特的切换和手风琴内容设计

Divi 的文本和列表样式选项是大多数 Divi 模块中的常用功能。 这为在模块（如切换和手风琴模块）中设计创意内容和列表设计提供了新的机会，以前只能在文本模块中使用。 诀窍是使用适当的 html 设置您的内容，以便您可以使用内置设计设置来定位这些项目。

在本教程中，我将向您展示如何使用 Divi 的文本和列表样式选项进行独特的切换和手风琴内容设计。 每当您想要合并不同的文本设计而不必使用 CSS 类或内联 css 时，这将派上用场。

让我们开始吧。

抢先看

以下是我们将使用 Divi 的文本和列表样式选项构建的设计的快速浏览。

免费下载用于切换和手风琴布局的列表样式设计

要亲身体验本教程中的设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

要将布局导入您的页面，只需提取 zip 文件并将 json 文件拖到 Divi Builder 中。

让我们进入教程好吗？

你需要什么开始

首先，您需要具备以下条件：

1. 已安装并激活 Divi 主题
2. 在前端从头开始构建的新页面（可视化构建器）
3. 用于模拟内容的图像

之后，您将有一个空白画布开始在 Divi 中进行设计。

第 1 部分：在切换模块中使用列表样式

在本教程的第一部分中，我们将创建三个切换，每个切换都有使用列表样式选项设计的内容。 这对于在单独的切换中分隔列表项非常有用，就像自定义内容简介一样。

首先创建一个具有三列行的常规部分。 然后按如下方式更新行设置：

天沟宽度：2
宽度：100%
最大宽度：90vw

添加切换模块

接下来，将切换模块添加到第 1 列。这将是将添加到三列中的每一列的三个切换模块中的第一个。

添加切换 HTML 内容

HTML 内容是此设计的关键。 为了让我们在 Divi 切换设置中利用不同的列表样式，我们需要将 HTML 列表添加到我们的内容框中。

继续并将以下 HTML 粘贴到
正文内容框。

<ol start="1">
    <li>
        <ul style="margin-top: -1.5em;">
            <li>Lorem ipsum dolor sit amet</li>
        </ul>
    </li>
</ol>
<p>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.</p>

现在这段 HTML 代码使用 ol 标签创建一个有序列表。 有序列表只有一个列表项 (li)，它是一个嵌套的无序列表 (ul)，其中一个列表项 (li) 具有一些模拟内容。 在有序列表下是一段基本的文本。

通过此设置，我们可以使用 Divi 的内置文本样式（包括列表样式）将每个标签（ol、ul、p）定位为不同的样式。

注意开头的 ol 标签里面有 start=”1″。 这告诉列表从哪个数字开始列出每个列表项的有序列表的数字。 从技术上讲，这对于第一个数字不是必需的，因为默认情况下它会自动以 1 开头。 但是我们将需要它用于我们将添加的下一个切换。

此外，无序列表标签有一些内联样式，可以使用负边距将 ul 内容提高一点。 这就是我们在设计中将有序列表的编号与无序列表的文本重叠的方式。

样式化内容

现在我们可以开始使用内置设置和列表样式添加一些颜色和字体样式。 更新切换设计设置如下：

图标颜色：#ff3d97
图标字体大小：26px
打开切换背景颜色：#ffffff
关闭切换背景颜色：#ffffff
打开标题文本颜色：#333333
标题文字颜色：#333333

标题字体：Oswald
标题文字大小：18px
标题行高度：3em

无序列表字体：Oswald
无序列表字体粗细：轻
无序列表文本颜色：#333333
无序列表文本大小：36px
无序列表样式类型：无

有序列表字体：Kameron
有序列表字体粗细：粗体
有序列表文本颜色：rgba(255,61,151,0.34)
有序列表文本大小：100px
有序列表行高：1.1em

复制第一个切换模块以创建其他切换

要为第 2 列和第 3 列创建切换，我们将复制刚刚完成设计的切换模块。 然后我们可以将它们拖到每列中，以便每列都有相同的切换模块。

更新有序列表起始编号

对于第 2 列中的重复切换，我们需要让有序列表以数字“2”而不是“1”开头。 要更改此设置，请打开切换模块设置并将 ol 标签中的起始编号更改为“2”。

您还需要使用“3”的有序列表开始编号更新第 3 列中的切换。

最终设计

现在让我们看看最终的设计。

第 2 部分：在 Accordion 模块中使用列表样式

在本教程的第二部分中，我将向您展示一种将列表样式内容设计从切换模块引入手风琴模块的快速简便方法。 这个过程很简单，因为您可以在我们之前的切换中使用的手风琴模块（或几乎任何模块）中使用相同的文本和列表样式。 为此，首先创建一个具有一列行的新部分。 然后在行中添加一个手风琴模块。

然后复制内容选项卡下的两个默认手风琴之一，总共三个手风琴。 然后在我们之前创建的三个切换中的每一个中使用相同的完全相同的切换 html 内容更新每个单独的手风琴的内容。

将切换样式扩展到手风琴

将样式从我们创建的切换转移到手风琴模块的一种快速方法是使用扩展样式功能。 为此，打开一个切换模块并右键单击图标样式类别，然后从右键单击菜单中选择“扩展图标样式”。 然后选择将此图标的样式扩展到“本页”中的“所有手风琴”。

然后对需要扩展到手风琴模块的自定义样式的每个设计类别执行相同的操作。 其中包括“切换”、“标题文本”和“正文”的样式。

然后查看手风琴设计的最终结果。

第 3 部分：使用列表样式在切换模块中创建多列内容

在本教程的第三部分，我将向您展示如何为您的列表样式设计创建多列内容。

首先，创建一个具有一列行的新部分。 然后将我们之前创建的切换模块之一复制并粘贴到该行中。

然后使用一些新的 HTML 更新切换模块正文内容，如下所示：

<ol style="column-count: 2">
<li>
        <ul>
	        <li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
        </ul>
</li>
<li>
        <ul>
	        <li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
        </ul>
</li>
<li>
        <ul>
	        <li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
        </ul>
</li>
<li>
        <ul>
	        <li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
        </ul>
</li>
</ol>

请注意已添加到开头 ol 标记的“column-count:2”内联样式属性。 这将允许将有序列表内容组织成两列而不是一列。 您可以根据需要将其更改为更多列的任意数字。

并注意我们如何能够将 Divi 的内置设计设置用于标题、链接和列表样式。

链接文本样式

由于标题和列表样式已经在之前的设计中就位，我们需要做的就是为链接文本添加一些设计。

打开切换设置并更新以下内容：

链接字体粗细：半粗体
链接字体样式：下划线
链接文字颜色：#ff3d97
链接文字大小：15px

由于我们没有与此设计重叠任何文本，请继续为有序列表样式编号提供更亮的颜色，如下所示：

有序列表文本颜色：#ff3d97

为切换添加背景

为了完成设计，我们可以为切换添加自定义背景。 为此，请更新以下切换设置：

背景图片：[上传您选择的图片]
背景渐变左颜色：rgba(255,255,255,0.92)
背景渐变右颜色：rgba(255,255,255,0.8)
梯度方向：90度
起始位置：50%
结束位置：0%
将渐变放在背景图像上方：是

将响应元素添加到两列切换

由于切换内容现在是两列，让我们用一些响应式样式更新设计，使其在移动设备上很好地缩放。

首先，更新行设置如下：

宽度：100%
最大宽度：89vw（桌面），90vw（平板电脑和手机）

打开切换设置并更新以下内容：

图标字体大小：5vw

标题文字大小：4vw

无序列表文本大小：26px（桌面）、18px（平板）、14px（手机）
无序列表项缩进：1px

有序列表文本大小：8vw

多列切换内容的最终设计

这是平板电脑和手机显示屏上的设计。

这是相同的设计，背景颜色较深，文字颜色为白色。

最后的想法

大多数时候，切换和手风琴将具有真正不需要创造性设计的基本正文内容。 但是，如果您想为切换和手风琴内容增添趣味的时候到了，您可以利用 Divi 的内置文本和列表样式选项。 一旦你的 html 就位，你就可以将这些 html 标签定位为不同的设计，而无需使用外部自定义 CSS 或类。 这也是使用 Divi 构建器在任何模块中显示创意列表样式的好方法，因为这些相同的列表样式选项在所有模块中都可用。

享受探索新设计的乐趣。

我期待在评论中收到您的来信。

干杯!