如何在 Divi 中設計自定義圖像疊加

已發表: 2020-09-16

圖像疊加在網頁設計中已經存在很長時間了。它們非常適合通過將鼠標懸停在圖像上時顯示其他內容和設計元素來吸引訪問者。因為這是一個如此流行的設計功能，所以有許多插件專門用於創建圖像疊加。但是，根據插件的不同，它們可能相當有限，或者對於您可能需要的東西來說可能有點矯枉過正。這就是為什麼擁有在 Divi 中自己構建這些的專業知識會有所幫助。

在本教程中，我們將向您展示如何在 Divi 中設計自定義圖像疊加。當鼠標懸停在圖像上時，這些疊加層會改變並顯示元素。最好的部分是您可以使用 Divi 的內置設計選項完全控製圖像疊加的設計。而且，通過一些自定義 CSS 片段，您可以擁有一些華麗的圖像疊加層，將您的網站提升到一個新的水平。不需要插件。

讓我們開始吧！

搶先看

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

免費下載 Divi 圖像疊加佈局

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

下載文件

免費下載

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

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

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

單擊導入按鈕。

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

然後點擊導入按鈕。

分區通知框

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

讓我們進入教程，好嗎？

你需要什麼開始

擴展角標籤

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

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

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

在 Divi 中創建自定義圖像疊加

構建節、行和列

首先，在默認部分中創建一個三列行。

div 圖像疊加

打開部分設置並添加以下背景顏色：

背景顏色：#3a0ca3

div 圖像疊加

接下來，打開第 1 列的設置並更新以下內容：

CSS 類：et-overlay-container
水平溢出：隱藏
垂直溢出：隱藏

需要 CSS 類來觸發我們將要構建的覆蓋項目的懸停效果。隱藏溢出是需要的，因為我們將有一個懸停效果，將圖像縮放到列容器之外。

div 圖像疊加

添加圖像

現在部分、行和列都準備好了，繼續向第 1 列添加一個新的圖像模塊。這將是我們疊加設計背後的主要圖像。

div 圖像疊加

上傳一張更像肖像而不是風景的圖像。我使用的是大約 800 像素 x 1050 像素的一個。確保它的寬度足以跨越所有瀏覽器尺寸的列的整個寬度。

（注意：您可以使用橫向圖像，但您可能需要相應地調整疊加元素的位置，以免它們重疊。）

div 圖像疊加

在設計選項卡下，更新以下內容：

邊距：0px 底部

div 圖像疊加

在高級選項卡下，添加以下 CSS 類：

CSS 類：et-overlay-image

div 圖像疊加

使用分隔模塊添加圖像疊加顏色

為了創建圖像疊加顏色，我們將使用一個分隔模塊。這個想法是通過使分隔線跨越列的整個高度和寬度來創建圖像覆蓋，使其完美地位於圖像上。就位後，就可以調整分隔模塊的背景顏色，得到我們想要的疊加顏色。

首先，在圖像下添加一個分隔模塊。

div 圖像疊加

然後將分隔線定位為絕對分隔線，使其位於圖像的頂部：

位置：絕對

div 圖像疊加

在內容選項卡下，更新以下內容：

顯示分隔線：否
背景顏色：rgba(247,37,133,0.8)

div 圖像疊加

然後更新分隔線的高度和寬度：

寬度：100%
高度：100%

div 圖像疊加

設計到位後，將以下 CSS 類添加到分隔符：

et-overlay-item

（注意：此類應添加到您只想在懸停時顯示的所有疊加設計元素中。如果您不希望該元素最初被隱藏，請將其省略。）

div 圖像疊加

為了幫助跟踪設計元素/模塊，打開圖層模式，並標記分隔模塊（“疊加顏色”）。

div 圖像疊加

添加疊加標題文本

在分隔模塊下，添加一個新的文本模塊。這將作為我們的覆蓋標題文本，在懸停時出現在圖像的頂部。

div 圖像疊加

使用 H2 標題更新內容：

<h2>Coaching</h2>

然後更新文本模塊的標籤，供以後參考。

div 圖像疊加

在文本設計設置下，更新以下內容：

文本對齊：居中
文字顏色：淺

