3 種無縫變換懸停效果，您可以使用 Divi 將其應用於您的圖像
已發表: 2019-06-03正在尋找一種很酷的方式在您的下一個 Divi 網站上展示圖片？ 繼續閱讀，因為在這篇文章中，我們將處理 3 種圖像變換懸停效果，這將有助於提升頁面的整體外觀和感覺。 您將能夠遵循三個不同示例的 A 到 Z 重新創建過程，甚至可以下載它們以立即使用。 本教程的主要目的是激勵您將 Divi 的新轉換選項與現有選項結合起來，以創建漂亮的網頁設計。
讓我們開始吧！
預覽
在我們深入學習本教程之前，讓我們快速瀏覽一下所有三個示例在不同屏幕尺寸下的結果。
桌面
示例#1
示例#2
示例 #3
移動的
示例#1
示例#2
示例 #3
免費下載圖像變換懸停效果
訂閱我們的 YouTube 頻道
要使用免費的圖像變換懸停效果，您首先需要使用下面的按鈕下載它們。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。
免費下載
加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。
您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！
一般步驟
添加新部分
間距
在我們單獨重新創建每個示例之前，我們將完成一些常規步驟。 使用以下邊距和填充值向頁面添加新的常規部分：
- 上邊距：200px
- 下邊距：200px
- 頂部填充：0px
- 底部填充：0px
添加新行
列結構
繼續使用以下列結構添加新行：
第 2 列背景顏色
尚未添加任何模塊，打開行設置並向第二列添加背景顏色。
- 第 2 列背景顏色：#efefef
漿紗
接下來轉到大小設置並允許行佔據屏幕的整個寬度。
- 使用自定義裝訂線寬度：是
- 天溝寬度：1
- 均衡柱高：是
- 寬度：100%
- 最大寬度：100%
間距
接下來添加以下自定義填充值：
- 頂部填充：0px
- 底部填充：0px
- 第 2 列頂部填充：10vw
- 第 2 列底部填充：10vw
- 第 2 列左填充：5vw
- 第 2 列右填充：5vw
將文本模塊 #1 添加到第 2 列
添加 H2 內容
是時候開始將各種模塊添加到第 2 列，從文本模塊開始。 輸入您選擇的一些 H2 含量。
H2 文本設置
轉到設計選項卡並修改 H2 文本設置。
- 標題 2 字體：Times New Roman
- 標題 2 字體粗細：粗體
- 標題 2 文本顏色：#0f47ff
- 標題 2 文字大小：3.5vw
將分隔模塊添加到第 2 列
能見度
我們在第二列中需要的下一個模塊是分頻器模塊。 確保啟用了“顯示分隔線”選項。
- 顯示分隔線：是
顏色
然後，轉到設計選項卡並更改分隔線顏色。
- 顏色：#ff961e
漿紗
還要修改尺寸值。
- 分隔線重量：1px
- 寬度：20%
- 模塊對齊：左
- 高度：0px
間距
並使用以下頂部和底部邊距值為模塊創建一些空間：
- 最高利潤率：1vw
- 底邊距：1vw
將文本模塊 #2 添加到第 2 列
添加內容
進入下一個模塊，這是另一個文本模塊。 輸入您選擇的一些段落內容。
文字設置
移至設計選項卡並更改文本設置。
- 文字字體：Open Sans
- 文字大小：0.7vw（桌面）、1.7vw（平板電腦）、2.5vw（手機）
- 文本行高：1.5vw（桌面）、2.5vw（平板電腦）、3.5vw（手機）
- 文本方向：對齊
漿紗
還要修改大小設置。
- 寬度：61%（桌面），80%（平板電腦和手機）
間距
並添加一些自定義的頂部和底部邊距。
- 最高利潤率：2vw
- 底邊距：2vw
將文本模塊 #3 添加到第 3 列
添加內容
在第二列中我們需要的下一個也是最後一個模塊，這是另一個文本模塊。 我們將通過添加一些段落內容將此模塊用作按鈕。
添加鏈接
繼續添加指向 CTA 的鏈接。
文字設置
轉到設計選項卡並相應地更改文本設置：
- 文字字體：Times New Roman
- 文字顏色：#ff961e
- 文字大小：1.5vw（桌面）、2.5vw（平板電腦）、3.5vw（手機）
漿紗
在大小設置中更改模塊的寬度。
- 寬度：48%
間距
然後，轉到間距設置並添加一些自定義填充。
- 頂部填充：1vw
- 底部填充：1vw
邊界
通過添加具有以下設置的底部邊框來完成文本模塊：
- 底部邊框寬度：1px
- 底部邊框顏色：#0f47ff
克隆部分兩次
完成自定義部分及其中的所有元素後，您可以繼續克隆兩次。 我們將使用頁面上的每個部分重新創建本文開頭共享的三個示例。
重新創建示例 #1
將圖像模塊添加到第 1 列
將圖像框留空
讓我們從第一個例子開始！ 將新的圖像模塊添加到第一列，並確保將圖像框留空。
默認背景顏色
更改圖像模塊的背景顏色：
- 背景顏色：#0f47ff
懸停背景顏色
修改懸停時的背景顏色。
- 背景顏色：rgba(255,150,30,0.65)
背景圖片
我們不會上傳圖片，而是在背景中添加一張圖片，並附帶以下設置：
- 背景圖片尺寸：封面
- 背景圖片位置：中心
- 背景圖像重複：不重複
- 背景圖像混合：柔光
間距
轉到模塊的間距設置並添加一些自定義填充值：
- 在圖像下方顯示空間：否
- 頂部填充：22vw
- 底部填充：22vw
默認平移旋轉
我們還將在懸停時旋轉圖像。 通過在右側選項中添加“0deg”，確保圖像在懸停之前以其原始狀態顯示。
- 右：0度
懸停 翻譯 旋轉
在懸停時更改此值：
- 右：180度
過渡
為了立即產生效果，我們將刪除過渡持續時間：
- 轉換持續時間：0ms
重新創建示例 #2
將圖像模塊添加到第 1 列
將圖像框留空
進入第二個例子！ 再次確保將圖像框留空。
默認背景顏色
轉到背景設置並添加以下（完全透明）背景色：
- 背景顏色：rgba(255,255,255,0)
懸停背景顏色
在懸停時修改此顏色：
- 背景顏色：rgba(0,0,0,0.65)
背景圖片
我們再次使用背景圖片，而不是將一張圖片上傳到模塊本身。 將背景圖像與以下設置相結合：
- 背景圖片尺寸：封面
- 背景圖片位置：中心
- 背景圖像重複：不重複
- 背景圖像混合：柔光
間距
然後，轉到間距設置並修改頂部和底部填充：
- 在圖像下方顯示空間：否
- 頂部填充：22vw
- 底部填充：22vw
默認變換比例
確保默認變換比例值保持“100%”。
- 正確：100%
- 底部：100%
懸停變換比例
並在懸停時更改這些值以創建縮放效果。
- 正確：120%
- 底部：120%
默認轉換
默認情況下，我們在轉換轉換設置中為底部選項保留“0px”。
- 底部：0px
懸停變換翻譯
在懸停時修改此值以重新定位元素。
- 底部：9vw
過渡
我們還通過更改高級選項卡中的過渡持續時間來創建稍微快一點的過渡：
- 轉換持續時間：200ms
重新創建示例 #3
更改列結構
繼續下一個也是最後一個例子！ 首先修改行的列結構。
將圖像模塊添加到第 1 列
上傳 1:1 圖片
然後，將圖像模塊添加到第一列。 與前兩個示例相反，我們將上傳比例為 1:1（寬度和高度相同）的圖像。
漿紗
移至設計選項卡並在大小設置中強製圖像為全角。
- 強制全角：是
間距
接下來在間距設置中刪除圖像下方的空間。
- 在圖像下方顯示空間：否
默認邊框
然後，轉到邊框設置並將“500vw”添加到每個角。 我們確保該值足夠高以覆蓋所有屏幕尺寸。
懸停邊框
刪除您在懸停時添加的圓角。
默認過濾器
然後，轉到過濾器設置並確保添加了這些默認值：
- 飽和度：100%
- 亮度：46%
- 不透明度：3%
懸停過濾器
在每個修改的設置上啟用懸停選項並使用以下值：
- 飽和度：300%
- 亮度：46%
- 不透明度：100%
默認變換比例
然後，轉到變換選項並修改默認變換比例選項：
- 正確：68%
- 底部：68%
懸停變換比例
在懸停時更改這些值。
- 正確：130%
- 底部：130%
默認轉換
繼續轉換轉換值並確保默認轉換轉換值保持不變：
- 右：0px
- 底部：0px
懸停變換翻譯
修改懸停時的值。
- 右：1vw
- 底部：8vw
過渡
最後但並非最不重要的是，在高級選項卡中增加過渡持續時間以創建平滑過渡，您就完成了！
- 轉換持續時間：600ms
預覽
現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。
桌面
示例#1
示例#2
示例 #3
移動的
示例#1
示例#2
示例 #3
最後的想法
在這篇文章中，我們向您展示瞭如何使用圖像模塊和 Divi 的懸停和變換選項來發揮創意。 我們重新創建的效果只是眾多美麗可能性中的一小部分。 如果您有任何問題或建議，請務必在下方評論區留言！
如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。