使用文本模塊創建獨特的 Divi 按鈕設計

您可能已經想到了使用文本模塊創建獨特的 Divi 按鈕設計。 如果是這樣，你比你知道的更有創意！ 隨著 Divi 中懸停選項的發布，所有模塊都可以點擊。 這為將任何模塊（及其所有內置設計設置）用作可點擊的 CTA 或按鈕打開了大門。 例如，文本模塊允許您以不同格式向模塊添加任意數量的文本。 此外，文本模塊還有一些強大的設計選項，用於自定義圓角以創建獨特的形狀。

在本教程中，我將探索一些可以使用文本模塊實現的獨特 Divi 按鈕設計。

讓我們開始吧！

搶先看

以下是我們將使用文本模塊輕鬆創建的一些示例按鈕設計。

這是一個帶有兩行文字的按鈕……

這是一個使用列表項的按鈕……

這是一個使用創意角的按鈕......

使用文本模塊創建獨特的 Divi 按鈕設計

訂閱我們的 YouTube 頻道

#1 創建帶有多行文本的按鈕

如前所述，文本模塊允許無限量的文本，因此使用多種格式的文本模塊可以輕鬆創建僅包含兩行文本的按鈕。 使用所見即所得或文本編輯器，您可以添加段落文本、標題、鏈接、列表和塊引用。 文本模塊最好的部分是，您可以使用內置於可視化構建器設計設置中的選項卡 UI 分別定位和設置每種文本格式的樣式。

這使得添加多行文本變得非常容易，然後單獨設置每行文本的樣式以獲得獨特的按鈕佈局。

以下是如何將文本模塊設置為具有多行文本的按鈕的快速示例。

如果您還沒有，請創建一個新頁面並部署可視化構建器。 選擇“從頭開始構建”選項。 然後創建一個新部分的一列行。 然後向該行添加一個文本模塊。

對於文本內容，使用 html 選項卡並輸入以下內容：

<h3>Contact Us</h3>
<h4>WE CAN HELP</h4>

我們可以添加很多不同的背景樣式到我們的模塊中，但是對於這個例子，tet 添加一個簡單的漸變背景：

背景漸變左顏色：#FEE140
背景漸變右顏色：#FA709A

然後轉到設計選項卡並使用標題選項卡 UI 設置 h3 和 h4 標題標籤的樣式，如下所示：

標題 3 字體粗細：超粗體
標題 3 字體樣式：TT
標題 3 文本顏色：#ffffff
標題 4 字體樣式：TT
標題 4 文本顏色：#ffffff
標題 4 文字大小：16px

現在我們需要做的就是調整文本模塊的大小，使其看起來更像一個按鈕。 為此，請更新以下內容：

寬度：230px
自定義填充：頂部 1em，底部 0.5em，左側 2em，右側 2em

自發布 Divi 的新懸停選項以來，所有模塊都可以像按鈕一樣變得可點擊。 為此，請返回內容選項卡並輸入模塊鏈接 URL。

這是最終結果。

作為懸停效果，您可以添加一個橫掃按鈕的框陰影，最終應用新的背景顏色來替換漸變。

為此，請打開文本模塊設置並更新以下內容：

盒子陰影：見截圖
框陰影水平位置：0px（默認），230px（懸停）
框陰影垂直位置：0px
陰影顏色：rgba(0,0,0,0)（默認），#fee140（懸停）

這是懸停時的樣子。

#2 創建一個列表項按鈕

因為文本模塊允許您向內容添加列表（無序或有序），所以您可以利用此功能來創建列表按鈕。 基本上，您需要做的就是在內容框中創建一個包含一個列表元素的列表。 然後將您的列表項包裝在標題標籤中，以便您可以分別設置列表項目符號和標題文本的樣式。

如果您還沒有，請創建一個新頁面並部署可視化構建器。 選擇“從頭開始構建”選項。 然後創建一個新部分的一列行。 然後向該行添加一個文本模塊。

然後在內容設置的文本選項卡中添加以下 html：

<ol><li><h3>Contact Us</h3></li></ol>

