關於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更新。