如何在 Divi 中使用扇出懸停效果重新創建 ET 的佈局包預覽

已發表: 2019-07-05

Elegantthemes.com 新網站設計的酷炫功能之一是 Divi 產品頁面上的預製佈局包預覽。這種設計的獨特之處在於每個佈局包如何以三個獨立的圖像為特色，這些圖像在懸停時扇出。

今天，我們將向您展示如何在 Divi 中使用同樣令人印象深刻的扇出懸停效果重新創建佈局包預覽的設計。由於設計更高級一些，我們將結合 Divi 的內置設計選項使用一些自定義 CSS。不過別擔心，構建不會花費很長時間，結果絕對值得。

讓我們開始吧。

搶先看

以下是帶有扇出懸停效果的佈局包預覽。請注意，底行具有輔助懸停效果，可在懸停時單獨旋轉圖像。

divi 佈局包預覽扇出懸停效果

桌面上的三列佈局將在平板電腦和手機上調整為一列。

divi 佈局包預覽扇出懸停效果

免費下載佈局包預覽扇出懸停效果佈局

divi 佈局包預覽扇出懸停效果

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

下載文件

免費下載

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

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

要將佈局導入您的頁面，只需提取 zip 文件並將 json 文件拖到 Divi Builder 中。

讓我們進入教程好嗎？

訂閱我們的 YouTube 頻道

你需要什麼開始

首先，您需要進行以下設置：

已安裝並激活 Divi 主題
創建了一個新頁面，用於在 Divi 的前端（視覺）構建器上從頭開始構建。
用於模擬內容的三個圖像。圖像應該在 250 像素 x 375 像素左右以獲得最佳效果。由於這些是網頁的預覽，您可以創建自己的任何頁面設計的屏幕截圖，然後相應地裁剪/調整每個圖像的大小。

之後，您將有一個空白畫布開始在 Divi 中構建一些懸停選項卡。

在 Divi 中使用扇出懸停效果重新創建 ET 的佈局包預覽

構建部分和行

創建一個具有三列行的新常規部分。

divi 佈局包預覽扇出懸停效果

在添加任何模塊之前，打開行設置並更新大小和間距，如下所示：

天溝寬度：2
寬度：90%
最大寬度：1120px（桌面），400px（平板）

divi 佈局包預覽扇出懸停效果

然後在平板電腦上的行中添加一些填充以在移動設備上增加間距。

第 1 列填充：底部 20%
第 2 列填充：底部 20%
第 3 列填充：底部 20%

divi 佈局包預覽扇出懸停效果

添加圖像 1

現在我們準備添加構成佈局包預覽設計的三個圖像中的第一個。繼續將圖像模塊添加到第 1 列。

divi 佈局包預覽扇出懸停效果

然後將圖像上傳到圖像模塊（大小應該在 250 像素 x 375 像素左右）。

divi 佈局包預覽扇出懸停效果

然後更新設計設置如下：

圖像對齊：居中
寬度：220px
垂直溢出：隱藏
Z指數：4

divi 佈局包預覽扇出懸停效果

由於我們需要定位圖像容器（而不是圖像本身），我們需要使用自定義 CSS 添加自定義高度、框陰影和邊框半徑。將以下 CSS 添加到主元素：

height: 240px;
box-shadow: 0 10px 70px 0 rgba(103,151,255,.22), 0 15px 105px 0 rgba(103,151,255,.22);
border-radius: 9px;

當我們稍後添加懸停效果時，這將允許圖像與圖像容器一起調整。正如你現在看到的，圖像底部被稍微切掉了，因為我們有一個 240px 的自定義高度，並且溢出設置為“隱藏”。

divi 佈局包預覽扇出懸停效果

添加圖像 2

要創建第二個圖像，請在第 1 列中的第一個圖像模塊下方添加一個新圖像模塊。然後將新圖像 (250X350) 上傳到該模塊。

divi 佈局包預覽扇出懸停效果

