使用專為網格佈局設計的背景升級您的 Divi 博客頁面

已發表: 2018-08-11

為您的博客創建網格佈局是組織帖子的好方法。 Divi 使用博客模塊使這變得非常容易。只需幾秒鐘，您就可以將一個功能正常的博客網格佈局部署到您的頁面。您甚至可以利用許多設計設置以多種方式自定義博客網格的外觀。但是今天，我將事情提升到另一個層次。

在本教程中，我將向您展示如何創建多個背景圖層，以使用漂亮且對稱的設計來構建三欄博客網格。希望您可以使用這些設計技術來創建一個令人印象深刻的博客頁面。

讓我們開始吧。

訂閱我們的 YouTube 頻道

網格佈局設計的潛行高峰

這是設計的先睹為快。

博客網格佈局

入門

對於本教程，您只需要 Divi。安裝並激活 Divi 主題後，創建一個新頁面並為頁面命名。然後部署 Visual Builder。選擇“選擇預製佈局”，然後將治療師博客頁面佈局上傳到您的頁面並發布。

博客網格佈局

確保您至少有 6 篇包含內容和特色圖片的博客文章。如果不這樣做，博客文章將不會顯示在頁面上。

現在您已準備好開始編輯。

將第一個背景圖層添加到該部分

自定義設計將添加到包含博客模塊的佈局的第二部分。要創建我們的第一個背景層，我們將設置部分設置的樣式如下：

背景顏色：#5873dd
自定義填充（桌面）：4vw 頂部，4vw 底部，7vw 左
自定義填充（平板電腦）：0vw 左

博客網格佈局

自定義 7vw 左填充基本上偏移了部分（行）的內容以獲得獨特的外觀。如果你想要一切都很好並且以你的設計為中心，你可以把它排除在外。

將第二個和第三個背景圖層添加到行

將通過向整行添加背景顏色然後向行內的列添加背景漸變來創建第二和第三個背景層。

打開行設置並更新以下內容：

背景顏色：rgba(255,255,255,0.3)
第 1 列背景左顏色：rgba(255,255,255,0.0)
第 1 列背景右側顏色：rgba(255,255,255,0.3)
柱梯度方向：90度
列起始位置：列起始位置：33.3%
列結束位置：0%

博客網格佈局

請注意，我使用了不透明度為 30% 的白色，以創建一致程度的白色疊加顏色，使藍色部分背景能夠顯示出來。當每種顏色重疊時，用戶會看到藍色部分背景的顏色變淺了 30%。這樣，如果您想更改佈局的配色方案，您只需更改部分背景顏色即可。

將列漸變開始位置設置為 33.3% 可確保漸變將在我的博客網格的第一列和第二列之間分開。但這最初看起來並不正確，因為我們仍然需要為我們的行提供 100% 的自定義寬度等。

自定義寬度：100%
天溝寬度：4
自定義填充：頂部 4%，底部 4%

自定義填充垂直暴露圖層以添加到整體設計中。

保存設置。

將第四個背景層添加到我們的博客模塊

這就是一切就緒的地方。第四層也是最後一層將是添加到我們博客模塊的背景漸變。然後添加精確的間距，博客模塊將與我們的背景層完美對齊。我還將為博客卡片添加一些樣式調整以添加一些最後的潤色。

轉到博客模塊設置並更新以下內容：

網格瓷磚背景顏色：rgba(255,255,255,0.7)

要添加背景漸變，您可以轉到行設置並複制第 1 列背景漸變，然後返回博客設置並使用右鍵單擊選項將其粘貼。

然後更新以下內容：

起始位置：66.6%

博客網格佈局

自定義保證金：頂部 4%，底部 4%
自定義填充：頂部 4%，底部 4%，左側 4%，右側 4%

博客網格佈局

正如您所看到的，4% 的長度值始終用於為我們的設計提供相等的間距。這 4% 的價值比我們看到的還要多。如果您還記得，我們將我們的行設置為 4 的自定義間距寬度。在 Divi 中，如果您將具有網格佈局的博客模塊添加到具有 4 間距寬度的行，您的博客網格列將水平分隔 8%保證金。因此，將 4% 的左右填充添加到模塊將創建我們需要的確切間距。

至此，我們完成了背景設計。看看我們到目前為止有什麼。

博客網格佈局