使用 Divi 下載免費的兩側邊欄博客帖子模板

儘管側邊欄已經存在很長時間，但它們仍然經常在網絡上使用。 它們有助於顯示與帖子相關的不同元素，例如推薦帖子和電子郵件選擇表單，而不會忽略主要焦點，即實際的帖子內容。 現在，有了 Divi 的 Theme Builder，有很多方法可以創建您的博客文章模板。 在本教程中，我們將向您展示如何向帖子模板添加兩側邊欄。 您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

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

桌面

移動的

訂閱我們的 YouTube 頻道

免費下載博客帖子模板

要使用免費的博客文章模板，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

下載

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

1.轉到Divi Theme Builder並添加新模板

轉到 Divi 主題生成器並添加新模板

首先轉到您的 Divi Theme Builder。 在那裡，添加一個新模板。

在所有帖子上使用模板

我們在所有帖子上都使用這個新模板。

• 用於：所有帖子

開始構建模板主體

那麼，開始構建模板主體。

2. 開始構建博客帖子正文

添加新部分

背景顏色

進入 Divi Theme Builder 後，您會注意到一個部分。 打開該部分並更改背景顏色。

• 背景顏色：#f4f4f4

間距

還可以在不同的屏幕尺寸上修改部分的間距值。

• 頂部填充：50 像素（桌面）、20 像素（平板電腦）、10 像素（手機）
• 底部填充：50 像素（桌面）、20 像素（平板電腦）、10 像素（手機）

添加新行

列結構

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

漿紗

在不添加任何模塊的情況下，打開行設置並相應地修改大小設置：

• 使用自定義裝訂線寬度：是
• 天溝寬度：2
• 寬度：100%
• 最大寬度：95%

間距

接下來刪除所有默認的頂部和底部填充。

• 頂部填充：0px
• 底部填充：0px

第 2 欄

背景顏色

然後，打開第 2 列設置並將背景顏色更改為白色。

• 背景顏色：#ffffff

盒子陰影

也向列添加框陰影。

• 框陰影模糊強度：80px
• 框陰影傳播強度：-21px
• 陰影顏色：rgba(0,0,0,0.08)

將圖像模塊添加到第 2 列

動態內容

是時候開始添加模塊了！ 在第二列中，我們將放置與博客文章本身相關的所有模塊，從圖像模塊開始。 使用特色圖片動態內容。

• 圖片：精選圖片

漿紗

然後，轉到模塊的設計選項卡並在圖像模塊上強制全角。

• 強制全角：是

將帖子標題模塊添加到第 2 列

元素

進入第二個模塊，即帖子標題模塊。 在元素設置中禁用特色圖像。

• 顯示特色圖片：否

標題文字設置

轉到模塊的設計選項卡並相應地更改標題文本設置：

• 標題字體：氧氣
• 標題文字大小：2vw（桌面）、4vw（平板電腦）、6vw（手機）
• 標題行高度：1.2em

元文本設置

接下來對元文本設置進行一些更改。

• 元字體：Open Sans
• 元文本顏色：#ffc023
• 元文本大小：1vw（桌面）、2vw（平板電腦）、3vw（手機）

間距

也修改間距值。

• 上邊距：100px
• 左邊距：4vw
• 右邊距：4vw

標題 CSS

並通過在高級選項卡中向標題的 CSS 元素添加一些底部邊距來完成模塊的設置。

margin-bottom: 20px;

將帖子內容模塊添加到第 2 列

文字設置

進入下一個模塊，即包含所有動態博客文章內容的文章內容模塊。 相應地更改模塊的文本設置：

• 文字字體：Open Sans
• 文字大小：0.9vw（桌面）、1.8vw（平板電腦）、3vw（手機）
• 文本行高：2.2em

標題文字設置

然後，也對標題文本設置進行一些更改。

• 標題字體：氧氣
• H2 文字大小：1.5vw（桌面）、3vw（平板電腦）、4vw（手機）
• H3、H4、H5 和 H6 文本大小：1.3vw（桌面）、2.5vw（平板電腦）、3.5vw（手機）

間距

我們也在使用一些自定義邊距和填充值。

• 左邊距：4vw
• 右邊距：4vw
• 頂部填充：50px
• 底部填充：100px

CSS 類

通過添加 CSS 類來完成模塊的設置。 在本教程的下一部分中，我們將使用這個 CSS 類為標題和段落添加一些間距。

• 後內容間距

將代碼模塊添加到第 2 列

插入 CSS 代碼

正如本文上一步中提到的，我們將使用一些自定義 CSS 在標題和段落之間添加空格。 為此，我們將使用第 2 列中的代碼模塊。插入以下 CSS 代碼行：