然後我們需要將圖像定位在圖像 1 的後面並稍微靠左。為此，我們需要添加一個自定義寬度和高度並隱藏垂直溢出（就像我們對圖像 1 所做的一樣）。這裡的主要區別是我們需要給圖像一個絕對位置，以便顯示在圖像 1 後面的列的左上角。

為此，請更新以下內容：

寬度：180px
垂直溢出：隱藏

然後將以下自定義 CSS 添加到主元素：

position: absolute !important;
top: 12px;
left: 25px;
height: 200px;
box-shadow: 0 10px 70px 0 rgba(103,151,255,.22), 0 15px 105px 0 rgba(103,151,255,.22);
border-radius: 9px;

divi 佈局包預覽扇出懸停效果

添加圖像 3

現在我們準備添加第三張圖像以完成佈局包預覽。在這一點上，使用線框視圖模式是有意義的，因為我們有一些重疊，這使得使用可視化構建器更加困難。部署線框模式並複製圖像 2。

divi 佈局包預覽扇出懸停效果

我們複製了圖像，因為我們想要保留我們用於圖像 2 的大部分設置。唯一的區別（除了新圖像）是我們需要將圖像定位到右側而不是左側。

打開復制的圖像（圖像 3）並使用新圖像（250×375）更新圖像模塊。

然後，通過改變更新自定義CSS left位置屬性設置為一個right位置屬性。不需要對 CSS 進行其他更改。

divi 佈局包預覽扇出懸停效果

如果您願意，可以將以下 CSS 複製並粘貼到 Main Element 中以替換當前 CSS。

position: absolute !important;
top: 12px;
right: 25px;
height: 200px;
box-shadow: 0 10px 70px 0 rgba(103,151,255,.22), 0 15px 105px 0 rgba(103,151,255,.22);
border-radius: 9px;

到目前為止，一切都很好

這是到目前為止的最終結果。

divi 佈局包預覽扇出懸停效果

該設計實際上非常漂亮，但讓我們通過扇出懸停效果將其提升一個檔次。

添加扇出懸停效果 CSS

通常，如果我們只處理一張圖像，我們可以使用內置的 Divi 選項輕鬆添加懸停效果。但是這種扇出懸停效果要求我們在懸停在父列上時同時啟用多個子元素（圖像）的懸停狀態。將鼠標懸停在列上時，我們希望以下內容完成對圖像的以下調整。

為每個圖像添加過渡持續時間，以便在懸停時平滑過渡。
調整圖像 1 的寬度為 180 像素，高度為 240 像素。這將導致圖像容器變高變窄以顯示更多圖像。
調整圖像 2 和 3，使其寬度為 160 像素，高度為 220 像素。這也將導致圖像變高變窄以顯示更多圖像。
調整圖像 2 逆時針旋轉 5 度並稍微向左移動。我們可以通過將 -5 度值添加到transform:rotate屬性並將left位置屬性的值調整為 0 來實現。
調整圖像 3 順時針旋轉 5 度並稍微向右移動。我們可以通過向transform:rotate屬性添加 5 度值並將right位置屬性的值調整為 0 來實現這一點。

要添加這些懸停效果所需的自定義 CSS，我們需要向包含圖像的行添加一個自定義 CSS 類。這將允許我們將自定義 CSS 僅應用於特定行中的圖像。

打開行設置並添加以下 CSS 類。

CSS 類：扇出圖像

divi 佈局包預覽扇出懸停效果

要將自定義 CSS 添加到頁面，請打開頁面設置並在“高級”選項卡下添加以下自定義 CSS。

