如何使用 Divi 在懸停/點擊上用推薦替換客戶徽標

正在尋找一種向客戶徽標和匹配推薦添加交互的方法？ 借助 Divi 的響應式內容功能，現在可以比以往更輕鬆地在模塊的默認狀態和懸停時顯示不同的內容。 在今天的 Divi 教程中，我們將通過向您展示如何在懸停（桌面）和點擊（平板電腦和手機）上用推薦替換客戶徽標來演示這一點。 我們將使用 Blurb 模塊來幫助我們實現目標！ 您也可以免費下載佈局的 JSON 文件！

讓我們開始吧。

預覽

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

桌面

移動的

免費下載客戶標誌佈局

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

下載文件

免費下載

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

下載

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

讓我們開始重建吧！

添加新部分

背景顏色

首先向新頁面或現有頁面添加新部分。 打開部分設置並更改背景顏色。

• 背景顏色：#000000

間距

添加一些自定義的頂部和底部填充。

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

邊界

通過添加白色邊框來完成部分設置。

• 邊框寬度：1vw
• 邊框顏色：#ffffff

添加第 1 行

列結構

繼續使用以下列結構向該部分添加新行：

漿紗

在不添加任何模塊的情況下，打開行設置並增加行的最大寬度。

• 最大寬度：1500px

將文本模塊添加到列

添加響應式 H2 內容

我們在這一行中需要的第一個模塊是帶有一些響應式 H2 內容的文本模塊。

• 桌面：將鼠標懸停在客戶端徽標上以查看他們要說的內容！
• 平板電腦和手機：點擊客戶標誌，看看他們怎麼說！

H2 文本設置

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

• 標題 2 字體：Work Sans
• 標題 2 文本對齊：居中
• 標題 2 文本顏色：#ffffff
• 標題 2 文字大小：40 像素（桌面）、30 像素（平板電腦）、25 像素（手機）

將分隔模塊添加到列

能見度

我們在這一行中需要的下一個也是最後一個模塊是分頻器模塊。 確保啟用了“顯示分隔線”選項。

• 顯示分隔線：是

線

然後，更改模塊的線條顏色。

• 線條顏色：#ffffff

漿紗

還要修改模塊的大小設置。

• 分隔線重量：4px
• 寬度：10%
• 模塊對齊：居中

間距

通過添加一些上邊距來完成模塊的設置。

• 上邊距：100px

添加第 2 行

列結構

在前一行的正下方添加另一行，並為其使用以下列結構：

漿紗

打開行設置並更改不同屏幕尺寸的大小設置。 確保您也平衡了列高，這將有助於下一步； 將列內容居中。

• 均衡柱高：是
• 寬度：100%（桌面），80%（平板電腦和手機）
• 最大寬度：1500px
• 最小高度：500px（桌面），自動（平板電腦和手機）

主要元素

要將行的列內容居中，您將 1) 需要啟用“均衡列高”選項（上一步）和 2) 將以下 CSS 代碼行添加到行的主要元素：

align-items: center;

將 Blurb 模塊添加到列

將默認內容留空

現在，要在懸停時替換客戶端徽標，我們將使用 Blurb 模塊。 從第 1 列中的第一個開始。確保將默認標題和正文內容留空，但繼續在它們兩個上啟用懸停選項。

在懸停時添加內容

在兩個懸停字段中插入一些您選擇的書面內容。

默認圖片

繼續在圖像和圖標設置中上傳您選擇的公司徽標。

在懸停時刪除圖像

我們將通過在懸停狀態下完全刪除客戶端徽標來替換懸停時的客戶端徽標。

懸停背景顏色

正如您在這篇文章的預覽中所注意到的，我們還在懸停時更改了模塊的背景顏色。 不要使用默認背景顏色並在懸停時添加以下顏色代碼：

• 背景顏色：#191919

圖像/圖標設置

移至模塊的設計選項卡並確保以下圖像/圖標對齊適用：

• 圖像/圖標對齊方式：居中

文字設置

由於我們使用黑色部分背景顏色，我們將在常規文本設置中更改模塊的文本顏色。

• 文字顏色：淺

標題文字設置

接下來，相應地修改標題文本設置：

• 標題標題級別：H3
• 標題字體：Work Sans
• 標題文字大小：24px
• 標題行高度：1.4em

正文設置

還要對正文文本設置進行一些更改。

• 正文字體：Open Sans
• 正文顏色：#8c8c8c
• 車身線高：2.5em

默認間距

然後，轉到間距設置並確保模塊的默認狀態下沒有自定義填充。

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

懸停間距

然而，在懸停時，我們使用以下值為我們的推薦創建一些空白：

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

過渡

通過刪除默認過渡持續時間來完成模塊的設置。 這將允許在懸停/單擊徽標時立即顯示推薦。

• 轉換持續時間：0ms

克隆 Blurb 模塊兩次並在剩餘列中放置重複項

完成第 1 列中的第一個 Blurb 模塊後，您可以克隆該模塊兩次並將重複項放置在該行的剩餘列中。

克隆整行

您現在可以根據需要最多克隆此行，具體取決於您要顯示的客戶端徽標的數量。

更改每個 Blurb 模塊重複的懸停內容

確保在每個重複的 Blurb 模塊中更改客戶端徽標。

更改每個 Blurb 模塊重複的徽標

更改每個重複模塊的懸停內容，您就完成了！

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何使用 Divi 的響應式選項功能在懸停/單擊時將客戶徽標替換為推薦。 這是節省頁面空間和跨不同屏幕尺寸創建交互式設計的絕佳方式。 除了展示教程之外，我們還在本文開頭免費分享了 JSON 文件！ 如果您有任何疑問，請隨時在下面的評論部分發表評論。

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