div 圖像疊加

標題 2 字體：Cormorant Garamond
標題 2 字體粗細：粗體
標題 2 文字大小：40px

div 圖像疊加

寬度：100%
最大寬度：85%

div 圖像疊加

在高級選項卡下，更新位置如下：

位置：絕對
位置：頂部中心
垂直偏移：10%

（注意：垂直偏移可能需要根據圖像縱橫比的大小進行調整。例如，橫向圖像可能需要較少的偏移）

div 圖像疊加

接下來，將以下 CSS 類添加到文本模塊：

CSS 類：et-overlay-item 下移

除了“et-overlay-item”類之外，我們還添加了一個額外的“下移”類，以便使用自定義 CSS 在懸停時稍微向下移動標題。

div 圖像疊加

創建疊加正文

要創建覆蓋正文，我們可以復制用於覆蓋標題的文本模塊。在我們更新副本的設置之前，將標籤更改為“overlay body”。

div 圖像疊加

打開新文本模塊的文本設置，用幾句段落文本更新正文內容。

div 圖像疊加

在高級選項卡下，將模塊的絕對位置更改為居中。

div 圖像疊加

由於我們不希望這個在懸停時移動（只出現），更新 CSS Class 以只包含以下內容：

CSS 類：et-overlay-item

div 圖像疊加

創建疊加按鈕

此圖像上的最後一個覆蓋元素將是按鈕。要創建按鈕，請在“正文文本”文本模塊下添加一個新的按鈕模塊。

div 圖像疊加

在更改設計之前，更新按鈕的位置如下：

位置：絕對
垂直偏移：10%

div 圖像疊加

現在按鈕應該在圖像的底部居中。

在高級選項卡中，更新 CSS 類並將自定義 CSS 片段添加到主元素，如下所示：

CSS 類：et-overlay-item move-up
主要元素 CSS：
```
min-width: 15em
```

請注意，按鈕上添加了一個額外的類，以便在懸停時將其稍微向上移動。這是為了補充懸停時標題文本的向下移動。

div 圖像疊加

然後更新以下設計設置：

按鈕對齊：居中
按鈕文字大小：14px
按鈕背景顏色：#4361ee
按鈕邊框寬度：0px
按鈕字母間距：0.1em
按鈕字體粗細：粗體
按鈕字體樣式：TT
填充：頂部 0.8em，底部 0.8em，左側 0px，右側 0px

div 圖像疊加

使用代碼模塊添加自定義 CSS

在我們創建此疊加設計的其他幾個版本之前，讓我們添加疊加懸停效果所需的自定義 CSS。為此，請在按鈕下添加一個代碼模塊。

div 圖像疊加

然後將以下 CSS 粘貼到代碼內容中。不要忘記將代碼包裝在必要的腳本標籤中。

<style>
 @media all and (min-width: 981px) {
  
  .et-fb-root-ancestor .et-overlay-item {
    opacity: 1; /*shows hidden overlay items when using the visual Divi Builder*/
  }
  .et-overlay-item {
    opacity: 0; /*hides overlay items by default*/
    margin-bottom: 0px;
  }
  .et-overlay-item, .et-overlay-image {
    transition: all 400ms !important; /*sets transition speed of all overlay items*/
  }
  .et-overlay-container:hover .et-overlay-item {
    opacity: 1; /*reveals hidden overlay items on hover*/
  }
  .et-overlay-container:hover .et-overlay-image {
    /*add new styles here to change image on hover*/
  }
  .et-overlay-container:hover .et-overlay-image.et-scale {
    transform: scale(1.2); /*adjust scale of image here*/
  }
  .et-overlay-container:hover .et-overlay-image.et-rotate {
    transform: scale(1.4)
    rotateZ(10deg)!important; /*adjust rotation of image and scale needed for rotation here*/
  }  
  .et-overlay-container:hover .et-overlay-item.move-up {
    margin-bottom: 15% !important; /*adjust how far you want the overlay item to move up*/
  }
  .et-overlay-container:hover .et-overlay-item.move-down {
    margin-top: 10%; /*adjust how far you want the overlay item to move down*/
  }

}
</style>

div 圖像疊加