如何使用 Divi 設計響應式五列“展示”佈局

為您的內容設計具有足夠空間的五列佈局可能具有挑戰性。 更不用說確保它在所有瀏覽器尺寸上都能很好地擴展的更大挑戰。 在本教程中，我將向您展示如何在不影響較小屏幕尺寸（如平板電腦和智能手機）的設計的情況下，最大限度地增加五列佈局內的內容所需的空間。 這種設計非常適合展示產品、服務和項目。 我什至會加入一些額外的設計功能以獲得一點靈感。

讓我們開始吧。

搶先看

使用的響應技術

使用自定義行寬和裝訂線寬度

使五列佈局響應的關鍵是首先為您的列提供足夠的空間來容納內容。 在本教程的設計中，我將給包含五列的行自定義寬度為 89%。 然後我將通過將裝訂線寬度設置為 1 來創建更多空間，這基本上消除了列之間的任何邊距。 對於此設計，重要的是使用 89% 的自定義寬度而不是將行設置為全寬，因為您可以將裝訂線寬度設置為 1 並且仍然在行的每一側保留邊距。 你會明白我的意思。

對間距和標題文本使用 vw 長度單位

在五列佈局上保持響應的另一個關鍵是使用 vw 長度單位分隔您的內容。 重要的是要在所有間距中使用 vw 保持一致。 這將確保在所有瀏覽器尺寸上保持一致縮放，而不會在您調整窗口寬度時使元素中斷或跳躍。 使用 vw 長度單位作為標題文本也是關鍵，這樣文本不會在較小的瀏覽器窗口中換行。 然而，對於標題文本，我們需要為平板電腦和智能手機分配一個 px 單位，以適應文本縮小太多。

第 1 部分：入門

本教程所需要的只是 Divi 主題。 我們將使用 Visual Builder 和建築公司主頁佈局。

因此，首先，創建一個新頁面，為頁面指定標題，然後部署 Visual Builder。 選擇“選擇預製佈局”選項。 在從庫加載彈出窗口中，選擇室內設計佈局包，然後將建築公司主頁佈局加載到您的頁面。

第 2 部分：創建標題部分

首先，複製包含三個簡介的第二部分。

這個設計需要兩個部分，因為頂部有兩個目的。 首先，它將保存我們下面部分的標題。 其次，它將允許我們使用部分分隔器添加獨特的設計。

讓我們繼續。

在原始部分（不是重複部分）中，刪除三個簡介並將行的列結構更改為一列。

然後向下滾動到佈局底部到最後一部分並複制左列中的文本模塊。

然後將其粘貼到您剛剛創建的一列行中並刪除 h2 標題下的所有文本內容，以便只留下“讓我們構建一些東西”。

第 3 部分：為五列佈局自定義模糊

現在是時候訪問我們在 3 列行中使用原始三個簡介複製的部分了。 首先，讓我們將行結構更改為五列佈局。

打開第一列中的blurb模塊的blurb設置，然後刪除用作圖標的圖像。

然後復制第一列中的模糊模塊。 我們將在此設計中每列使用兩個簡介，因為我們需要頂部簡介來保存我們的背景圖像。

在第一列中打開頂部簡介的設置並刪除內容框中的正文。

為頂部的 Blurb 模塊添加背景圖像和漸變

然後給相同的模糊背景圖像並添加漸變以覆蓋圖像，如下所示：

添加背景圖片
背景漸變左顏色：rgba(255,255,255,0)
背景漸變右顏色：rgba(18,18,18,0.65)
起始位置：50%
將漸變放置在背景圖像上方：是

漸變對於幫助我們的標題文本在背景圖像較淺的情況下變得更具可讀性是必要的。

使用大眾單位作為標題文本和間距

然後更新設計選項卡設置如下：

標題文字大小：2.7vw（桌面）、46px（平板電腦）、36px（智能手機）
標題字母間距：-3px
自定義邊距：1.5vw 左，1.5vw 右
自定義填充：35vw 頂部，2vw 底部，1vw 左，1vw 右

保存設置。

35vw 的自定義頂部填充創造了獨特的長垂直圖像設計。 標題文本被賦予 2.7vw 值，以便在不同瀏覽器寬度上保持文本縮放一致。 一旦我們稍後為行添加更多間距，其餘的間距將更有意義。

自定義底部宣傳語

然後打開第一列下方第二個模糊模塊的設置並刪除標題文本。 然後更新以下內容：

正文對齊方式：左
正文顏色：#666666
自定義填充：2vw 頂部，2vw 底部，2vw 左，2vw 右

現在我們在第一列中設計了兩個簡介。 複製它們並將它們粘貼到剩餘的每一列中。 您首先需要先刪除第 2 列和第 3 列中的原始模糊模塊。 現在你的設計應該是這樣的。

第 4 部分：自定義部分設置

現在讓我們更新我們的部分設置，在底部有一個白色背景和一個框陰影，這將為我們的行創建一個重疊的空間。

背景顏色：#ffffff
自定義填充：默認頂部，5vw 底部，默認左，默認右
盒子陰影：見截圖
框陰影垂直位置：-200px
框陰影模糊強度：0px
陰影顏色：#121212

第 5 部分：自定義行設置

現在讓我們回到我們的行並按如下方式更新設置：

背景圖片：#ffffff
行對齊：居中
自定義寬度：89%
天溝寬度：1
自定義保證金：-10vw
自定義填充：3vw 頂部，3vw 底部，1.5vw 左，1.5vw 右
盒子陰影：見截圖
框陰影模糊強度：80px

正如本教程前面提到的，自定義寬度和裝訂線寬度對於創建五列佈局所需的內容空間至關重要。

至此，設計的基本結構就完成了。 這是到目前為止的設計。

第 6 部分：添加最後的潤色

現在我們可以添加更多的設計調整來完成它。

錯綜複雜

首先，讓我們通過減少一些填充來錯開模糊背景圖像的高度。 打開第二行頂部模糊模塊的設置，更新padding如下：

自定義填充：28vw 頂部

對於第三列中的頂部簡介，將頂部填充更改為 30vw。

添加部分分隔線以將紋理添加到您的五列行

一種很酷的設計技術是在帶有我們的五列的部分正上方的部分中添加一個頂部分隔器。 分隔線背景將顯示在五列行的背景上，即使它與上面的部分重疊。 為此，請轉到包含標題“讓我們構建一些東西”的部分，並按如下所示為其添加分隔符：

由於分隔線的顏色與不透明度為 15% 的部分背景顏色相同，因此分隔線在頂部部分不可見，但在下方部分和重疊行中可見。 因為我們給這一行一個盒子陰影，這創造了一個獨特的設計。

我繼續更新了一些背景圖像，以便更好地了解不同圖像的設計效果。

這是最終的設計。

五列佈局的一大優點是您可以在平板電腦上獲得漂亮的兩列佈局。

這就是它在智能手機上的樣子。

最後的想法

我喜歡探索 Divi 創建響應式佈局的能力。 五列佈局的挑戰在於，除非您使用正確的技術來適當地分隔您的內容以在所有瀏覽器尺寸上很好地縮放，否則實際上沒有多少內容空間。 我希望這個設計有助於為您的下一個項目介紹使用五列佈局的一些可能性。

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

乾杯!