关于Divi 5的图标列表模块，您需要了解的一切

最新的Divi 5更新之一引入了轮播和Lottie动画，以及每个站点都可以使用的内容：新图标列表模块。您可以使用有意义的图标创建样式列表，而不是普通的项目符号，以增加清晰度和视觉吸引力。

考虑产品页面上的功能，流程中的步骤，定价表中的服务，甚至在着陆页上受益。图标列表模块使所有这些更易于设计，并且为访问者更具吸引力。

在这篇文章中，我们将介绍您需要了解的有关图标列表模块的所有信息，从功能到实际用例，以便您可以升级列表并改善Divi网站。

什么是图标列表模块？

Divi 5中的图标列表模块旨在创建具有改善网站设计的吸引人的结构化列表。通过允许您将每个列表项目与唯一图标配对，该模块将纯文本转换为专业，引人入胜的内容。

在Divi 5之前，在Divi中创建风格化的列表需要格式化文本或Blurb模块，这效率较低。图标列表模块填补了这一空白，提供了一种专用的解决方案，该解决方案是用户友好且高度可定制的。

关键功能

图标列表模块的功能使其成为Divi 5的绝佳补充。以下是其主要功能：

简单的列表创建

通过添加项目并分配Divi广泛图标库中的图标或上传自定义图标来快速创建列表。该模块的直观界面使您可以在几分钟内构建抛光列表，从而节省了与手动格式相比的时间。

广泛的自定义选项

从数百个内置图标中进行选择，调整其尺寸，颜色和位置，以创建与网站设计相符的凝聚力外观。

利用Divi强大的设计设置来自定义字体，文本颜色，间距，对齐和背景。您还可以添加悬停效果或动画，以使您的列表更加互动。

如何使用图标列表模块

开始使用Divi 5的图标列表模块很容易。创建一个新页面或打开现有页面。单击以添加新模块，然后选择图标列表。

添加模块后，您将在“内容”选项卡中看到三个图标列表项目。让我们开始单击第一个以编辑它。

在“内容”选项卡中，在文本字段中输入标题。

接下来，扩展“图标下拉”选项卡。在这里，您可以从Divi库中的数百个图标中进行选择。您可以搜索图标或滚动以查找要使用的图标。

图标列表模块允许您将链接添加到各个列表项目，从而易于链接到其他页面，附件等。

“设计”选项卡是您可以在其中设计图标列表项目的地方。在图标下拉菜单中，分配图标颜色和大小。

在“背景”选项卡中，您可以为图标分配背景颜色，添加边框或盒子阴影，然后调整间距。

其他一些选项包括文本，您可以控制文本对齐或添加文本阴影。但是，要样式，请选择“主体文本下拉菜单”。您可以在那里分配字体，重量，样式，文本对齐，颜色，大小等。

像所有其他Divi模块一样，您可以控制尺寸，间距，边框和盒子阴影，并添加过滤器，过渡或动画。

对第一个图标列表项目进行了设计后，您可以轻松复制它，更改图标并更新文本。

在图标列表项目之间添加空间

在上一节中，我们演示了如何添加图标列表项目。在本节中，我们将回顾如何使用Divi 5的Flexbox布局系统调整布局属性。如您所见，我们可以在每个图标列表项目之间使用一个小空间。

在主图标列表模块设置中，单击“设计”选项卡。找到布局下拉菜单并将其展开以显示设置。

默认情况下，在布局样式下选择FLEX。这使您可以使用Divi 5的Flexbox设置来控制间距，布局说明和对齐。要在每个图标列表项目之间添加间距，请调整垂直差距。这增加了每个项目之间的呼吸空间，从而使我们的清单更具视觉吸引力。

所有图标列表项目的通用设计设置

除了单独造型图标列表项目外，您还可以使用主模块的设计设置一次将样式添加到每个图标列表项目中。例如，如果您希望所有图标具有相同的颜色，文本或背景样式，则可以在模块级别进行。

无论您是要单独列出项目还是整体列表项目，Divi 5中的图标列表模块都提供了一种以更友好的方式展示信息的好方法。

使用图标列表模块的实际示例

图标列表模块具有通用性，可以增强网站的不同区域。这里有一些实用的例子来激发您的设计。

旅行博客

图标列表模块提供了一种在旅行博客上创建引人入胜的内容的好方法。您可以使用它来突出显示博客，旅行行程，包装提示或目的地亮点上的类别。此外，您可以将悬停效果结合起来，并为每个列表项目使用不同的图标，以清晰，时尚的方式呈现信息。

商业网站的功能

使用图标列表模块展示您的业务服务。分配相关图标并自定义颜色以匹配您的品牌。您还可以添加到服务页面的链接，以方便导航。

分步过程指南

创建一个列表，概述过程的步骤，例如“如何注册”。使用Checkmarks视觉指导用户完成每个步骤，从而使复杂的信息更易于消化。

电子商务商店页面

对于电子商务网站，请使用图标列表模块突出商店的功能。与Divi 5的Woo模块配对，以创建一个有凝聚力的产品类别页面。

下载文件

免费下载

加入Divi新闻通讯，我们将向您发送终极Divi着陆页布局包的副本，以及大量其他惊人和免费的Divi资源，提示和技巧。跟进，您将立即成为Divi大师。如果您已经订阅，则只需在下面的电子邮件地址中输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

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

使用Divi 5中的图标列表模块

Divi 5中的图标列表模块提供了一种很好的方法来创建时尚，功能的列表，但努力很少。它的易用性，强大的自定义选项以及与Divi 5的新功能无缝集成使其成为Divi用户的必备品。无论您是强调服务，指导用户浏览流程还是展示产品功能，该模块都可以帮助您提供吸引受众的专业结果。

准备尝试了吗？立即下载最新的Divi 5公共alpha，并亲自探索图标列表模块。当我们推出新功能时，请继续关注更多Divi 5更新。