如何使用 Divi 的專業版塊設計獨特的多列英雄版塊
已發表: 2019-07-04在所有設計趨勢中，您設計英雄部分的方式仍然非常重要。 使用 Divi，您可以採用不同的方法並創建一個突出的英雄部分，並鼓勵人們延長他們在您網站上的停留時間。 為了幫助您在即將到來的 Divi 項目中獲得靈感，我們將向您展示如何僅使用 Divi 的內置選項設計獨特的多列英雄部分。 多欄英雄部分不僅看起來很棒，而且還可以幫助您在英雄部分戰略性地放置更多內容，而不會讓訪問者感到不知所措。
讓我們開始吧！
預覽
在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。
免費下載多列英雄部分佈局
要了解多列英雄部分佈局，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。
免費下載
加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。
您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！
讓我們開始重建吧！
添加新的專業部分
列結構
為了創建一個無縫的多列英雄部分，我們將使用您可以在 Visual Builder 中訪問的 Divi 專業部分之一。 在設計多列英雄部分時，選擇專業部分可以讓您更好地掌握所需的網格結構。 對於此特定示例，我們選擇以下列結構：
背景顏色
打開部分設置並添加白色背景色。
- 背景顏色：#ffffff
漿紗
我們通過更改大小設置來確保部分列之間沒有間隙。
- 均衡柱高：是
- 使用自定義裝訂線寬度：是
- 天溝寬度：1
- 寬度：100%
- 最大寬度：100%
- 內寬：100%
- 內部最大寬度：100%
間距
我們還將刪除行和列的所有默認頂部和底部填充。
- 頂部填充：0px
- 底部填充：0px
- 第 1 列頂部填充：0px
- 第 1 列底部填充：0px
- 第 2 列頂部填充：0px
- 第 2 列底部填充：0px
- 第 3 列頂部填充：0px
- 第 3 列底部填充：0px
添加第 1 行
列結構
繼續使用以下列結構向第一部分列添加新行：
間距
在不添加任何模塊的情況下，打開行設置並刪除所有默認的頂部和底部填充。
- 頂部填充：0px
- 底部填充：0px
將文本模塊添加到列
添加段落和 H1 內容
是時候開始添加模塊了！ 添加一個新的文本模塊，其中包含您選擇的一些段落和 H1 內容。
文字設置
移至設計選項卡並更改文本設置。
- 文字字體：Open Sans
- 文字大小：0.9vw（桌面）、1.6vw（平板電腦）、2.2vw（手機）
H1 文本設置
還要修改 H1 文本設置。
- 標題字體：Open Sans
- 標題字體粗細：半粗體
- 標題字體樣式：大寫
- 標題文字顏色：#000000
- 標題文字大小：4vw
- 標題線高度：1.1em
間距
也添加一些自定義填充值。
- 頂部填充：10.8vw
- 左填充：4vw
- 右填充：4vw
添加第 2 行
列結構
第一部分列中我們需要的第二行使用以下列結構：
間距
在不添加任何模塊的情況下，打開行設置並修改填充值。
- 頂部填充：3vw
- 左填充：4vw
- 右填充：4vw
將文本模塊 #1 添加到第 1 列
添加H3內容
完成行設置後，您可以繼續向第一列添加新的文本模塊。 輸入您選擇的一些 H3 內容。
H3 文本設置
轉到設計選項卡並相應地更改 H3 文本設置：
- 標題 3 字體：Open Sans
- 標題 3 字體粗細：半粗體
- 標題 3 字體樣式：大寫
- 標題 3 文本顏色：#000000
- 標題 3 文字大小：1.5vw（桌面）、2vw（平板電腦）、2.5vw（手機）
間距
繼續在手機上添加一些頂部邊距。
- 最高邊距：2vw（僅限手機）
將分頻器模塊添加到第 1 列
能見度
第一列中我們需要的第二個模塊是分頻器模塊。 確保啟用了“顯示分隔線”選項。
- 顯示分隔線：是
線
接下來更改線條顏色。
- 線條顏色：#000000
間距
添加一些自定義邊距值以在分隔線周圍創建空間。
- 最高利潤率：2vw
- 底邊距：2vw
- 右邊距：2vw
將文本模塊 #2 添加到第 1 列
添加內容
本專欄中我們需要的下一個也是最後一個模塊是另一個文本模塊。 輸入您選擇的一些段落內容。
文字設置
轉到設計選項卡並相應地更改文本設置：
- 文字字體：Open Sans
- 文字大小：0.6vw（桌面）、1.1vw（平板電腦）、2vw（手機）
- 文本行高：2em
間距
添加一些底部和右側的填充。
- 下邊距：5vw（僅限手機）
- 右邊距：2vw
克隆第 1 列中的所有模塊兩次並在剩餘列中放置重複項
完成第 1 列中的所有模塊後，您可以繼續克隆每個模塊兩次。 將重複項放在該行的剩餘兩列中。
更改內容
確保您更改了文本模塊中的所有內容。
添加第 3 行
列結構
我們需要在第一部分列中的下一行和最後一行使用以下列結構：
間距
打開行設置並修改間距值。
- 最高利潤率：2vw
- 頂部填充：0px
- 底部填充：0px
將文本模塊添加到第 1 列
添加內容
繼續將文本模塊添加到第一列，並使用您選擇的一些 CTA 副本。
添加鏈接
還要添加指向整個模塊的鏈接。
背景顏色
我們還更改了文本模塊的背景顏色。
- 背景顏色：#000000
文字設置
轉到設計選項卡並相應地更改文本設置：
- 文字字體：Open Sans
- 文字字體粗細：超粗
- 文本字體樣式：大寫
- 文本對齊：居中
- 文字顏色：#ffffff
- 文字大小：1vw（桌面）、1.7vw（平板電腦）、2.5vw（手機）
間距
並使用一些自定義邊距和填充值在模塊周圍創建空間。
- 上邊距：4vw（桌面）、11vw（平板電腦）、0vw（手機）
- 頂部填充：4vw
- 底部填充：4vw
克隆文本模塊並在第 2 列中放置重複項
完成第 1 列中的文本模塊後，您可以克隆它並將副本放置在第二列中。
更改內容
確保更改內容和鏈接。
更改背景顏色
以及背景顏色。
- 背景顏色：#e5e5e5
更改文本顏色
然後，轉到設計選項卡並更改文本顏色。
- 文字顏色：#000000
更改間距
最後但並非最不重要的一點是，確保間距設置僅包含以下值：
- 頂部填充：4vw
- 底部填充：4vw
將圖像模塊添加到第 2 欄
上傳圖片
進入下一節專欄！ 在這裡，我們需要的第一個模塊是圖像模塊。 上傳您選擇的圖片或使用您可以在本文開頭共享的壓縮文件夾中找到的圖片。
漿紗
轉到大小設置並確保啟用“強制全寬”選項。 這將確保圖像在所有屏幕尺寸上都保持其大小。
- 強制全角：是
過濾器
接下來修改過濾器設置。
- 飽和度：0%
- 亮度：50%
將文本模塊添加到第 2 節
添加段落和 H3 內容
本專欄中我們需要的第二個模塊是文本模塊。 輸入您選擇的一些段落和 H3 內容。
背景顏色
為模塊添加背景顏色。
- 背景顏色：#000000
文字設置
轉到設計選項卡並相應地更改文本設置：
- 文字字體：Open Sans
- 文字顏色：#ffffff
- 文字大小：0.9vw（桌面）、1.6vw（平板電腦）、2.2vw（手機）
H3 文本設置
還要修改 H3 文本設置。
- 標題 3 字體：Open Sans
- 標題 3 字體粗細：半粗體
- 標題 3 字體樣式：大寫
- 標題 3 文本顏色：#ffffff
- 標題 3 文字大小：1.5vw（桌面）、2.5vw（平板電腦）、3vw（手機）
間距
並在間距設置中添加一些自定義填充值。
- 頂部填充：3vw
- 底部填充：3vw
- 左填充：2vw
- 右填充：2vw
克隆兩個模塊並在第 3 列中放置重複項（顛倒順序）
完成這兩個模塊後，您可以繼續克隆它們。 將重複項以相反的順序放置在剩餘的部分列中。
更改文本模塊
更改背景顏色
在第三部分列中打開重複的文本模塊並更改背景顏色。
- 背景顏色：#ffffff
更改文本顏色
接下來更改文本顏色。
- 文字顏色：#000000
更改 H3 文本顏色
隨著 H3 文本顏色。
- 標題 3 文本顏色：#000000
更改圖像模塊
更改圖像
接下來將不同的圖像上傳到重複的圖像模塊。
更改過濾器
並更改過濾器設置。
- 飽和度：0%
- 亮度：147%
將分隔模塊添加到第 2 欄
位置
我們還添加了一些轉換後的分隔線來為我們的設計添加細節。 將第一個分頻器模塊放在此處：
能見度
確保啟用了“顯示分隔線”選項。
- 顯示分隔線：是
線
接下來添加線條顏色。
- 線條顏色：#ffffff
變換旋轉
並通過修改左變換旋轉值將水平分隔線轉換為垂直分隔線。
- 左：270度
轉換 翻譯
使用變換平移設置中的視口寬度單位重新定位分隔線模塊。
- 右：-19vw（桌面）
- 底部：-11vw（台式機），-24vw（平板電腦）
能見度
並在手機上隱藏整個模塊。
將分隔模塊添加到第 3 欄
位置
需要在此處添加下一個也是最後一個 Divider 模塊：
能見度
確保啟用了“顯示分隔線”選項。
- 顯示分隔線：是
線
移至設計選項卡並更改線條顏色。
- 線條顏色：#000000
變換旋轉
接下來將水平分隔線轉換為垂直分隔線。
- 左：270度
轉換 翻譯
並使用變換轉換設置重新定位分隔線。
- 右：2vw
- 底部：-11vw（台式機），-24vw（平板電腦）
能見度
為了確保分隔線出現在其下方圖像模塊的頂部，我們將增加可見性設置中的 Z 索引。 我們還將在手機上隱藏整個模塊。
- Z指數：2
預覽
現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。
最後的想法
在這篇文章中，我們向您展示瞭如何僅使用 Divi 的內置選項創建漂亮且獨特的多列英雄部分。 這是一項很棒的技術，可用於不同類型的網站。 如果您有任何問題或建議，請務必在下方評論區留言！
如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。