使用 Divi 創建具有可擴展內容的“便簽”

借助 Divi 的內置選項，您可以通過多種方式在您的網站上展示服務和/或流程步驟。 為了幫助您獲得靈感，我們將向您展示如何僅使用 Divi 的內置選項創建帶有可擴展內容的便簽。 這是一種在訪問者觸發交互後立即共享其他內容的有趣方式。 您可以將此設計用於您正在處理的任何網站，並且您還可以免費下載 JSON 文件！

讓我們開始吧！

預覽

在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。

桌面

移動的

免費下載粘滯便箋佈局

要使用免費的便簽佈局，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

下載

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

讓我們開始重建吧！

訂閱我們的 YouTube 頻道

添加新的常規部分

您需要做的第一件事是向您正在處理的頁面添加一個新的常規部分。

添加新行

列結構

繼續添加一個新行，使用以下列結構：

過渡持續時間

尚未添加任何模塊，打開行設置。 我們正在通過更改高級選項卡中的過渡持續時間來創建即時過渡。

• 轉換持續時間：0ms

將文本模塊 #1 添加到第 1 列

添加內容

是時候開始添加模塊了！ 在行的第一列添加一個新的文本模塊，並輸入您想要在便簽設計中出現的 H2 內容。

背景顏色

然後，轉到背景設置並相應地更改背景顏色：

• 背景顏色：#ffd800

H2 文本設置

轉到 H2 文本設置並在那裡進行一些更改：

• 標題 2 字體：獨立花
• 標題 2 文本對齊：居中
• 標題 2 文本顏色：#3a0cf2
• 標題 2 文字大小：40px

間距

為了創建便利貼的外觀和感覺，我們將向模塊添加一些自定義填充值：

• 頂部填充：150px
• 底部填充：150px
• 左填充：20px
• 右填充：20px

邊界

我們還使用以下設置添加頂部邊框：

• 頂部邊框寬度：20px
• 頂部邊框顏色：#ffc300

將分頻器模塊添加到第 1 列

能見度

第一列中我們需要的下一個模塊是分頻器模塊。 確保啟用了“顯示分隔線”選項。

• 顯示分隔線：是

顏色

然後，轉到設計選項卡並更改分隔線顏色。

• 顏色：#ffc300

樣式

還要修改分隔線的樣式設置。

• 分隔線樣式：虛線

漿紗

並更改大小設置。

• 分隔線重量：5px
• 高度：0px

間距

為了在上一個模塊和這個模塊之間創建一些空間，我們添加了一些頂部邊距。

• 上邊距：150px

變換旋轉

正如您在這篇文章的預覽中所注意到的，我們希望創建一個垂直分隔線而不是水平分隔線。 為此，我們將更改 Divider 模塊的變換旋轉設置中的左值：

• 左：270度

能見度

我們還希望確保分隔模塊出現在文本模塊下方。 為此，我們將減少高級選項卡中分隔線的 z 索引。

• Z指數：-99

將文本模塊 #2 添加到第 1 列

將符號添加到內容框

第一列中我們需要的下一個也是最後一個模塊是另一個文本模塊。 將“●”字符添加到內容框中。

文字設置

然後，轉到設計選項卡並更改文本設置。

• 文字字體：Open Sans
• 文字顏色：#3a0cf2
• 文字大小：100px
• 文本行高：1em
• 文字方向：居中

間距

接下來通過添加一些負上邊距來創建所需的重疊。

• 上邊距：-50px

將文本模塊 #3 添加到第 2 列

添加H3內容

讓我們繼續第二列。 在這裡，我們需要的第一個模塊是文本模塊。 輸入您選擇的一些 H3 內容。

H3 文本設置

轉到設計選項卡並相應地更改 H3 文本設置：

• 標題 3 字體：獨立花
• 標題 3 文本顏色：#3a0cf2
• 標題 3 文字大小：30px

間距

接下來添加一些自定義上邊距：

• 上邊距：400px（桌面）、200px（平板）、150px（手機）

將文本模塊 #4 添加到第 2 列

添加內容

進入下一個模塊，這是另一個文本模塊。 輸入您選擇的一些段落內容。

文字設置

然後，轉到設計選項卡並更改文本設置。

• 文字字體：Open Sans
• 文字大小：13px
• 文本行高：2em

漿紗

接下來修改模塊的寬度。

• 寬度：78%

間距

並添加一些頂部和底部邊距。

• 上邊距：10px
• 下邊距：50px

將按鈕模塊添加到第 2 列

添加副本

我們在第二列中需要的最後一個模塊是按鈕模塊。 輸入您選擇的一些副本。

按鈕設置

然後，轉到設計選項卡並設置按鈕樣式。

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：20px
• 按鈕文字顏色：#3a0cf2
• 按鈕背景顏色：#ffd800
• 按鈕邊框寬度：0px
• 按鈕邊框半徑：0px
• 按鈕字體：Abhaya Libre

間距

添加一些自定義填充值。

• 頂部填充：20px
• 底部填充：20px
• 左填充：60px
• 右填充：60px

克隆行兩次

添加完所有模塊後，您可以繼續克隆該行兩次。

修改重複行 #1

更改文本模塊 #1 背景顏色

我們正在更改兩個副本的調色板，從第一個開始。 打開第 1 列中的第一個文本模塊並更改背景顏色。

• 背景顏色：#00ffee

更改文本模塊 #1 頂部邊框顏色

也修改頂部邊框顏色。

• 頂部邊框顏色：#00e0c2

更改分隔線顏色

然後，為分隔線使用以下顏色代碼：

• 分隔線顏色：#00e0c2

更改按鈕模塊背景顏色

並更改按鈕背景顏色。

• 按鈕背景顏色：#00ffee

修改重複行 #2

更改文本模塊 #1 背景顏色

移至第二個重複行，打開第 1 列中的第一個文本模塊並更改背景顏色。

• 背景顏色：#42ff21

更改文本模塊 #1 頂部邊框顏色

還要修改頂部邊框顏色。

• 頂部邊框顏色：#1de524

更改分隔線顏色

然後，打開分隔線模塊並使用以下分隔線顏色：

• 分隔線顏色：#1de524

更改按鈕模塊背景顏色

最後但並非最不重要的是，更改按鈕背景顏色：

• 按鈕背景顏色：#42ff21

創建可擴展的內容

將默認行大小添加到所有行

現在我們已經自定義了我們部分中的所有行，是時候使內容可擴展了。 為此，請打開每一行並應用以下最大高度：

• 最大高度：397px

將懸停行大小添加到所有行

將懸停時的最大高度修改為“100%”。 這將允許該行再次佔據其初始大小。

• 最大高度：100%

更改所有行的溢出

確保你也隱藏了每一行的溢出，你就完成了！

• 水平溢出：隱藏
• 垂直溢出：隱藏

預覽

現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何僅使用 Divi 的內置選項創建帶有可擴展筆記的便簽。 這是在您的網站上展示服務的一種創造性和有趣的方式。 如果您有任何問題或建議，請務必在下方評論區留言！

如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。