如何使用 Divi 將懸停動畫角按鈕箭頭添加到您的設計中

您在設計的頁面中展示 CTA 的方式會對訪問者採取行動的方式產生重大影響。 您可以使用最常用的方法，通過使用中間帶有副本的按鈕格式，但您也可以利用它來發揮創意。 在今天的教程中，我們將向您展示一種在 Divi 設計中包含號召性用語的創造性方法。 確切地說，我們將包括懸停動畫角按鈕箭頭。 懸停箭頭後，箭頭方向將與樣式一起更改。 您也可以免費下載此設計的 JSON 文件！

讓我們開始吧。

預覽

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

桌面

移動的

免費下載佈局

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

下載文件

免費下載

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

下載

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

讓我們開始重建吧！

添加新的專業部分

向您正在處理的頁面添加新的專業部分。 為其選擇以下列結構：

漸變背景

打開部分設置並應用以下漸變背景：

• 顏色 1：#fff8f5
• 顏色 2：#f9f3ef
• 漸變類型：徑向
• 徑向：左下
• 起始位置：40%
• 結束位置：40%

漿紗

轉到該部分的設計選項卡並按如下方式更改大小設置：

• 均衡柱高：是
• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 內寬：90%
• 內部最大寬度：1580px

間距

然後，轉到間距設置並向第 1 列添加一些正確的填充。

• 第 1 列右填充：6%

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

添加 H2 內容

是時候添加模塊了，從第 1 列中的文本模塊開始。添加一些您選擇的 H2 內容。

H2 文本設置

將模塊的 H2 文本設置樣式如下：

• 標題 2 字體：Kumbh Sans
• 標題 2 字體粗細：粗體
• 標題 2 文本顏色：#08665c
• 標題 2 文字大小：
  • 桌面：75px
  • 平板電腦：60px
  • 電話：45px

間距

接下來添加一些頂部和底部邊距。

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

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

添加說明內容

在前一個文本模塊下方添加另一個文本模塊，其中包含您選擇的一些描述內容。

文字設置

更改模塊的文本設置如下：

• 文字字體：Kumbh Sans
• 文字顏色：#08665c
• 文字大小：16px
• 文本行高：1.8em

間距

在較小的屏幕尺寸上也添加一些底部邊距。

• 底部邊距：
  • 桌面： /
  • 平板電腦和手機：50px

將第 1 行添加到第 2 列

列結構

轉到該部分的第二列。 在那裡，使用以下列結構添加第一行

漿紗

在不添加模塊的情況下，打開行設置並按如下方式更改大小設置：

• 使用自定義裝訂線寬度：是
• 天溝寬度：2

間距

接下來刪除所有默認的頂部和底部填充。

• 頂部填充：0px
• 底部填充：0px

第 1 列設置

背景顏色

然後，打開第 1 列設置並應用您選擇的背景顏色。

• 背景顏色：#cccccc

間距

轉到列的間距設置並使用以下響應值：

• 頂部填充：
  • 桌面：100px
  • 平板電腦和手機：70px
• 左填充：
  • 台式機和平板電腦：8%
  • 電話：10%
• 右填充：
  • 台式機和平板電腦：8%
  • 電話：10%

邊界

還要為邊框設置添加一些圓角。

• 所有角：10px

能見度

通過將溢出設置為在高級選項卡中可見來完成列設置。

• 水平溢出：可見
• 垂直溢出：可見

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

添加內容

是時候添加模塊了，從第 1 列中的第一個文本模塊開始。添加一些您選擇的內容。

文字設置

更改模塊的文本設置：

• 文字字體：Kumbh Sans
• 文字字體粗細：輕
• 文字顏色：#08665c
• 文字大小：30px
• 文本行高：1em

間距

也應用一些底部邊距。

• 下邊距：15px

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

能見度

然後，添加一個分隔模塊。 確保啟用了“顯示分隔線”選項。

• 顯示分隔線：是

線

移至模塊的設計選項卡並更改線條顏色。

• 線條顏色：#fff8f5

漿紗

還要修改大小設置。

• 分隔線重量：2px
• 高度：2px

間距

