如何利用 Divi 的 6 列行和視口單位發揮創意

Divi 的各種柱結構使您基本上可以創建您想到的任何設計。 儘管使用原始形式的列結構是最直接的做法，但您也可以通過將 6 列行中的設計元素與視口單元相結合來更進一步。

例如，您可以創建的東西之一是拼貼畫。 您根本不必使用任何圖像編輯軟件！ 最重要的是，您還可以允許每個圖像在單獨的燈箱中打開。 在這篇文章中，我們將向您展示如何僅使用 Divi 的內置選項來完成上述所有操作。

讓我們開始吧！

預覽

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

方法

• 我們正在刪除部分、行和列之間的所有裝訂線寬度，以便我們可以手動為每個模塊添加自定義邊距和填充（使用視口單位）
• 視口單位確保設計元素的定位在所有桌面屏幕尺寸中保持相同
• 我們將單獨調整每個設計元素的間距設置以匹配整體拼貼設計
• 由於 Divi 中的響應選項，我們可以確保上述設置不適用於平板電腦和手機

讓我們開始創造

後端預覽

這是從後端角度來看的最終結果：

添加新部分

您需要做的第一件事是創建一個新頁面或打開一個現有頁面並向其中添加一個常規部分。

添加新行

列結構

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

漿紗

在不添加任何模塊的情況下，打開行設置並更改大小設置。 這是本教程中的重要步驟。 通過刪除部分、行和模塊之間的所有默認邊距和填充值，我們能夠使用視口單位手動為每個設計元素添加間距。

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

間距

也向該行添加一些自定義的左右填充。

• 左填充：6.5vw
• 右填充：6.5vw

將標題文本模塊添加到第 6 列

添加內容

是時候開始添加模塊了！ 我們將首先向第 6 列添加標題文本模塊。包括一些標題 2 副本。

標題文字設置

然後，轉到設計選項卡並更改模塊的標題文本設置。

• 標題 2 字體：馬德望
• 標題 2 字體粗細：粗體
• 標題 2 文字大小：4.2vw（桌面）、10vw（平板電腦）、8vw（手機）
• 標題 2 字母間距：-1px

間距

接下來添加一些自定義間距值，使該行與該行的第 6 列和第 5 列重疊。

• 最高利潤率：10vw
• 左邊距：-8vw（桌面），0vw（平板電腦和手機）
• 右邊距：-50vw（平板電腦和手機）

將描述文本模塊添加到第 6 列

添加內容

在第 6 列中我們需要的下一個模塊是描述文本模塊。 添加一些選擇的內容。

間距

然後，轉到間距設置並將此模塊也推向左側。

• 最高利潤率：2vw
• 左邊距：-8vw（桌面），0vw（平板電腦和手機）
• 右邊距：-50vw（平板電腦），-3vw（手機）

將按鈕模塊添加到第 6 列

添加副本

第 6 列中需要的下一個也是最後一個模塊是按鈕模塊。 添加一些選擇副本。

按鈕設置

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

• 為按鈕使用自定義樣式：是
• 按鈕文字顏色：#ffffff
• 按鈕邊框寬度：1px
• 按鈕邊框顏色：#000000
• 按鈕邊框半徑：0px
• 按鈕字母間距：-2px

間距

同樣，我們需要通過在間距設置中使用自定義邊距值使該模塊與第 5 列和第 6 列重疊。

• 上邊距：2vw（桌面）、5vw（平板電腦）、10vw（手機）
• 左邊距：-8vw（桌面），0vw（平板電腦和手機）
• 右邊距：-50vw（平板電腦和手機）
• 左填充：30px
• 右填充：30px

將圖像模塊 #1 添加到第 1 列

圖片尺寸

是時候開始添加所有不同的圖像模塊了！ 如果您只使用寬度為880 像素、高度為 1320 的圖像，我們正在重新創建的示例是 100% 響應的。 因此，如果您希望從頭開始創建完全相同的示例，則應該使用具有該特定維度集的圖像。 但是，如果您希望對任何類型的圖像尺寸集進行此操作，則必須手動調整每個圖像模塊的視口單位以適應整體設計。

上傳圖片

前三列中的每一列都將計算兩個圖像模塊。 將第一個圖像模塊添加到第 1 列。

間距

