使用 Divi 在懸停時創建彈出式服務描述
已發表: 2019-07-20在懸停時創建彈出式服務描述可以是一種有效的方式來通知用戶並讓用戶了解附加信息。 就像工具提示一樣，這些彈出式描述將在懸停時顯示有關您的服務的更多信息。 但是使用 Divi，您可以在 Divi builder 中使用全套設計工具來創建令人驚嘆的彈出式設計，而無需任何額外的自定義 CSS。
在本教程中，我們將向您展示在您的 Divi 網站上構建彈出式服務描述是多麼容易。 訣竅是將您的模塊放置在這樣一種方式，即當您在懸停時調整行的寬度時，它們會相互滑動並彈出。
讓我們開始吧！
搶先看
免費下載佈局
要了解本教程中的設計，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。
免費下載
加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。
您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！
訂閱我們的 YouTube 頻道
要將佈局導入您的頁面，只需提取 zip 文件並將 json 文件拖到 Divi Builder 中。
讓我們進入教程好嗎？
你需要什麼開始
首先，您需要具備以下條件：
- 已安裝並激活 Divi 主題
- 在前端從頭開始構建的新頁面（可視化構建器）
- 用於模擬內容的圖像。 我們將在本教程中使用投資公司佈局包中的一些。
之後，您將有一個空白畫布開始在 Divi 中進行設計。
使用 Divi 在 Hover 上創建彈出的服務描述
創建部分和行
首先，創建一個具有一列行的新常規部分。
在添加任何模塊之前，請按如下方式更新行設置：
添加深色背景圖像或深色背景顏色。 我使用的是來自 Investment Company Layout Pack 的抽象背景圖像。 但是如果你不想使用那個，你可以只添加#161c29的背景顏色。
- 天溝寬度：1
- 寬度：100%
- 高度：320px（桌面），自動（平板電腦和手機）\
- 填充：0px 頂部，0px 底部
添加模糊模塊
接下來向您的行添加一個模糊模塊。
並更新模糊模塊設置如下：
- 標題：服務
- 圖標：見截圖
也刪除默認的正文內容。
- 背景圖片：添加大約 320 像素 x 215 像素的圖片
- 背景圖片尺寸：適合
- 背景圖片位置：頂部中心
- 背景漸變左顏色：rgba(31,72,192,0.61)
- 背景漸變右側顏色：#161c29
- 起始位置：34%
- 最終位置：71%
- 將漸變放在背景圖像上方：是
- 圖標顏色：#ffffff
- 文本對齊：居中
- 標題字體：檔案
- 標題文字顏色：#ffffff
- 標題文字大小：38px
- 標題字母間距：4px
- 最大寬度：320px
- 模塊對齊：居中
- 高度：320px
- 填充：68px 頂部
- 圓角：10px
- Z指數：1
添加 z index 1 值對於確保模糊模塊保持在最終將堆疊在其後面的其他模塊之上至關重要。
添加號召性用語模塊
接下來，我們需要添加一個調用動作模塊，該模塊將位於模糊模塊的左側。
這將是我們最終會在懸停時彈出的兩個內容區域中的第一個。
現在我們需要取出默認的背景顏色並更新設計設置如下：
- 文本對齊方式：左
- 標題字體：檔案
- 標題文字大小：22px
- 寬度：320px
- 模塊對齊方式：左（桌面），中心（平板電腦和手機）
- 高度：320px（桌面），自動（平板電腦和手機）
- 邊距：-320px（桌面），0px（平板和手機）
- 填充：頂部 40 像素，左側 40 像素，右側 40 像素
複製號召性用語模塊並將其向右對齊
要創建將出現在簡介右側的第二個內容塊，我們可以部署線框視圖模式並複制號召性用語模塊。 然後打開副本的設置並將模塊對齊更新到右側。
到目前為止，設計應該是這樣的。
創建按鈕
我們需要添加到設計中的最後一個元素是按鈕。 如果您願意，您可以在任一號召性用語模塊中添加按鈕。 但是對於這個設計，我認為最好添加一個在我們行底部保持可見的按鈕。
要創建按鈕，請部署線框視圖模塊並直接在第二個號召性用語模塊下添加按鈕模塊，使其成為行/列中的最後一個模塊。
打開按鈕模塊設置，然後切換桌面視圖模式，以便您可以直觀地編輯按鈕。
添加按鈕文本“了解更多”。
然後更新按鈕樣式如下：
- 按鈕對齊：居中
- 按鈕文字顏色：#ffffff
- 按鈕背景顏色：#1f48c0
- 按鈕邊框寬度：0px
- 按鈕邊框半徑：10px
- 按鈕字母間距：4px
- 按鈕字體：Archivo
現在我們需要做的就是定位我們的按鈕。
- 邊距（桌面）：-25px 頂部
- 邊距（平板電腦和手機）：頂部 25 像素，底部 50 像素
- Z指數：2
z 索引值為 2 將確保按鈕保持在模糊模塊上方（其 z 索引為 1）。
創建彈出懸停效果
我們需要完成彈出服務描述的主要懸停效果涉及更改懸停時行的寬度。 為此，我們需要默認為我們的行設置一個較窄的寬度。 這將導致模塊相互堆疊並隱藏在模糊模塊後面。 然後我們將在懸停時擴展行的寬度，以暴露兩個隱藏的號召性用語模塊。
打開行設置並更新寬度，如下所示：
- 最大寬度（桌面）：320px
- 最大寬度（懸停）：1080px
- 最大寬度（平板電腦和手機）1080px
然後最後一步，為該行添加一個邊框半徑並將可見性溢出選項更新為可見，這樣按鈕就不會被隱藏。
- 圓角：10px
- 水平溢出：可見
- 垂直溢出：可見
最後結果
到目前為止，請查看彈出式服務說明。
這是在平板電腦和手機顯示屏上。
嘗試更多設計選項
既然我們已經有了基本的設置，那麼嘗試更多的設計選項總是很有趣的。 以下是一些您可以嘗試彈出式服務描述的建議。
添加部分背景顏色
如果需要，您可以為與行的背景顏色/圖像匹配的部分添加背景顏色，以獲得獨特的彈出設計。
轉到行設置並更新以下內容：
- 背景顏色：#161c29
然後查看結果。
僅使用兩個模塊
如果您想要僅使用兩個模塊的更緊湊的彈出窗口，您可以刪除一個號召性用語模塊，然後將模糊模塊向左對齊，以便在懸停時這兩個模塊可見。
為此，請部署線框視圖模式。 然後直接刪除blurb模塊下的第一個號召性用語模塊。
之後，使用左模塊對齊更新模糊模塊。
- 模塊對齊：左（桌面），中心（平板）
最後，在懸停時減小行的最大寬度以使其更緊湊。 打開行設置並更新以下內容：
- 最大寬度（懸停）：700px
- 最大寬度（平板電腦）：700px
這是最終結果。
這是在白色背景上。
最後的想法
在懸停時創建彈出式服務描述是吸引訪問者使用您的內容的獨特方式。 此功能的工作原理很像包含 Divi 的所有設計功能的精美且信息豐富的工具提示。 這很容易做到。 一旦您確定了模塊的大小和位置，您需要做的就是在懸停時調整行的寬度。 隨意嘗試不同的模塊和內容，以獲得更多的應用程序。 如果有的話，我希望這會給你更多的靈感，讓你用 Divi 做更多的事情。
我期待在評論中收到您的來信。
乾杯!