如何在 Divi 中創建在 3D 空間中碰撞的浮動模塊

探索使用 Divi 可能實現的新設計總是很有趣。 而今天，我們將使用 Divi 探索 3D 空間！ 從技術上講，我們將探索如何設計看起來像是在 3D 空間中碰撞的浮動模塊。 這種設計將作為一種創造性的方式工作，通過展示您的網站上有“廣泛”的服務、產品或資源來吸引訪問者。

顯然，本教程不會與我想像的現實太空探索進行比較。 但是，希望您在那裡的 Divi 探索者可以在此過程中學到一些東西。

搶先看

這是我們將共同構建的設計的先睹為快。

免費下載在 3D 空間佈局中碰撞的浮動模塊

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

下載文件

免費下載

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

下載

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

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

讓我們進入教程好嗎？

訂閱我們的 YouTube 頻道

預製佈局入門

首先，請確保您已安裝並激活 Divi 主題。 然後創建一個新頁面，給頁面一個標題，然後部署 Divi Builder（在前端）。 選擇“選擇預製佈局”選項。 然後選擇 Video Game Landing Page 佈局並將其導入新頁面。

為了在我們的設計中搶先一步，我們將使用標題為“遊戲功能”的部分，其中包含我們將用於我們的設計的簡介。 由於這是我們真正需要的唯一部分，請繼續刪除除兩行簡介之外的所有部分和行。

在 Divi 中實現 3D 空間設計中的浮動模糊

創建第一行模糊

在包含兩行簡介的預製佈局部分內，創建一個新的一列行並將其拖動到該部分的頂部。

現在使用 Divi 的多選功能（在選擇每個簡介時按住 ctrl/cmd），選擇下面兩列中的 5 個簡介，並將它們拖到該部分頂部的新一列行中。

現在您可以刪除下面預製佈局附帶的兩行。 之後，您應該只有一個包含 5 個簡介的單列行。

為我們的部分添加視角

為了獲得我們在這個設計中尋找的 3D 效果，我們需要將透視 css 屬性添加到我們的部分。 每當我們使用變換選項旋轉行時，這都會將 3D 透視添加到我們的行中。

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

perspective: 1000px;

稍後，您可能希望增加或減少透視值以使 3D 元素（在本例中為行）在觀看屏幕時離用戶的視角更近或更遠。

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

自定義行

在我們開始設計我們的簡介之前，讓我們首先配置我們的行設置。 對於此設計，我們需要在行級別更改三項主要內容：

1. 我們需要使用“display:flex”水平對齊我們的簡介。 這將使我們的設計在所有設備上保持一致和響應（而不是使用會在平板電腦和手機上中斷的 5 列佈局）。
2. 我們需要通過將裝訂線寬度設置為 1 來擺脫默認的列邊距。
3. 我們需要使用變換旋轉將行在 X 軸上旋轉 45 度。 將透視屬性添加到父級（部分）後，行及其所有元素都具有我們正在尋找的 3D 效果。

打開行設置並更新以下內容：

天溝寬度：1
寬度：80%（桌面）、100%（平板電腦）、100%（手機）
Transform 旋轉 X 軸：45deg

列主要元素 CSS：

display: flex;
justify-content: center;

調整模糊樣式和間距

現在是時候稍微調整一下我們的簡介的內容和样式了。

由於我們希望對所有的宣傳語應用相同的自定義，再次使用多選來選擇所有的宣傳語並部署元素設置模式。

首先，刪除正文內容。

然後添加背景顏色：

背景顏色：rgba(20,241,217,0.16)

然後更新以下間距：

自定義邊距（桌面）：2vw 右
自定義保證金（平板電腦和手機）：0vw 正確

自定義填充：頂部 2%，底部 2%，左側 3%，右側 3%

接下來，添加邊框如下：

邊框寬度：2px
邊框顏色：rgba(20,241,217,0.66)

在這一點上，所有的宣傳語都具有適當的樣式。 我們仍然需要使用變換選項來單獨更改每個導語的比例和位置，這將增加導語的 3D 浮動效果。 但在我們這樣做之前，讓我們複製該行以創建我們的第二行簡介。

創建第二行簡介

要創建第二行宣傳語，只需複制您剛剛自定義的 5 行宣傳語即可。

為了創建碰撞效果，我們可以在相反的方向 (-45deg) 旋轉復制的行。

打開重複的行並更新以下內容：

Transform 旋轉 X 軸：-45deg

增加頂部和底部填充

在這一點上，前面的宣傳語可能會延伸到該部分之外。 要解決此問題，請將以下填充添加到您的部分：

自定義填充：頂部 15%，底部 15%

使用變換選項單獨調整每個模糊的大小和位置

在這一點上，您已設置好您希望每個廣告如何“漂浮”在 3D 空間中的創意。 為此，您可以使用變換選項將每個模糊的大小和位置一一準確定位到您想要的位置。 通過這樣做，您的簡介將在 3D 空間中具有不同的深度。

為方便起見，我將從 1 到 10 的宣傳片編號，從頂行最左側的宣傳片（宣傳片 #1）開始，到第二行中最右側的宣傳片（宣傳片 #10）結束。

模糊 #1

讓我們從頂行的第一個簡介開始。 打開模糊設置並更新以下內容：

變換比例（x 和 y 軸）：90%

模糊 #2

打開 Blurb #2 的設置並更新以下內容：

變換比例（x 和 y 軸）：80%
變換 平移 X 軸：-10%

模糊 #3

變換比例（x 和 y 軸）：80%
變換 X 軸平移：20%

模糊 #4

變換比例（x 和 y 軸）：85%
變換 平移 X 軸：-30%

模糊 #5

變換比例（x 和 y 軸）：60%

完成後，您的第一行應如下所示。

繼續為導語 6-10 自定義變換選項，從第二行最左側的導語 #6 開始。

模糊 #6

變換比例（x 和 y 軸）：60%
變換 平移 X 軸：-40%
變換 平移 Y 軸：-20%

模糊 #7

變換比例（x 和 y 軸）：90%
變換 X 軸平移：20%

模糊 #8

變換比例（x 和 y 軸）：70%
變換 平移 X 軸：-50%

模糊 #9

變換比例（x 和 y 軸）：80%
變換 平移 X 軸：-20%

模糊 #10

變換比例（x 和 y 軸）：70%
變換 平移 X 軸：-60%

現在讓我們看看第二行與 3D 空間中的第一行發生碰撞時的外觀。

為了完成設計，我們可以為該部分添加一個漂亮的 3D 空間背景圖像。 我正在使用我們在本教程中使用的視頻遊戲登陸頁面佈局附帶的頂部背景圖像。

最終設計

現在讓我們看看我們的 3D 浮動模塊的最終設計。

桌面

藥片

電話

由於 5 個宣傳語橫跨行延伸，因此要適應所有 5 個宣傳語而不將其延伸到視口之外是一個更大的挑戰。 要解決此問題，您可以簡單地在手機上的每一行中隱藏遠距離信息。 或者，您可以在手機上為每個宣傳語設置更小的尺寸。

最後的想法

我希望本教程能給你一些關於如何在 3D 空間中創建自己的浮動模塊的靈感。 真正需要的只是幾個步驟，使用透視和變換選項在 3D 中旋轉整行模塊。 之後，您可以放置​​每個模塊以將它們浮動到任何您想要的位置。

玩得開心探索。

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

乾杯!