使用 Divi 的變換選項創建對角線設計結構（免費下載！）

我們一直在尋找方法來擴展您使用 Divi 的設計可能性。 自從轉換選項更新出來後，許多新技術已經成為可能，而無需自定義編碼知識。

在這篇文章中，我們將向您展示如何創建令人驚嘆的對角線設計結構。 我們將重新創建的設計非常適合英雄部分，並與您要設置的任何類型的網站相匹配。 在教程結束時，您還可以免費下載 JSON 文件！

讓我們開始吧！

預覽

在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。

讓我們開始重建吧！

添加新部分

漸變背景

首先創建一個新頁面或打開一個現有頁面，然後向其中添加一個常規部分。 打開部分設置並使用以下設置為其添加漸變背景：

• 顏色 1：#ffd633
• 顏色 2：#efefef
• 梯度方向：217deg
• 起始位置：45%
• 結束位置：45%

間距

然後，轉到設計選項卡並添加一些自定義的頂部和底部填充。

• 頂部填充：4vw
• 底部填充：12vw

溢出

我們需要確保轉換選項不超過節容器。 為此，我們將向該部分的主要元素添加一行 CSS 代碼。

overflow: hidden;

添加第 1 行

列結構

繼續使用以下列結構添加第一行：

漿紗

還沒有添加任何模塊，打開行設置並允許行佔據屏幕的整個寬度。 在本文的下一步中，我們將通過使用視口單元添加一些自定義的左右填充值來替換剛剛刪除的空間。 這將確保設計在所有屏幕尺寸上保持響應。

• 使這一行全寬：是
• 使用自定義裝訂線寬度：是
• 天溝寬度：1

間距

繼續並在接下來的間距設置中添加一些自定義填充值。

• 頂部填充：0px
• 底部填充：0px
• 左填充：25vw（桌面）、16vw（平板電腦）、7vw（手機）
• 右填充：25vw（台式機和平板電腦），27vw（手機）

展示

我們還通過向行的主要元素添加一行 CSS 代碼來確保列在較小的屏幕尺寸上彼此相鄰。

display: flex;

將 Blurb 模塊添加到第 1 列

添加標題

是時候開始添加模塊了！ 將 Blurb 模塊添加到第 1 列並輸入您選擇的標題。

上傳插圖

繼續上傳您選擇的插圖。 我們將在本教程中使用的那些是 App Developer Layout Pack 的一部分。 您可以通過轉到帖子並在最後下載它們來免費下載插圖。

背景

然後，為 Blurb 模塊添加一個完全白色的背景色。

• 背景顏色：#ffffff

標題文字設置

轉到設計選項卡並相應地修改標題文本設置：

• 標題字體: Poppins
• 標題字體粗細：半粗體
• 標題字體樣式：大寫
• 標題文本對齊：居中
• 標題文字大小：0.5vw（桌面）、1.6vw（平板電腦）、2.4vw（手機）
• 標題字母間距：1px
• 標題行高度：1.6em

間距

接下來修改間距設置。

• 頂部填充：1.3vw（桌面）、4vw（平板電腦）、6vw（手機）
• 底部填充：1.3vw（台式機）、4vw（平板電腦）、6vw（手機）
• 左填充：1vw（桌面），7vw（平板電腦和手機）
• 右填充：1vw（桌面），7vw（平板電腦和手機）

邊界

繼續在 Blurb 模塊的左上角和右上角添加“1vw”。

盒子陰影

最後但並非最不重要的一點是，使用以下設置向模塊添加框陰影：

• 框陰影垂直位置：10px
• 框陰影模糊強度：60px
• 陰影顏色：rgba(39,39,52,0.37)

克隆 Blurb 模塊兩次並在剩餘列中放置重複項

自定義 Blurb 模塊後，您可以繼續克隆它兩次。 將重複項放在該行的剩餘兩列中。

更改重複 #1

更改副本和插圖

更改第一個副本的副本和插圖。

更改間距

隨著間距設置。

• 最高利潤率：-3vw
• 頂部填充：2.7vw（台式機）、8vw（平板電腦）、11vw（手機）
• 底部填充：2.7vw（台式機）、8vw（平板電腦）、11vw（手機）

更改重複 #2

更改副本和插圖

還要修改第二個副本的副本和插圖。

添加第 2 行

列結構

進入下一行！ 使用以下列結構：

漸變背景

尚未添加任何模塊，打開行設置並為其添加漸變背景。

