如何使用 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 構建器在任何模塊中顯示創意列表樣式的好方法，因為這些相同的列表樣式選項在所有模塊中都可用。

享受探索新設計的樂趣。

我期待在評論中收到您的來信。

乾杯!