如何在懸停時創建旋轉菜單輪

在懸停時創建旋轉菜單輪是一種在您的網站上展示有用鏈接的有趣方式。 這將是在標題中提供多個號召性用語以將用戶引導到他們需要去的地方的好方法。 它也是您博客的一個很酷的子類別菜單。

在本教程中，我將向您展示如何在 Divi 中懸停時創建旋轉菜單輪。 這可以通過使用內置的 Divi 選項和一些自定義 css 片段的組合來完成。

搶先看

免費下載佈局

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

下載文件

免費下載

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

下載

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

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

讓我們進入教程好嗎？

訂閱我們的 YouTube 頻道

你需要什麼開始

首先，您需要具備以下條件：

1. 已安裝並激活 Divi 主題
2. 在前端從頭開始構建的新頁面（可視化構建器）

之後，您將有一個空白畫布開始在 Divi 中進行設計。

在 Divi 中創建旋轉菜單輪設計

基本理念

輪子是通過將一行變成一個圓形元素來創建的，它的高度和寬度為 500 像素和 50% 的圓角。 每個菜單鏈接都是在單獨的文本模塊中創建的，並通過沿行的半徑（中心）旋轉每個文本模塊來沿圓形行的周邊對齊。 此設置類似於您在 Divi 中創建彎曲文本的方式。

創建部分和第 1 行

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

然後將文本模塊添加到具有以下內容的行。

然後更新文字設計如下：

文字字體：分享技術
文字字母間距：1px
標題 2 文字大小：8vw

添加第 2 行以構建輪子

接下來，我們需要在第 1 行下添加一個新的單列行。

在開始為鏈接添加文本模塊之前，我們需要將行設計為一個輪子。 需要對行進行大量優化以製作我們的車輪設計。 首先，打開第 2 行的設置並更新以下內容：

背景顏色：#02366b
背景漸變左顏色：rgba(0,0,0,0.45)
背景漸變右顏色：#02366b
漸變類型：徑向
徑向：中心
起始位置：36%
結束位置：0%

使用自定義裝訂線寬度：是
天溝寬度：1
寬度：500px
最大寬度：500px（桌面），自動（平板電腦和手機）
高度：500px（桌面），自動（平板電腦和手機）
填充（桌面）：0px 頂部，0px 底部
填充（平板電腦和手機）：頂部 20 像素，底部 20 像素，左側 20 像素
保證金（電話）：-10% 正確

我們需要將行的高度和寬度都設置為 500px，以便它是一個完美的正方形。 這將允許我們使用 Divi 中的圓角（邊界半徑）選項為其提供完美的圓形。

圓角：50%

然後我們可以使用框陰影添加另一個級別的圓形設計，如下所示：

盒子陰影：見截圖
框陰影模糊強度：0px
框陰影傳播強度：210px
陰影顏色：rgba(2,54,107,0.66)

接下來我們將添加一小段 CSS 以使我們的行內容垂直居中。 在高級選項卡下，在主元素中添加以下自定義 CSS。

display:flex;
align-items:center;

現在負責行設置。 我們稍後會回來添加我們的旋轉懸停效果。

添加鏈接

輪子中的每個鏈接都將使用文本模塊創建。 我們將總共創建六個文本模塊。 其中五個文本模塊將保存輪子的鏈接，其中一個文本模塊將包含菜單標題。

首先創建一個新的文本模塊。

然後按如下方式更新文本設置：

正文內容：“鏈接項目”

文字字體：分享技術
文字文字顏色：#ffffff
文字文字大小：16px（默認），20px（懸停）
文字字母間距：1px
文本行高：60px
寬度：250px（桌面），自動（平板電腦和手機）
高度：60px
填充：左20px

暫時保存設置。 然後將文本模塊複製 4 次，共創建 5 個文本模塊。

定位鏈接/文本模塊

現在我們準備好沿著輪子的周邊定位我們的鏈接。 為此，我們將使用移動/平移和旋轉模塊到位的變換選項更新每個文本模塊。

為了使這更容易，部署線框視圖模式並標記從頂部的鏈接 1 開始一直到底部的鏈接 5 的文本模塊。

鏈接 1

我們將從編輯鏈接 1 開始。打開鏈接 1 的文本模塊設置並更新以下內容：

Transform Translate Y 軸：120px（桌面），0px（平板電腦和手機）
變換旋轉 Z 軸：60deg（桌面），0px（平板電腦和手機）
變換原點：50% 100%（右中）

鏈接 2

打開 Link 2 的文本模塊設置並更新以下內容：

