使用 Divi 的新圖像替換懸停選項發揮創意

Divi 的新圖像替換懸停選項為您的項目提供了全新的創造力水平。 在這篇文章中，我們將向您展示如何創建一個漂亮的部分，其中的圖像在懸停時會發生變化。 我們希望此設計能激發您使用 Divi 的圖像替換懸停選項創建自己的創意部分。 您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

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

桌面

移動的

免費下載圖像替換佈局

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

下載文件

免費下載

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

下載

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

訂閱我們的 YouTube 頻道

讓我們開始重建

添加新部分

間距

首先創建一個新頁面或向現有頁面添加一個新部分。 添加行之前，請調整部分的間距設置。

• 上下邊距：2vw
• 左右邊距：2vw

邊界

然後，添加一些邊框半徑。

• 圓角：10px

添加新行

列結構

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

背景

在添加任何模塊之前，添加淺鮭魚漸變背景。

• 背景：漸變
• 漸變色 1：淡鮭魚 #f4e9de
• 漸變色 2：更淡的三文魚 #fff0e8

漿紗

繼續調整行的寬度。

• 天溝寬度：1
• 寬度：100%
• 最大寬度：100%

間距

最後，調整間距。

• 頂部填充：
  • 台式機 + 平板電腦：5vw
• 左填充：
  • 平板電腦 + 手機：5vw
• 右填充：
  • 台式機：7vw
  • 平板電腦 + 手機：5vw

將文本模塊添加到第 1 列

添加 H2 內容

是時候開始添加模塊了！ 將文本模塊添加到第 1 列並插入您選擇的一些 H2 內容。

標題文字

轉到設計選項卡並相應地設置 H2 文本設置的樣式：

• 標題文本級別：H2
• H2 字體：安妮使用你的望遠鏡
• H2 字體粗細：粗體
• H2 文本對齊：居中
• H2 文字顏色：棕色 #793715
• H2 文字顏色：
  • 台式機：7.2vw
  • 平板電腦：12vw
  • 電話：11vw

漿紗

接下來修改桌面上的寬度。

• 寬度：
  • 台式機：45vw
  • 平板電腦 + 手機：100%

轉變

最後但並非最不重要的一點是，使用變換設置旋轉文本並更改其位置。

• 變換旋轉：
  • 桌面：270 度
• 變換翻譯：
  • x軸：-10vw
  • y 軸：19vw

將第一個圖像模塊添加到第 1 列

添加透明插圖

在文本模塊正下方添加一個新的圖像模塊並上傳您選擇的插圖。 您可以通過下載本文開頭的壓縮文件夾來找到我們在本教程中使用的圖像。

漿紗

現在，強製圖像大小為全角。

• 全角：是

間距

然後，調整間距設置。

• 最高保證金：
  • 台式機 + 平板電腦：-11vw
• 左邊距：
  • 桌面：-2vw
  • 平板+手機：-36vw
• 左右填充：
  • 台式機：10vw
  • 平板+手機：34vw

將第二個圖像模塊添加到第 1 列

添加透明插圖

在第一個圖像模塊的正下方，添加另一個。 插入您選擇的插圖。

漿紗

強制模塊為全角。

• 全角：是

間距

然後，調整間距設置。

• 最高保證金：
  • 桌面：-2vw
  • 平板+手機：-10vw
• 左邊距：
  • 台式機 + 平板電腦：-14vw
• 左右填充：
  • 台式機：7vw
  • 平板+手機：35vw

將第三個圖像模塊添加到第 1 列

添加圖片

將另一個圖像模塊添加到該列並插入插圖。

漿紗

然後，強制模塊全寬。

• 全角：是

間距

最後，調整間距。

• 最高保證金：
  • 平板+手機：-18vw
• 左邊距：
  • 桌面：-13vw
  • 平板電腦 + 手機：10vw
• 左右填充：
  • 台式機：7vw
  • 平板+手機：35vw

將第 4 個圖像模塊添加到第 1 列

添加圖片

第 1 列中的最後一個模塊是另一個圖像模塊。 插入插圖。

漿紗

強制模塊為全角。

• 全角：是

間距

然後，調整間距。

