WordPress divi主题

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

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

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

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

google广告开户

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

让我们开始吧。

抢先看

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

分区列表样式

分区列表样式

分区列表样式

分区列表样式

免费下载 Toggles 和 Accordions 布局的列表样式设计

要掌握本教程中的设计,您首先需要使用下面的按钮下载它。 要访问下载,您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者,您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包! 如果您已经在列表中,只需在下面输入您的电子邮件地址,然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

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

WordPress divi主题

让我们来看看教程好吗?

你需要什么开始

要开始,您需要具备以下条件:

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

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

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

分区列表样式

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

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

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

分区列表样式

添加切换模块

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

分区列表样式

fiverr建站WordPress程序员

添加切换 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
无序列表字体粗细:Light
无序列表文本颜色:#333333
无序列表文本大小:36px
无序列表样式类型:无

分区列表样式

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

JasperAI 10000字免费额度试用

分区列表样式

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

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

分区列表样式

更新有序列表起始编号

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

分区列表样式

WordPress备份工具updrafplus

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

分区列表样式

最终设计

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

分区列表样式

分区列表样式

分区列表样式

分区列表样式

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

分区列表样式

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

分区列表样式

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

分区列表样式

将切换样式扩展到手风琴

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

分区列表样式

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

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

分区列表样式

第 3 部分:使用列表样式在 Toggle 模块中创建多列内容

分区列表样式

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

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

然后使用一些新的 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

分区列表样式

为切换添加背景

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

背景图片: [upload image of your choice]
背景渐变左颜色: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 构建器在任何模块中显示创意列表样式的好方法,因为这些相同的列表样式选项在所有模块中都可用。

享受探索新设计的乐趣。

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

干杯!