<style>

.post-content-spacing h2,
.post-content-spacing h3,
.post-content-spacing h4,
.post-content-spacing h5,
.post-content-spacing h6 {
margin-top: 50px;
margin-bottom: 50px;
}

.post-content-spacing p {
margin-top: 20px;
margin-bottom: 20px;
}

</style>

將電子郵件選擇模塊添加到第 3 列

添加內容

是時候開始添加側邊欄元素了！ 你可以添加任何你想要的模塊。 我們將從第 3 列中的電子郵件選擇模塊開始。使用您選擇的一些副本。

電子郵件帳戶

繼續將電子郵件帳戶鏈接到模塊。

字段

然後，在字段設置中禁用姓氏字段。

• 顯示姓氏字段：否

背景顏色

相應地更改背景顏色：

• 背景顏色：#ffc023

字段設置

轉到模塊的設計選項卡並按如下方式修改字段設置：

• 字段字體：Open Sans
• 字段文本大小：0.8vw（桌面）、1.8vw（平板電腦）、3vw（手機）

標題文字設置

也對標題文本設置進行一些更改。

• 標題字體：氧氣
• 標題字體粗細：粗體
• 標題文字大小：1vw（桌面）、3vw（平板電腦）、5vw（手機）
• 標題行高度：1.5em

按鈕設置

繼續設置按鈕樣式。

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：0.9vw（桌面）、1.8vw（平板電腦）、3vw（手機）
• 按鈕文字顏色：#ffc023
• 按鈕背景顏色：#f4f4f4
• 按鈕邊框寬度：0px

• 按鈕邊框半徑：0px
• 按鈕字體：氧氣

• 按鈕頂部填充：15px
• 按鈕底部填充：15px

盒子陰影

並通過添加一個微妙的框陰影來完成模塊設置。

• 框陰影模糊強度：80px
• 框陰影傳播強度：-21px
• 陰影顏色：rgba(0,0,0,0.08)

將社交媒體關注模塊添加到第 3 列

添加選擇的社交網絡

我們在第 3 列中需要的下一個模塊是社交媒體關注模塊。 添加一些您選擇的社交網絡。

單獨重置社交網絡風格

繼續為每個社交網絡分別重置項目樣式。

圖標設置

然後，返回常規模塊設置並更改圖標顏色。

• 圖標顏色：#ffc023

將博客模塊添加到第 1 列

元素

在第 1 列中，我們添加的唯一模塊是博客模塊。 在元素設置中禁用作者。

• 顯示作者：否

佈局

然後，轉到模塊的設計選項卡並更改佈局。

• 佈局：網格

標題文字設置

接下來修改標題文本設置。

• 標題字體：氧氣
• 標題字體粗細：粗體
• 標題文字大小：1vw（桌面）、3vw（平板電腦）、5vw（手機）
• 標題行高度：1.5em

正文設置

也對正文文本設置進行一些更改。

• 正文字體：Open Sans
• 正文大小：0.7vw（桌面）、1.8vw（平板電腦）、3vw（手機）
• 車身線高：2.2em

元文本設置

接下來，相應地設置元文本設置的樣式：

• 元字體：Open Sans
• 元文本顏色：#ffc023
• 元文本大小：0.8vw（桌面）、1.8vw（平板電腦）、3vw（手機）

邊界

也刪除模塊的默認邊框。

• 網格佈局邊框寬度：0px

盒子陰影

並使用微妙的框陰影。

• 框陰影模糊強度：80px
• 框陰影傳播強度：-21px
• 陰影顏色：rgba(0,0,0,0.08)

能見度

現在，當有人在桌面上查看帖子時，我們希望博客模塊顯示在第 1 列中。 然而，在較小的屏幕尺寸上，我們希望帖子內容排在第一位。 這就是我們將在平板電腦和手機上隱藏整個模塊的原因。

克隆博客模塊並在第 3 列中放置重複項

然後，我們將克隆博客模塊並將副本放在第三列中。

更改可見性

我們希望此模塊僅出現在較小設備上的第 3 列中，這就是我們將整個模塊隱藏在桌面上的原因。

3. 保存所有主題生成器更改和預覽結果

完成博客帖子模板後（確保您也添加了評論模塊！），您可以保存所有主題生成器更改並在您的網站上查看結果！

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何使用 Divi 的 Theme Builder 向您的博客帖子模板添加兩側邊欄。 更重要的是，我們免費共享了佈局的 JSON 文件，因此您可以將其保存在附近，以防將來的任何項目需要它！ 如果您有任何疑問，請隨時在下面的評論部分發表評論。

如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。