• 最高保證金：
  • 台式機：3vw
  • 平板+手機：-15vw
• 左邊距：
  • 桌面：-3vw
  • 平板電腦 + 手機：30vw
• 左右填充：
  • 台式機：10vw
  • 平板+手機：35vw

轉變

最後但並非最不重要的是，旋轉插圖。

• 變換旋轉：84度

將第一個文本模塊添加到第 2 列

添加內容

進入下一欄！ 添加帶有您選擇的一些 H3 內容的文本模塊。

添加鏈接

然後，添加到模塊的鏈接。

背景

轉到背景設置，然後添加背景顏色。

• 背景顏色
• 背景顏色：棕色 #793715

標題文字

然後，在設計選項卡中設置 H3 文本的樣式。

• 標題文本級別：H3
• H3 字體：安妮使用你的望遠鏡
• H3 顏色：白色#ffffff
• H3 字體大小：
  • 台式機：2vw
  • 平板電腦：5vw
  • 電話：6vw

漿紗

現在，調整大小設置。

• 寬度：33%
• 模塊對齊：居中

間距

然後，在不同的屏幕尺寸之間添加一些間距值。

• 底邊距：1vw
• 頂部填充：
  • 台式機：0.5vw
  • 平板+手機：2.3vw
• 底部填充：
  • 台式機 + 平板電腦：1.1vw

邊界

繼續添加一些邊界半徑。

• 圓角：1vw 所有角落

盒子陰影

最後，添加一個框陰影。

• 框陰影：第一個選項
• 水平位置：7px
• 模糊強度：25px

將第一個圖像模塊添加到第 2 列

添加圖片

我們在第 2 列中需要的下一個模塊是圖像模塊。 上傳兩張不同的圖片：一張用於靜態，一張用於懸停。

• 靜態：第一張圖片
• 懸停：第二張圖片

漿紗

強製圖像為全角。

• 全角：是

間距

然後，調整間距值。

• 最高保證金：
  • 桌面：-2vw
  • 平板電腦 + 手機：20vw
• 底部邊距：
  • 台式機 + 平板電腦：4vw
• 左邊距：
  • 桌面：-5vw

邊界

接下來添加圓角。

• 圓角：所有角均為 10 像素

盒子陰影

也給圖像一個微妙的框陰影。

• 框陰影：第二個選項
• 垂直位置：20px
• 模糊強度：80px

轉變

最後，在懸停時調整變換比例值。

• 懸停時變換比例：110%

第 2 列中的重複文本和圖像模塊

克隆兩個模塊並按正確順序放置副本。

調整第 2 列中的第二個文本模塊

更改內容和鏈接

更改重複文本模塊中的內容。

調整第 2 列中的第二個圖像模塊

更改圖像

在靜態和懸停設置中更改圖像。

克隆第 2 列

刪除第 3 列並複制第 2 列

返回行設置並刪除第 3 列。 然後，複製第二列。

調整第 3 列中的第一個文本模塊

更改內容和鏈接

複製第 2 列後，調整第 3 列第 1 個文本模塊中的文本和鏈接。

調整第 3 列中的第一個圖像模塊

更改圖像

更改圖像模塊中的圖像。

間距

然後，調整間距。

• 最高保證金：
  • 桌面：-2vw
  • 平板電腦 + 手機：11vw
• 底部邊距
  • 台式機 + 平板電腦：5vw

調整第 3 列中的第二個文本模塊

更改內容和鏈接

更改第 3 列中最後一個文本模塊的文本和鏈接。

調整第 3 列中的第二個圖像模塊

更改圖像

也更改最後一個圖像模塊的靜態和懸停圖像。

間距

最後，調整圖像模塊的間距就大功告成了！

• 最高保證金：
  • 桌面：-3vw
  • 平板電腦 + 手機：7vw

預覽

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

桌面

移動的

結論

在這篇文章中，我們向您展示瞭如何使用 Divi 的新圖像替換懸停選項創建設計。 此功能可以帶來許多創造性的可能性。 我們希望您能在自己的項目中使用它們。 請記住對靜態圖像和懸停圖像使用相同的圖像大小。 如果您有任何問題或建議，請隨時在下面的評論部分留下它們！