• 顏色 1：#fff20a
• 顏色 2：#ffb200
• 漸變方向：165度

漿紗

然後，轉到設計選項卡並啟用“使此行全寬”選項。

• 使這一行全寬：是

盒子陰影

最後但並非最不重要的一點是，向該行添加一個框陰影。

• 框陰影垂直位置：0px
• 框陰影模糊強度：100px
• 陰影顏色：rgba(0,0,0,0.39)

添加分頻器模塊

能見度

我們僅將這一行用於設計目的，而不是展示任何模塊。 但是為了確保我們確切地知道行的外觀，我們需要向它添加一個分隔模塊。 我們不想顯示模塊，因此請確保禁用“顯示分隔符”選項。

• 顯示分隔線：否

將轉換選項應用於行

第 1 行

轉換 翻譯

現在我們已經完成了前兩行，我們將把它們轉換成我們想要創建的對角線設計結構。 首先打開第一行的設置並修改轉換轉換值。

• 底部：30vw
• 右：6vw

變換旋轉

然後，更改左變換旋轉值。

• 左：37度

第 2 行

變換比例

繼續打開第二行的設置並修改變換比例值。

• 底部：133%（桌面）、171%（平板電腦）、176%（手機）
• 右：133%（桌面）、171%（平板）、176%（手機）

轉換 翻譯

隨著變換翻譯值。

• 底部：12vw（桌面）、1vw（平板電腦）、3vw（手機）
• 右：-2vw（桌面）、-6vw（平板電腦）、-4vw（手機）

變換旋轉

並在變換旋轉設置中旋轉行。

• 左：37度

添加第 3 行

列結構

進入下一行和最後一行！ 您可以使用此行及其列來共享您想要的任何類型的信息。 要重新創建您在本文預覽中看到的確切設計，請選擇以下列結構：

漿紗

還沒有添加任何模塊，打開行設置並允許行佔據屏幕的整個寬度。

• 使這一行全寬：是
• 使用自定義裝訂線寬度：是
• 天溝寬度：1

將文本模塊 #1 添加到第 1 列

添加H1內容

是時候開始添加模塊了！ 我們將從標題文本模塊開始。 輸入您選擇的一些 H1 內容。

H1 文本設置

然後，轉到設計選項卡並修改 H1 文本設置。

• 標題字體： Poppins
• 標題文字大小：3vw（桌面）、5vw（平板電腦）、6vw（手機）
• 標題字母間距：-2px

間距

接下來添加一些自定義間距值。

• 上邊距：-6vw（台式機和平板電腦），11vw（手機）
• 左邊距：10vw

將文本模塊 #2 添加到第 1 列

添加內容

我們需要的第二個模塊是另一個文本模塊。 添加一些您選擇的內容。

文字設置

然後，轉到設計選項卡並修改文本設置。

• 文字字體：Open Sans
• 文字大小：0.8vw（桌面）、1.5vw（平板電腦）、2.2vw（手機）
• 文本行高：2.6em

間距

也更改間距值。

• 上邊距：3vw（電話），5vw（電話）
• 左邊距：10vw
• 右邊距：28vw（平板電腦），20vw（手機）

將按鈕模塊添加到第 1 列

添加副本

我們需要的下一個也是最後一個模塊是按鈕模塊。 添加一些您選擇的副本。

按鈕設置

然後，轉到設計選項卡並修改按鈕設置。

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：0.9vw（桌面）、2.5vw（平板電腦）、3.5vw（手機）
• 按鈕文字顏色：#000000
• 按鈕邊框寬度：1px
• 按鈕邊框顏色：#000000
• 按鈕邊框半徑：1px
• 按鈕字體： Poppins
• 字體粗細：輕

間距

最後但並非最不重要的一點是，使用一些自定義間距值來塑造您的模塊，您就完成了！

• 最高邊距：2vw（台式機），5vw（平板電腦和手機）
• 左邊距：10vw
• 頂部填充：1vw
• 底部填充：1vw
• 左填充：3vw
• 右填充：3vw

免費下載對角線設計部分

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

下載文件

免費下載

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

下載

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

預覽

現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。

最後的想法

在這篇文章中，我們向您展示瞭如何僅使用 Divi 的內置選項創建令人驚嘆的對角線設計結構。 我們希望本教程可以幫助您熟悉新的 Divi 變換選項。 如果您有任何問題或建議，請務必在下方評論區留言！