/**transition duration and speed curve**/
.fan-out-images .et_pb_image {
  -webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
  transition: 300ms all cubic-bezier(.4,0,.2,1);
}
/**Change width and height of image 1 on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:first-child {
  width: 160px;
  height: 240px;
}
/**Change width and height of image 2 and 3 on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(2), .fan-cards .et_pb_column:hover .et_pb_image:nth-child(3) {
  width: 160px;
  height: 220px;
}
/**Rotate image 2 counterclockwise and move to the left on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(2) {
  left: 0;
  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);
}
/**Rotate image 3 clockwise and move to the right on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(3) {
  right: 0;
  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);
}

divi 佈局包預覽扇出懸停效果

我在每個 css 片段上方添加了一條註釋，以提醒您每個片段在做什麼。

一旦你完成了。查看最終結果。

最後結果

divi 佈局包預覽扇出懸停效果

可選的懸停效果：在懸停時分別旋轉圖像 1 和 2

為了給佈局包預覽圖像添加另一個層次的參與度，我們可以將圖像 1 和圖像 2 的旋轉與初始懸停效果分開進行。這將允許用戶以獨特的方式與圖像交互。如果需要，您甚至可以為這些圖像添加單獨的鏈接或燈箱預覽。

這是你如何做到的。

從頁面設置自定義 CSS 中取出轉換屬性

首先，您需要將鼠標懸停在列上時旋轉圖像的兩行自定義 CSS 取出。打開頁面設置自定義CSS，取出以下內容：

  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);

  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);

divi 佈局包預覽扇出懸停效果

在圖像 2 的懸停時添加變換屬性

然後打開圖像 2 的圖像模塊設置，並使用 Divi 的內置變換選項添加我們之前為懸停狀態刪除的相同變換旋轉值。

變換旋轉 Z 軸（懸停）：-5deg
Transform Translate X 軸（懸停）：-20px

divi 佈局包預覽扇出懸停效果

在圖像 3 的懸停時添加變換屬性

然後更新圖像 3 的圖像模塊設置以添加變換旋轉屬性。

變換旋轉 Z 軸（懸停）：5deg
Transform Translate X 軸（懸停）：20px

divi 佈局包預覽扇出懸停效果

現在看看最終的結果。

最後結果

divi 佈局包預覽扇出懸停效果

添加圖像鏈接

如果您想創建重定向鏈接以在單獨的頁面上展示特定的佈局包或頁面設計，最好將相同的鏈接 URL 添加到包中的所有三個圖像。為此，請打開每個圖像模塊並添加鏈接 URL。

divi 佈局包預覽扇出懸停效果

向其他列添加新的佈局包預覽

為了完成設計，我們可以復制第 1 列中的三個圖像並將它們粘貼到第 2 列和第 3 列中。

divi 佈局包預覽扇出懸停效果

之後，您需要做的就是用新的圖像更新第 2 列和第 3 列中的每個圖像。

就是這樣！

最終設計

這是最終的設計。頂行顯示懸停在列上時的懸停扇出懸停效果。第二行顯示了分別添加到圖像 2 和 3 的輔助扇出懸停效果。

divi 佈局包預覽扇出懸停效果

桌面上的三列佈局將在平板電腦和手機上調整為一列。

divi 佈局包預覽扇出懸停效果

最後的想法

扇出懸停效果是一種美觀且引人入勝的設計元素，您可以使用它在您自己的網站上展示頁面佈局。我們在本教程中介紹的自定義 CSS 和內置 Divi 設置的組合將神奇地工作。此設置將作為使用 Divi 構建器探索更多設計的絕佳起點。希望這能給你一些靈感，讓你的投資組合更上一層樓。

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

乾杯!

如何在 Divi 中使用扇出懸停效果重新創建 ET 的佈局包預覽

搶先看

免費下載佈局包預覽扇出懸停效果佈局

免費下載

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

你需要什麼開始

在 Divi 中使用扇出懸停效果重新創建 ET 的佈局包預覽

構建部分和行

添加圖像 1

添加圖像 2

添加圖像 3

到目前為止，一切都很好

添加扇出懸停效果 CSS

最後結果

可選的懸停效果：在懸停時分別旋轉圖像 1 和 2

從頁面設置自定義 CSS 中取出轉換屬性

在圖像 2 的懸停時添加變換屬性

在圖像 3 的懸停時添加變換屬性

最後結果

添加圖像鏈接

向其他列添加新的佈局包預覽

最終設計

最後的想法

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