也添加一些底部邊距。

• 下邊距：50px

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

添加H3內容

將另一個文本模塊添加到第 1 列。使用您選擇的一些 H3 內容。

H3 文本設置

轉到模塊的設計選項卡並按如下方式更改 H3 文本設置：

• 標題 3 字體：Kumbh Sans
• 標題 3 字體粗細：粗體
• 標題 3 文本顏色：#08665c
• 標題 3 文字大小：
  • 桌面：48px
  • 平板電腦：38px
  • 電話：32px

間距

也使用一些底部邊距。

• 下邊距：15px

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

添加內容

將最後一個文本模塊添加到第 1 列，其中包含您選擇的一些描述內容。

文字設置

相應地更改文本設置：

• 文字字體：Kumbh Sans
• 文字顏色：#08665c
• 文字大小：16px
• 文本行高：1.8em

間距

還包括一些底部邊距。

• 底部邊距：
  • 桌面：200px
  • 平板電腦和手機：150px

將 Blurb 模塊添加到第 1 列

將內容框留空

在本專欄中我們需要的最後一個模塊，它是一個 Blurb 模塊。 將內容框留空。

默認圖標

選擇下一步的箭頭圖標。

懸停圖標

更改懸停圖標。

添加鏈接

也使用此模塊的鏈接。

懸停背景顏色

然後，添加懸停背景顏色。

• 懸停背景顏色：#08665c

默認圖標設置

導航到設計選項卡並按如下方式更改圖標設置：

• 圖標顏色：#ffffff
• 圖像/圖標放置：頂部
• 圖像/圖標對齊方式：右
• 使用圖標字體大小：是
• 圖標字體大小：80px

懸停圖標設置

在懸停時修改圖標字體大小。

• 懸停圖標字體大小：40px

漿紗

然後，為大小設置添加一些寬度。

• 寬度：80px

懸停間距

修改懸停時的頂部和右側填充。

• 懸停頂部填充：25px
• 懸停右側填充：10px

邊界

在邊框設置中也包括一些圓角。

• 所有角：5px

懸停比例

然後，在懸停時使用變換比例選項。

• 懸停兩者：130%

主要元素和模糊圖像 CSS

接下來，導航到高級選項卡並使用以下主要元素的 CSS 代碼行：

cursor: pointer;

將此行用於 Blurb Image css 框：

margin-bottom: 0px;

位置

通過在位置設置中重新定位來完成模塊設置：

• 位置：絕對
• 位置：右下角

重用第 1 列

刪除第 2 列

完成第一列後，您可以將其重複用於第二列。 為此，請先刪除第二列。

克隆列 1

然後，克隆第一個。

更改第 2 列的背景顏色

當然，您需要對重複列進行一些更改，從背景顏色開始。

• 第 2 列背景顏色：#f0c7b1

將 Transform Translate 添加到第 2 列

我們還在較小的屏幕尺寸上添加了一個轉換轉換值。

• 對：
  • 桌面： /
  • 平板電腦和手機：50px

更改重複內容

確保更改所有重複的內容。

更改模糊模塊鏈接

通過更改 Blurb 模塊內的鏈接來完成重複列。

重用行

完成第一行及其列後，您可以克隆整行。

刪除第 2 列

刪除行設置中的第二列。

更改列背景顏色

然後，更改剩餘列的背景顏色。

• 列背景顏色：#dfe7f2

將頂部邊距添加到行

返回常規行設置並添加一些響應式上邊距。

• 最高保證金：
  • 桌面：50px
  • 平板電腦和手機：100px

更改重複內容

然後，更改列中的所有重複內容。

更改模糊模塊鏈接

通過更改 Blurb 模塊內的鏈接來完成本教程。 就是這樣！

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何利用 CTA 發揮創意。 更具體地說，我們向您展示瞭如何添加懸停動畫角按鈕箭頭。 這種方法可幫助您在設計具有多個 CTA 的部分時保持簡潔的外觀和感覺。 它也增加了額外的交互級別。 您可以免費下載 JSON 文件。 如果您有任何問題或建議，請隨時在下面的評論部分發表評論！

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