然後，轉到間距設置並使用視口單位增加圖像的大小。

• 最高邊距：0.5vw（僅限平板電腦和手機）
• 下邊距：0.5vw（僅限平板電腦和手機）
• 左邊距：-5vw（桌面），0.5vw（平板電腦和手機）
• 右邊距：-2vw（桌面），0.5vw（平板電腦和手機）

將圖像模塊 #2 添加到第 1 列

上傳圖片

也上傳第 1 列中的第二個圖像模塊。

間距

並更改此模塊的間距設置。

• 上邊距：0.4vw（台式機），0.5vw（平板電腦和手機）
• 下邊距：0.5vw（僅限平板電腦和手機）
• 左邊距：-8.1vw（桌面），0.5vw（平板電腦和手機）
• 右邊距：3.7vw（台式機），0.5vw（平板電腦和手機）
• 左填充：3vw（桌面），0vw（平板電腦和手機）
• 右填充：3vw（桌面），0vw（平板電腦和手機）

將圖像模塊 #3 添加到第 2 列

上傳圖片

進入第二列！ 添加新的圖像模塊並上傳圖像。

間距

繼續在間距設置中使用自定義邊距和填充值來減小圖像的大小。

• 最高邊距：0.5vw（僅限平板電腦和手機）
• 下邊距：0.5vw（僅限平板電腦和手機）
• 左邊距：-0.5vw（台式機），0.5vw（平板電腦和手機）
• 右邊距：0.5vw（僅限平板電腦和手機）
• 左填充：3vw（桌面），0vw（平板電腦和手機）
• 右填充：3vw（桌面），0vw（平板電腦和手機）

將圖像模塊 #4 添加到第 2 列

上傳圖片

也將第二個圖像模塊添加到第 2 列。

間距

並在此處更改間距設置。

• 最高利潤率：0.5vw
• 下邊距：0.5vw（僅限平板電腦和手機）
• 左邊距：-0.5vw（台式機），0.5vw（平板電腦和手機）
• 右邊距：0.5vw（僅限平板電腦和手機）
• 左填充：3vw（桌面），0vw（平板電腦和手機）
• 右填充：3vw（桌面），0vw（平板電腦和手機）

將圖像模塊 #5 添加到第 3 列

上傳圖片

轉到下一列和最後一列。 添加第一個圖像模塊。

間距

接下來更改圖像模塊的間距設置。 這些值將有助於增加圖像的大小，您可以在下面的打印屏幕中看到。

• 最高邊距：0.5vw（僅限平板電腦和手機）
• 下邊距：0.5vw（僅限平板電腦和手機）
• 左邊距：-2.5vw（台式機），0.5vw（平板電腦和手機）
• 右邊距：-17.5vw（台式機），0.5vw（平板電腦和手機）

將圖像模塊 #6 添加到第 3 列

上傳圖片

在第 3 列中添加下一個也是最後一個圖像模塊。

間距

並通過添加自定義邊距值來更改其整個位置。 出於響應目的，我們將此模塊添加到第 3 列而不是第 2 列。

• 上邊距：-26.7vw（台式機），0.5vw（平板電腦和手機）
• 下邊距：0.5vw（僅限平板電腦和手機）
• 左邊距：-20.5vw（台式機），0.5vw（平板電腦和手機）
• 右邊距：17.3vw（桌面），0.5vw（平板電腦和手機）

為圖像模塊 #1 啟用燈箱

準備好所有圖像後，您可以繼續並在第一個圖像模塊的設置中啟用燈箱選項。

• 在燈箱中打開：是

複製燈箱選項並應用於部分中的所有圖像

為第一個圖像模塊啟用燈箱選項後，您可以復制此選項並將其粘貼到該部分中的所有其他圖像模塊。

將邊界半徑添加到圖像模塊 #1

也為第一個圖像模塊添加一些圓角。

將邊框半徑擴展到截面中的所有圖像

並將這些圓角延伸到該部分中的所有圖像模塊以節省時間。

預覽

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

最後的想法

Divi 新的 6 列行為您提供了無窮無盡的機會。 在這篇文章中，我們向您展示瞭如何使用 6 列行和視口單位創建令人驚嘆的獨特拼貼畫。 如果您有任何問題或建議，請務必在下方評論區留言！