如何在 Divi 中使用 CTA 和懸停疊加創建響應式圖像網格佈局

響應式網格佈局非常適合展示帶有鏈接（或 CTA）的圖像集合，因為它們在每個設備上看起來都不錯。 Divi builder 有一些很棒的內置模塊，它們使用網格顯示，包括 Portfolio Grid、Blog Grid 和 Gallery Grid。 但有時您可能希望使用 CTA 構建自己的自定義圖像網格佈局。 這使您可以更好地控制要為每個網格項目顯示的設計和內容，而無需求助於插件。

今天，我們將向您展示如何使用 Divi 的內置設計選項使用 CTA 創建響應式圖像網格佈局。 為此，我們將在如何使用專業部分組織網格並使用號召性用語模塊為每個圖像添加疊加層方面發揮創意。

讓我們開始吧！

搶先看

這是我們將在本教程中構建的設計的快速瀏覽。

免費下載佈局

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

下載文件

免費下載

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

下載

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

要將部分佈局導入您的 Divi 庫，請導航到 Divi 庫。

單擊導入按鈕。

在可移植性彈出窗口中，選擇導入選項卡並從您的計算機中選擇下載文件。

然後點擊導入按鈕。

完成後，分區佈局將在 Divi Builder 中可用。

讓我們進入教程，好嗎？

你需要什麼開始

首先，您需要執行以下操作：

1. 如果您還沒有安裝並激活 Divi 主題。
2. 在WordPress中新建一個頁面，在前端使用Divi Builder編輯頁面（visual builder）。
3. 選擇“從頭開始構建”選項。

之後，您將有一個空白畫布開始在 Divi 中進行設計。

在 Divi 中使用 CTA 和懸停疊加創建響應式圖像網格佈局

第 1 部分：創建特殊部分佈局

首先，添加一個具有三分之一三分之二左側邊欄佈局的新專業部分。

刪除默認的常規部分，以便只保留新的專業部分。

打開部分設置並更新背景顏色如下：

• 背景顏色：#84dbda

在設計選項卡下，更新大小、寬度和填充選項如下：

• 均衡柱高：是
• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 內寬：100%
• 內部最大寬度：1080 像素（桌面），500 像素（平板電腦和手機）
• 填充：12vh 頂部，12vh 底部
• 第 1 列填充：頂部 0px，底部 0px

在部分樣式到位後，向該部分添加一列行。

行設置

更新行設置如下：

• 天溝寬度：1
• 均衡柱高：是
• 填充：0px 頂部，0px 底部

要創建第二行，請複制第一行。

然後使用兩列佈局更新重複行。

第 2 部分：將圖像添加為列背景圖像

現在所有的行和列都已就位，我們準備將圖像添加到我們的網格佈局中。 為了確保圖像在網格佈局中具有響應性，我們將把每個圖像作為背景圖像添加到整個部分的四列中的每一列。 因為每張背景圖片都會有一個“封面”的背景大小，所以在調整瀏覽器大小時，圖片總是會填滿整列。

頂行列背景圖像

首先，打開頂行列的列設置。

然後向該列添加背景圖像。

底行列背景圖像

接下來，打開第二（底部）行中第 1 列的設置，並向該列添加背景圖像。

然後，將背景圖像添加到同一行的第 2 列。

特殊部分第 1 列背景圖像

最後，打開專業部分的設置並將背景圖像添加到第 1 列。

第 3 部分：向每列添加圖像疊加號召性用語

現在我們的背景圖像已添加到網格佈局的每一列，我們將向每一列添加一個號召性用語模塊，它將作為帶有按鈕 CTA 的圖像的覆蓋層。 使用號召性用語模塊作為列背景圖像頂部的疊加層，您可以輕鬆地向圖像添加自定義背景疊加層樣式和懸停效果。 此外，它還為您提供了在圖像上添加自定義 CTA 的選項。 在本例中，我們將簡單地使用“號召性用語”模塊上的按鈕元素，但您也可以使用內容選項輕鬆添加到按鈕上方的標題或正文內容。

創建號召性用語模塊

要添加第一個圖像疊加號召性用語，請將號召性用語模塊添加到頂行的列中。

內容

更新號召性用語的內容如下：

• 刪除標題文字
• 刪除正文
• 按鈕鏈接網址：#
• 背景顏色：透明（桌面），rgba（255,235,77,0.5）（懸停）

注意：為按鈕鏈接 URL 添加“#”現在只是一個填充物，以便按鈕顯示。 在懸停時添加半透明背景顏色將為您提供一個很好的自定義覆蓋顏色，當懸停在模塊（及其背後的圖像）上時。

按鈕樣式

繼續更新按鈕的號召性用語設計設置，如下所示：

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：22px
• 按鈕文字顏色：#ffeb4d
• 按鈕背景顏色：#000（桌面），#ec5f00（懸停）
• 按鈕邊框寬度：0px
• 按鈕邊框半徑：100px
• 按鈕字體：流沙
• 按鈕字體粗細：半粗體
• 按鈕填充：頂部 0.5em，底部 0.5em，左側 2em，右側 2em

調整大小、填充和邊框

接下來，我們需要確保我們的模塊有一定的高度來暴露它後面的列背景圖像。 為此，我們將在模塊的頂部和底部添加一些填充。 我們還將為模塊添加一個微妙的邊框，以便使其與網格佈局中的其他圖像稍微分開。

更新以下內容：

• 寬度：100%
• 填充：15vh 頂部，15vh 底部
• 底部邊框寬度：5px
• 左邊框寬度：5px
• 邊框顏色：rgba(255,255,255,0.5)

注意：使用 vh 長度單位進行填充將使填充值相對於瀏覽器視口高度。 因此，您的圖像網格項目將隨著瀏覽器窗口高度的增加和減少而增加和減少。

垂直居中 CTA 內容

為了確保號召性用語模塊中的內容保持垂直居中，我們可以使用 flex 屬性添加一小段自定義 CSS。

在高級選項卡下，將以下 CSS 添加到主元素：

display:flex;
flex-direction:column;
justify-content:center;

將號召性用語覆蓋添加到其他列

既然第一個號召性用語模塊已設置樣式，請將模塊複製並粘貼到整個佈局中的其他 3 列，包括底行的 2 列和專業部分的第 1 列。

要確保號召性用語模塊跨越專業部分中第 1 列的整個高度，請將 min-height 更新為 100%。

• 最小高度：100%

通常，這不適用於普通列中的模塊。 但是，由於列上的 flex 屬性，模塊本質上是一個 flex 子元素，因此 100% min-height 值將起作用。

就是這樣。 讓我們看看最終的結果。

最後結果

這是實時頁面上響應式圖像網格佈局的最終結果。

這是懸停效果。

以下是調整瀏覽器大小時設計的響應方式。

最後的想法

響應式圖像網格佈局仍然是許多網站的流行方面。 背景圖像提供的視覺方面與號召性用語疊加層相結合，可以真正使那些重要的導航鏈接彈出。 此外，圖像網格佈局的響應特性在所有設備上看起來都很棒，這始終是必需的。 希望它為您的下一個項目提供幫助。

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

乾杯!