Transform Translate Y 軸：60px（桌面），0px（平板電腦和手機）
變換旋轉 Z 軸：30deg（桌面），0px（平板電腦和手機）
變換原點：50% 100%（右中）

鏈接 3

由於鏈接 3 的文本模塊在中間，我們可以將其留在原處。

鏈接 4

打開 Link 2 的文本模塊設置並更新以下內容：

Transform Translate Y 軸：-60px（桌面），0px（平板和手機）
變換旋轉 Z 軸：-30deg（桌面），0px（平板電腦和手機）
變換原點：50% 100%（右中）

鏈接 5

打開 Link 2 的文本模塊設置並更新以下內容：

Transform Translate Y 軸：-120px（桌面），0px（平板和手機）
變換旋轉 Z 軸：-60deg（桌面），0px（平板電腦和手機）
變換原點：50% 100%（右中）

現在讓我們看看到目前為止的結果。 注意文本模塊中的鏈接/文本如何沿著圓的周長完美地旋轉。

添加菜單標籤

要添加菜單標籤，我們需要在已有的五個文本模塊的頂部添加另一個文本模塊。 繼續並在鏈接 1 上方添加一個新的文本模塊。

然後使用以下內容更新正文內容：

<p>menu</p>

確保菜單標籤包含在 ap 標籤中。 這將確保在文本設置中識別行高。

然後為了加快設計速度，複製 Link 3 文本模塊的模塊樣式並將這些模塊樣式粘貼到新的文本模塊。

然後更新以下內容：

行高：300px（桌面），20px（平板和手機）
高度：恢復默認設置（自動）

行高需要是 300 像素，這樣它就等於內容列的高度，也是 300 像素（5 個文本模塊，每個 60 像素的高度等於 300 像素）。 這將確保文本保持垂直居中。

然後我們需要將菜單標籤文本模塊旋轉 180 度，使其正確顯示在滾輪的另一側。 這將允許訪問者在懸停狀態之前看到菜單標籤，從而在視圖中旋轉鏈接。

變換旋轉 Z 軸：180 度（桌面），0 度（平板電腦和手機）
變換原點：50% 100%（右中）

完成後，我們需要給菜單標籤文本模塊一個絕對位置。 為此，請將以下自定義 CSS 添加到主元素：

position: absolute !important;

現在看看結果。 您應該看到菜單項在滾輪的右側是倒置的。

將旋轉懸停效果添加到行/輪

要將旋轉懸停效果添加到行，請按如下方式更新行設置：

Transform 旋轉 Z 軸：180deg（桌面），0deg（懸停，0deg（平板電腦和手機）

然後更新過渡設置如下：

轉換持續時間：450ms
過渡速度曲線：漸入漸出

現在看看輪子在懸停時如何旋轉。

為該部分製作兩列佈局

現在的佈局由兩個一列堆疊在一起的行組成。 但是，我們可以使用 flex css 屬性來水平對齊兩行。 為此，我們可以向該部分添加一小段自定義 CSS。 完成後，我們需要稍微調整間距以使事情看起來恰到好處。

打開部分設置並將以下自定義 css 添加到主元素：

display:flex;

更新第 1 行間距

接下來，更新第 1 行的大小和間距，如下所示：

寬度：40%（桌面），100%（平板電腦和手機）
邊距（桌面）：剩餘 5%
邊距（平板電腦）：左 5%，右 5%
保證金（電話）：5%

最後的潤色

在平板電腦和手機顯示屏上，您需要為 Link 1 Text 模塊添加一些上邊距。

邊距（平板電腦）：30px 頂部

並且您始終可以在該部分添加一個部分分隔符以完成設計。

最後結果

現在讓我們看看最終的結果。

替代半輪設計

一種很酷的替代設計是將輪子的右半部分隱藏在該部分之外，以便隱藏鏈接，然後在懸停時顯示。 為此，請繼續複製包含我們剛剛製作的設計的整個部分。 在重複部分，按如下方式更新第 1 行設置：

寬度：70%（桌面）

然後更新第 2 行的設置，以便將輪子推到該部分之外，如下所示：

邊距：-250px 右

我們需要使用 -250px，因為輪子的總寬度是 500px，我們想要正好隱藏行的一半。

然後將部分可見性設置為隱藏，如下所示：

這是最終的設計。

最後的想法

旋轉的鏈輪是優雅的設計元素之一，可以通過微妙而獨特的懸停效果吸引遊客。 僅使用 Divi 的內置設計設置就可以完成多少這種設計，真是令人驚訝。 我希望這會在您的下一個項目的設計工具帶中添加一些額外的東西。

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

乾杯!