為創意列表設計釋放 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 專家一樣利用文本模塊設置的強大功能。 您將不再需要滿足於內容中無聊的列表設計。 我希望這些技術能激勵你為下一個項目創建令人驚嘆的列表設計。

我很想看到你的一些例子，所以請隨時在評論中分享。

乾杯!