如何在 Divi 中創建帶有懸停效果的 3D 路標

我們都知道一個好的網站可以讓訪問者輕鬆快速有效地找到他們想要的東西。 而且，如果您可以使您的內容更具吸引力，它總是有幫助的。 在本教程中，我將向您展示如何設計 3D 路標，以吸引用戶並讓他們以獨特的方式輕鬆找到他們正在尋找的內容。 為此，我們將在多個模糊模塊上使用 Divi 的變換選項和透視 css 屬性來創建在帖子上旋轉的標誌的 3D 效果。

讓我們開始吧！

搶先看

免費下載 3D 路標佈局

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

下載文件

免費下載

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

下載

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

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

讓我們進入教程好嗎？

訂閱我們的 YouTube 頻道

你需要什麼開始

首先，您將需要以下內容：

1. 確保您在 WordPress 網站上安裝並激活了 Divi 主題。
2. 如果您想創建自己的帖子圖像，則需要使用 Photoshop、Gimp 或 Sketch 等照片編輯器。 或者，您可以使用免費佈局下載中提供的圖像用於上述設計。
3. 除此之外，我們將在 Divi Builder 的前端從頭開始構建所有內容。

為路標創建圖像

為此設計創建路標的最簡單方法是創建一個小的可重複圖像塊，我們可以將其添加為背景圖像，該圖像在頁面的部分或行中垂直重複。 如果你想跳過這一步，你可以導入上面免費下載中包含的json佈局來開始。 但是，如果您想使用您選擇的自定義顏色創建自己的顏色，請按以下步驟操作。

在這個例子中，我將使用 Photoshop，但其他流行的照片編輯器的過程也非常相似。

在 Photoshop 中，單擊以創建一個自定義高度和寬度為 25px 的新文檔。

將前景色設置為黑色 (#000000) 或您想要的任何顏色。

然後選擇油漆桶工具並在空方形圖層內單擊以將方形塗成黑色。

然後將您的圖像以 jpeg 格式保存到您的計算機。 這是我們將在設計中使用的圖像，用於為我們的 3D 路標設計創建柱子。

在 Divi 中實現 3D 路標設計

準備好後，請確保創建一個新頁面，為頁面指定標題，並在前端部署 Divi Builder。 選擇“從頭開始構建”選項。

您的空白畫布等待著您！

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

自定義行

在我們添加模塊之前，打開行設置並更新以下內容：

背景圖片：[為帖子插入自定義方形圖片]
背景圖片尺寸：實際尺寸
背景圖像重複：重複 Y（垂直）

然後更新以下內容：

天溝寬度：1
最大寬度：980px
自定義填充：2vw 頂部，2vw 底部

然後我們需要將以下自定義 CSS 添加到 Column Main Element 中，如下所示：

perspective: 1000px;

每當我們使用變換選項旋轉它時，這個透視 css 屬性對於獲得標誌（或模糊）的 3D 效果是必要的。

有關這方面的更多信息，請查看透視如何與 Divi 的變換選項配合使用。

使用 Blurb 模塊創建標誌

為了在我們的 3D 路標上創建我們的第一個標誌，我們將使用一個模糊模塊。 繼續向該行添加一個模糊模塊。

然後打開blurb設置並更新blurb的內容如下：

減少模擬內容以僅包含幾行文本。

使用圖標：是
圖標：左箭頭（見截圖）

背景顏色：#1a233f

圖標顏色：#9eb3c2
圖像/圖標放置：左
使用圖標字體大小：是
圖標字體大小：80px

文字方向：居中
標題字體：Playfair Display
標題文字顏色：#9eb3c2
標題文字大小：38px（桌面），26px（手機）
最大寬度：600px
模塊對齊：居中
自定義填充：頂部 5%，底部 5%，左側 5%，右側 5%

圓角：20px

邊框寬度：3px
邊框顏色：#21335e

這會處理我們的模糊模塊的樣式，但是為了獲得我們的 3D 效果，我們需要使用變換選項來旋轉我們的模糊模塊。 為此，請更新以下內容：

變換旋轉 X 軸：20 度

複製行以獲得更多標誌

現在我們已經完成了一個標誌設計，我們可以復制該行以製作更多。 每次我們複製行時，我們只需要更新變換旋轉，以便標誌圍繞柱子以不同的角度旋轉。

繼續複製該行並更新新行中的模糊模塊，如下所示：

變換旋轉 X 軸：-30deg

複製該行以創建第三個標誌並更新該新行中的模糊模塊，如下所示：

變換旋轉 X 軸：40 度

改變第二個標誌的方向

現在所有的箭頭都指向同一個方向。 要從左到右改變方向，我們需要稍微更新一下模糊模塊設置。

打開第二行（中間的）blurb模塊的設置，更新如下：

圖標：右箭頭（見截圖）

文本方向：左

我們可以翻轉模糊內容的順序，使文本在左側，圖標在右側。 為此，我們需要向 Main Element 添加一行自定義 CSS，如下所示：

direction: rtl;

現在宣傳內容顛倒了，你有一個指向新方向的標誌！

在懸停時將標誌旋轉回原始狀態

關於此設置的一個很酷的事情是您可以輕鬆添加懸停狀態以將旋轉的模塊恢復到原始 (0deg) 旋轉。 這允許用戶在將鼠標懸停在模塊上時與內容互動並清楚地查看文本。

由於我們要為所有三個模糊模塊添加相同的懸停狀態，因此使用多選來選擇所有三個模糊模塊並打開其中一個模塊的設置以調出元素設置模式。 然後更新以下內容：

變換旋轉 X 軸（懸停）：0deg

保存設置，就是這樣！

現在檢查到目前為止的設計和功能。

使用背景圖像自定義我們的部分

對於我們的最後一步，我們可以向我們的部分添加一個新的背景圖像。 這當然是可選的，但正確的圖像看起來真的很酷，尤其是如果您使用視差效果。

打開該部分並添加新的背景圖像。 （我使用的是我們的 Agency Layout Pack 中的圖片）

然後更新以下內容：

使用視差效果：是
自定義填充：0px 頂部，0px 底部

最後結果

最後的想法

創建 3D 路標確實為您的網站添加了一個富有創意且引人入勝的設計元素，可以真正讓您的內容脫穎而出（字面意思）。 懸停效果允許用戶在沒有 3D 效果的情況下查看內容，從而獲得不錯的後備效果。 不要忘記您可以輕鬆地將鏈接 URL 添加到模糊模塊，以便它可以作為可點擊的導航元素（如果需要）。 不管怎樣，我希望這能給你的下一個項目一些靈感。

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

乾杯!