如何使用 Divi 創建無縫懸停網格
已發表: 2021-02-03如果您喜歡在考慮用戶交互的情況下構建網站，那麼您會喜歡這個 Divi 設計教程。 今天，我們將向您展示如何創建無縫懸停網格。 設計最初是簡單而乾淨的。 只要有人懸停其中一個項目，背景圖像就會顯示出來，並且模塊樣式也會隨之改變。 這會帶來美妙的懸停體驗。 在本教程中，我們將逐步指導您完成創建過程。 您也可以免費下載佈局的 JSON 文件！
讓我們開始吧。
預覽
在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。
桌面
移動的
免費下載佈局
要使用免費佈局，您首先需要使用下面的按鈕下載它們。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。
免費下載
加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。
您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！
讓我們開始重建吧！
添加新部分
背景顏色
首先向您正在處理的頁面添加一個新部分。 打開部分設置並應用白色背景色。
- 背景顏色：#ffffff
添加第 1 行
列結構
繼續使用以下列結構添加新行：
漿紗
還沒有添加模塊，打開行設置並修改大小設置如下：
- 使用自定義裝訂線寬度：是
- 天溝寬度：1
- 寬度：100%
- 最大寬度：100%
間距
接下來刪除所有默認的頂部和底部填充。
- 頂部填充：0px
- 底部填充：0px
邊界
並包括頂部和底部邊框。
- 上下邊框寬度：1px
- 頂部和底部邊框顏色：#d3d3d3
第 1 列設置
懸停漸變背景
接下來，我們有第 1 列設置。 在懸停時應用漸變背景。
- 顏色 1：rgba(255,255,255,0)
- 顏色 2：#000000
- 漸變類型：線性
- 起始位置：30%
懸停背景圖片
也可以在懸停時上傳背景圖片。
- 背景圖片尺寸：封面
- 背景圖片位置：中心
CSS 類
並通過在高級選項卡中分配以下 CSS 類來完成列設置：
- CSS 類：懸停列
將文本模塊 #1 添加到第 1 列
添加H3內容
是時候添加模塊了，從第 1 列中的第一個文本模塊開始。使用您選擇的一些 H3 內容。
H3 文本設置
轉到模塊的設計選項卡並按如下方式更改 H3 文本設置：
- 標題 3 字體：Oswald
- 標題 3 字體粗細：超輕
- 標題 3 字體樣式：大寫
- 標題 3 文本顏色：#0a0a0a
- 標題 3 文字大小：
- 台式機：3vw
- 平板電腦：7vw
- 電話：14vw
- 標題 3 字母間距：-2px
漿紗
在大小設置中修改不同屏幕大小的寬度。
- 寬度：
- 台式機：44%
- 平板電腦：48%
- 電話：50%
間距
我們也在使用一些自定義邊距和填充值。
- 底邊距：25vh
- 頂部填充：5%
- 底部填充：5%
- 左填充：7%
- 右填充：7%
邊界
接下來，我們將添加一些右邊框和下邊框。
- 右下邊框寬度：1px
- 右下邊框寬度：1px
- 右下邊框顏色：#d3d3d3
CSS 類
我們將通過將以下 CSS 類分配給文本模塊來完成模塊設置：
- CSS 類：懸停標題
將文本模塊 #2 添加到第 2 列
添加內容
在上一個文本模塊的正下方添加另一個文本模塊，其中包含您選擇的一些描述內容。
文字設置
轉到模塊的設計選項卡並相應地更改文本設置：
- 文字字體：Karla
- 文字顏色：#ffffff
- 字體大小：
- 台式機：0.8vw
- 平板電腦：2vw
- 電話：3.6vw
- 文本行高：2.2em
間距
也應用一些自定義填充值。
- 底部填充：10%
- 左填充：9%
- 右填充：9%
CSS 類
並通過為模塊使用以下 CSS 類來完成模塊設置：
- CSS 類：懸停文本
將按鈕模塊添加到第 2 列
添加副本
我們需要的下一個也是最後一個模塊是按鈕模塊。 添加一些您選擇的副本。
按鈕設置
修改模塊的按鈕設置如下：
- 為按鈕使用自定義樣式：是
- 按鈕文字大小：
- 台式機：1vw
- 平板電腦：2.5vw
- 電話：4vw
- 按鈕邊框寬度：0px
- 按鈕邊框半徑：0px
- 按鈕字體：Karla
- 顯示按鈕圖標：是
- 按鈕圖標位置：左
- 僅在懸停按鈕時顯示圖標：否
間距
也添加一些自定義間距值。
- 底邊距：8%
- 左邊距：9%
- 右邊距：9%
- 底部填充：5%
- 右填充：20%
盒子陰影
然後，應用框陰影。
- 框陰影水平位置：0px
- 框陰影垂直位置：2px
- 陰影顏色：#000000
CSS 類
並通過為按鈕分配以下 CSS 類來完成模塊設置：
- CSS 類：懸停按鈕
重用第 1 列
刪除第 2、3 和 4 列
現在我們已經構建了第一列，我們可以重用它。 我們要做的第一件事是刪除我們行中的空列。
克隆第 1 列 3 次
我們將通過克隆 3 次來重用第 1 列。
更改重複的列懸停背景圖像
更改每個重複列中的重複列背景圖像。
更改重複內容
以及每個重複列中的模塊內容。
獨特的列邊框
第 1 欄
我們需要對每列應用一些獨特的邊框設置，從第 1 列開始。
- 右邊框寬度：
- 桌面：1px
- 平板電腦：1px
- 電話：0px
- 右邊框顏色：#d3d3d3
- 底部邊框寬度：
- 桌面：0px
- 平板電腦：1px
- 電話：1px
- 底部邊框顏色：#d3d3d3
第 2 欄
接下來，我們有第 2 列。
- 右邊框寬度：
- 桌面：1px
- 平板電腦：0px
- 電話：0px
- 右邊框顏色：#d3d3d3
- 底部邊框寬度：
- 桌面：0px
- 平板電腦：1px
- 電話：1px
- 底部邊框顏色：#d3d3d3
第 3 欄
我們將為第 3 列使用以下邊框設置：
- 右邊框寬度：
- 桌面：1px
- 平板電腦：1px
- 電話：0px
- 右邊框顏色：#d3d3d3
- 底部邊框寬度：
- 桌面：0px
- 平板電腦：0px
- 電話：1px
- 底部邊框顏色：#d3d3d3
將自定義 CSS 代碼添加到頁面設置
打開頁面設置
現在我們已經完成了整個設計，剩下要做的就是添加一些自定義 CSS 代碼來幫助觸發子元素（模塊）上的懸停效果。 為此，請打開頁面設置。
添加 CSS 代碼
並複制粘貼以下 CSS 代碼行：
.hover-column:hover .hover-title {
background-color: #000000;
}
.hover-column:hover .hover-title h3 {
color: white !important;
}
.hover-button {
color: black;
}
.hover-column:hover .hover-button {
color: white !important;
box-shadow: 0px 2px 0px 0px #ffffff;
}
.hover-column:before {
position: absolute;
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(180deg,#ffffff 30%,#ffffff 100%);
z-index: -1;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
-ms-transition: all 0.8s ease;
transition: all 0.8s ease;
opacity: 1;
}
.hover-column:hover::before {
opacity: 0;
}
預覽
現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。
桌面
移動的
最後的想法
在這篇文章中，我們向您展示瞭如何創建漂亮的懸停設計。 更具體地說，我們創建了一個以簡潔明快的方式開始的列網格。 一旦訪問者將特定項目懸停在網格中，背景圖像就會顯示出來，並且模塊樣式也會發生變化。 您也可以免費下載 JSON 文件！ 如果您有任何疑問，請隨時在下面的評論部分發表評論。
如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。