使用列輪廓來強調您的 Divi 設計網格
已發表: 2020-06-20Divi 的內置元素結構可以以傳統方式用於定義和設置不同部分、行、列和模塊的樣式。 但是，它們也可以創造性地用於增強頁面上的設計結構。 在本教程中，我們將向您展示如何使用列輪廓來強調您的 Divi 設計網格。 我們將指定一個絕對定位的行來創建漂亮的背景列輪廓並將其與我們部分中的其他行合併。 您也可以免費下載 JSON 文件！
讓我們開始吧。
預覽
在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。
桌面
移動的
免費下載列輪廓佈局
要了解免費的列輪廓佈局，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。
免費下載
加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。
您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！
讓我們開始重建吧！
添加新部分
溢出
首先向您正在處理的頁面添加一個新部分。 打開部分設置並將溢出設置為隱藏。 這將有助於確保沒有任何內容超出部分容器，特別是我們稍後將在本教程中添加的列輪廓。
- 水平溢出：隱藏
- 垂直溢出：隱藏
添加第 1 行
列結構
繼續使用以下列結構添加新行：
漿紗
在不添加任何模塊的情況下，打開行設置並修改大小設置如下：
- 寬度：100%
- 最大寬度：100%
- 行對齊：右
間距
接下來，我們將使用一些自定義大小設置將行推送到桌面頁面的右側。
- 上邊距：200px
- 左填充：47%（桌面）、6%（平板電腦）、10%（手機）
- 右填充：6%（平板電腦），10%（手機）
邊界
我們將通過添加頂部和底部邊框來完成常規行設置。
- 頂部和底部邊框寬度：4px
- 頂部和底部邊框顏色：#bdffed
第 1 列設置
間距
完成常規行設置後，打開第一列的設置並添加一些自定義間距值。
- 頂部填充：12%
- 底部填充：12%
- 左填充：3%
- 右填充：3%
第 2 列設置
間距
接下來打開第二列的設置，並為其使用以下間距設置：
- 頂部填充：12%
- 底部填充：12%
- 左填充：5%（桌面）、20%（平板電腦）、15%（手機）
- 右填充：5%（桌面）、20%（平板電腦）、15%（手機）
將文本模塊 #1 添加到第 1 列
添加 H2 內容
是時候添加模塊了，從第 1 列中包含 H2 內容的文本模塊開始。
H2 文本設置
轉到模塊的設計選項卡並相應地修改 H2 文本設置：
- 標題 2 字體：Source Code Pro
- 標題 2 字體粗細：粗體
- 標題 2 文字顏色：rgba(35,38,211,0.46)
- 標題 2 文字大小：4vw（桌面）、60px（平板電腦）、50px（手機）
- 標題 2 字母間距：5px
- 標題 2 文字陰影水平長度：0.05em
- 標題 2 文字陰影垂直長度：0.07em
- 標題 2 文本陰影顏色：#bdfed
垂直運動
我們也會添加一些垂直運動。
- 啟用垂直運動：是
- 起始偏移：2
- 中間偏移：0
- 結束偏移：-2
- 運動效果觸發器：元素中間
將文本模塊 #2 添加到第 2 列
添加內容
在上一個文本模塊的正下方添加另一個文本模塊，並插入一些您選擇的描述內容。
文字設置
轉到模塊的設計選項卡並相應地修改文本設置：
- 文本字體：Source Code Pro
- 文字顏色：rgba(35,38,211,0.76)
- 文字大小：15px
- 文本行高：2em
垂直運動
我們也將為此模塊使用一些垂直運動。
- 啟用垂直運動：是
- 起始偏移：2
- 中間偏移：0
- 結束偏移：-2
- 運動效果觸發器：元素中間
將按鈕模塊添加到第 1 列
添加副本
我們在第 1 列中需要的最後一個模塊是按鈕模塊。 添加一些您選擇的副本。
按鈕設置
轉到模塊的設計選項卡並按如下所示設置按鈕樣式：
- 為按鈕使用自定義樣式：是
- 按鈕文字顏色：#2326d3
- 按鈕邊框半徑：0px
- 按鈕字體：Source Code Pro
- 顯示按鈕圖標：是
- 按鈕圖標位置：左
- 僅在懸停按鈕時顯示圖標：否
間距
然後，添加一些自定義填充值。
- 頂部填充：20px
- 底部填充：20px
- 左填充：50px
- 右填充：50px
垂直運動
並通過添加一些垂直運動來完成模塊設置。
- 啟用垂直運動：是
- 起始偏移：2
- 中間偏移：0
- 結束偏移：-2
- 運動效果觸發器：元素中間
將圖像模塊添加到第 2 列
上傳 1:1 比例圖片
在第 2 列中，我們需要一個圖像模塊的唯一模塊。 上傳比例為 1:1 的圖片。
漿紗
移至模塊的設計選項卡並強製圖像全角。
- 強制全角：是
邊界
接下來我們將通過添加一些圓角將圖像變成圓形。
- 所有角落：50vw
盒子陰影
然後，我們將添加一個框陰影。
- 框陰影水平位置：30px
- 框陰影垂直位置：30px
- 陰影顏色：rgba(38,255,197,0.3)
垂直運動
我們將通過添加一些垂直運動來完成模塊設置。
- 啟用垂直運動：是
- 起始偏移：-2
- 中間偏移：0
- 結束偏移：2
- 運動效果觸發器：元素中間
克隆整行兩次
完成第一行後，您可以將其克隆兩次。
更改所有內容和圖像
確保更改所有重複的內容和圖像。
將底部邊距添加到最後一行
並打開最後一行的設置，轉到間距設置並添加一些底部邊距。
- 下邊距：200px
將新行（在部分頂部）專用於列輪廓
列結構
現在我們已經有了一般的行，是時候添加列輪廓了。 為此，我們將使用以下列結構在我們部分的頂部添加一個新行：
漿紗
打開行設置，轉到設計選項卡並更改大小設置如下：
- 使用自定義裝訂線寬度：是
- 天溝寬度：1
- 均衡柱高：是
- 寬度：90%
- 最大寬度：100%
間距
我們也將刪除所有默認的頂部和底部填充。
- 頂部填充：0px
- 底部填充：0px
位置
然後，轉到高級選項卡並重新定位整行。 通過將位置設置為絕對，我們將刪除頁面內行佔用的容器空間。
- 位置：絕對
- 位置：頂部中心
所有列主要元素 CSS 寬度
一旦常規行設置到位，就可以開始設置列樣式了。 首先，使用一行的主要元素內的一行 CSS 代碼為每一列添加一些自定義寬度。 這將有助於我們在較小的屏幕尺寸上保持列結構。
width: 20% !important;
第 1 列設置
間距
然後，打開第 1 列設置並修改不同屏幕尺寸的填充值。
- 頂部填充：150vh（台式機）、250vh（平板電腦和手機）
- 底部填充：150vh（台式機）、250vh（平板電腦和手機）
邊界
也添加左邊框。
- 左邊框寬度：5px
- 左邊框顏色：#bdfed
- 左邊框樣式：虛線
第 2 列設置
背景顏色
接下來，我們將打開第 2 列設置並添加背景顏色。
- 背景顏色：#b5fff1
邊界
我們也將使用右邊框。
- 右邊框寬度：4px
- 右邊框顏色：#bdfed
- 右邊框樣式：純色
第 3 列設置
邊界
在第三列中，我們將使用具有以下設置的右邊框：
- 右邊框寬度：4px
- 右邊框顏色：rgba(35,38,211,0.12)
- 右邊框樣式：虛線
第 4 列設置
邊界
然後，我們將打開第 4 列設置並相應地更改邊框設置：
- 右邊框寬度：4px
- 右邊框顏色：#bdfed
- 右邊框樣式：純色
第 5 列設置
邊界
我們還將通過向第 5 列添加右邊框來完成列設置。
- 右邊框寬度：4px
- 右邊框顏色：rgba(35,38,211,0.12)
- 右邊框樣式：虛線
將分頻器模塊添加到第 1 列和第 2 列
能見度
在本文開頭的移動端預覽中，您會發現與桌面端的結果略有不同。 我們只允許通過向這些特定列添加分隔模塊來顯示第 1 列和第 2 列輪廓。 確保在可見性設置中隱藏了兩個分隔線，就大功告成了！
- 顯示分隔線：否
預覽
現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。
桌面
移動的
最後的想法
在這篇文章中，我們向您展示瞭如何利用 Divi 的內置欄發揮創意。 更具體地說，我們已經向您展示瞭如何使用列輪廓來強調您的 Divi 設計網格。 這種方法有助於創建獨特的設計，而無需額外的圖像編輯軟件。 您也可以免費下載 JSON 文件！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。
如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。