將列表項文本包裝在標題標籤中很重要，以便我們可以將列表項項目符號/編號與文本分開設置。

現在跳轉到設計選項卡並完成將文本模塊設計為按鈕：

在文本設置類別下，選擇有序列表選項卡並更新以下內容：

有序列表字體：Exo 2
有序列表字體重量：輕
有序列表文本顏色：#000000
有序列表文本大小：20px
有序列表字母間距：5px
有序列表樣式類型：十進制前導零
有序列表樣式位置：外部
有序列表項縮進：2em

在標題文本類別下，單擊 H3 選項卡並更新以下內容：

標題 3 字體：Exo 2
標題 3 字體粗細：半粗體
標題 3 字體樣式：TT
標題 3 文本顏色：#0c71c3
標題 3 文字大小：26px
標題 3 行高：0.3em

接下來，更改模塊的寬度並為其設置邊框和間距，使其看起來像一個按鈕：

寬度（模塊）：262px
模塊對齊：居中
自定義填充：頂部 2em，底部 0px，左側 2em，右側 2em
圓角：10px2em
邊框寬度：1px
邊框顏色：#000000
邊框樣式：純色

並且不要忘記將指向您的模塊的鏈接添加到您選擇的指定 URL。

這是最終的設計。

隨意探索新的列表樣式類型（如 Upper Roman）以獲得獨特的列表按鈕設計。

#3 創建一個帶有創意角的按鈕（如一片葉子）

對於下一個設計，我們將利用文本模塊中的圓角設計設置。 基本思想是設置不同的角半徑值來創建形狀獨特的按鈕。 在這個例子中，我將把我們的模塊塑造成一個葉子按鈕。

如果您還沒有，請創建一個新頁面並部署可視化構建器。 選擇“從頭開始構建”選項。 然後創建一個新部分的一列行。 然後向該行添加一個文本模塊。

打開文本模塊設置，在內容框的文本選項卡中輸入以下html：

<h3>grow</h3>
<h4>with us</h4>

這允許我們將按鈕文本放在兩行上（減少垂直寬度）並獨立設置它們的樣式。

接下來添加具有更“葉狀”顏色的漸變背景。

背景漸變左顏色：#7cda24
背景漸變正確顏色：#26e051
漸變方向：90度

現在讓我們跳到設計設置以將我們的文本居中並設置標題標籤的樣式。 您需要選擇 h3 選項卡來設計 h3 標題並選擇 h4 選項卡來設計 h4 標題：

文字方向：居中
標題 3 字體：Oswald
標題 3 字體粗細：輕
標題 3 字體樣式：TT
標題 3 文本顏色：#ffffff
標題 3 文字大小：27px
標題 4 字體：Oswald
標題 4 字體樣式：TT
標題 4 文本顏色：#ffffff

繼續更新設計，為您的文本模塊提供適當的按鈕寬度和間距。

寬度：178px
模塊對齊：居中
自定義填充：頂部 2em，底部 2em，左側 1em，右側 1em

最後，我們可以添加我們自定義的圓角給模塊一個葉子形狀，然後添加一個框陰影使葉子更生動。 為此，請更新以下內容：

首先解鎖圓角選項，以便您可以為每個角分配單獨的值。

左上角：100px
右下角：100px

然後添加一個框陰影...

盒子陰影：見截圖
框陰影水平位置：25px
框陰影垂直位置：-4px
框陰影擴散強度：-12px
陰影顏色：rgba(0,0,0,0.25)

不要忘記添加您的模塊鏈接 URL，以便您的模塊鏈接到所需的位置。

這是最終的設計。

對於懸停效果，您可以交替使用圓角值以將按鈕設計置於懸停時的相反方向：

這是懸停效果的樣子。

最後的想法

在使用 Divi 設計網站時，偶爾跳出框框思考總是很好的。 希望本教程能很好地幫助思考使用文本模塊的新的和有創意的 divi 按鈕設計。 事實上，我建議探索其他模塊（如 Blurb 模塊）以獲得更多設計選項。

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

乾杯!