正在尋找一種經典但富有創意的方式在您的網站上顯示博客文章？ 如果是這樣，你會喜歡這個 Divi 免費贈品。 我們設計了一個受打字機啟發的經典博客文章模板，可自動應用於您網站上的所有博客文章！ 在整篇文章中，我們還將逐步展示如何在 Theme Builder 中從頭開始重新創建設計。

讓我們開始吧！

預覽

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

桌面

移動的

免費下載受打字機啟發的博客帖子模板

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

下載文件

免費下載

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

下載

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

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

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

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

在所有帖子上使用模板

在您的所有帖子中使用這個新模板。

• 用於：所有帖子

開始構建模板主體

並開始構建新模板的主體。

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

部分設置

背景顏色

進入模板編輯器後，您會注意到一個部分。 打開該部分並更改背景顏色。

• 背景顏色：#fff4d8

間距

接下來添加一些自定義的頂部和底部填充。

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

邊界

並通過添加邊框來完成部分設置。

• 邊框寬度：100 像素（桌面）、20 像素（平板電腦和手機）
• 邊框顏色：#ffffff

添加第 1 行

列結構

繼續使用以下列結構向該部分添加新行：

間距

在不添加任何模塊的情況下，打開行設置並刪除所有默認的頂部和底部填充。

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

將圖像模塊添加到列

上傳圖片

然後，將圖像模塊添加到行的列並上傳您選擇的插圖。 我們在本教程中使用的插圖可以在本教程開頭的可下載文件夾中找到。

間距

移至模塊的設計選項卡並按如下方式修改間距值：

• 上邊距：-150px
• 左邊距：-12vw（桌面），0px（平板和手機）

添加第 2 行

列結構

進入下一行。 使用以下列結構：

將文本模塊添加到第 1 列

動態內容

將文本模塊添加到行的第一列並使用以下動態內容：

• 正文：發布日期

• 日期格式：08/06/1999 m/d/Y

文字設置

相應地更改文本設置：

• 文字字體：特殊精英
• 文字字體粗細：粗體
• 文字顏色：#000000
• 文字大小：1.4rem

克隆文本模塊三次

完成文本模塊的設置後，您可以克隆整個模塊 3 次。

更改動態內容

修改重複模塊的動態內容如下：

• 重複 #1：發布類別
• 重複 #2：帖子作者
• 重複 #3：發表評論數
  • 之後：評論
  • 鏈接到評論區：是

在第 2 列中放置兩個文本模塊

繼續將最後兩個文本模塊放在行的第二列中，

更改類別和評論計數的鏈接文本顏色

必要時也修改鏈接文本顏色。

• 鏈接文字顏色：#000000

更改第 2 列中模塊的文本方向

並通過修改不同屏幕尺寸的文本對齊方式來完成第 2 列中的文本模塊。

• 文本對齊：右（桌面），左（平板電腦和手機）

添加第 3 行

列結構

進入下一行！ 使用以下列結構：

將文本模塊添加到列

動態內容

將文本模塊添加到行的列並使用以下動態內容：

• 正文：帖子/檔案標題

• 前：

• 後：

H1 文本設置

轉到模塊的設計選項卡並按如下方式更改 H1 文本設置：

• 標題字體：特殊精英
• 標題文字顏色：#000000
• 標題文字大小：3.5rem（桌面）、2.5rem（平板電腦）、2rem（手機）
• 標題線高度：1.5em

間距

添加一些自定義的頂部和底部邊距。

• 上邊距：150px
• 下邊距：150px

將帖子內容模塊添加到列

文字設置

進入下一個模塊，即發佈內容模塊。 相應地修改文本設置：

• 文字字體：特殊精英
• 文字大小：1.2rem
• 文本行高：2.5em

標題文字設置

也更改不同的標題文本設置。

• 標題字體：特殊精英
• 標題文字顏色：#000000
• 標題 2 文字大小：2rem (H2)、1.9rem (H3)、1.8rem (H4)、1.7rem (H5)、1.6rem (H6)

CSS ID

並為模塊分配一個 CSS ID。

• CSS ID：後內容模塊

將代碼模塊添加到列

添加標題 CSS 代碼

現在，要為不同的標題添加一些自定義邊距，我們將以下自定義 CSS 添加到代碼模塊：

<style>
#post-content-module h2, h3, h4, h5, h6 {
margin-top: 70px;
margin-bottom: 70px;
}
</style>

添加第 2 節

背景顏色

將另一個部分添加到帖子模板，打開部分設置並更改該部分的背景顏色。

• 背景顏色：#fff4d8

邊界

也加個邊框。

• 邊框寬度：100 像素（桌面）、20 像素（平板電腦和手機）
• 頂部邊框寬度：0px
• 邊框顏色：#ffffff

添加新行

列結構

繼續使用以下列結構向該部分添加新行：

將評論模塊添加到列

字段設置

我們在這一行中唯一需要的模塊是 Comments Module。 相應地更改字段設置：

• 字段背景顏色：rgba(0,0,0,0)
• 字段文本顏色：#000000
• 字段底部填充：50px
• Fields 字體：特殊精英
• 字段文本大小：1.2rem

• 字段底部邊框寬度：1px
• 字段底部邊框顏色：#000000

評論計數文本設置

隨著評論計數文本設置。

• 評論計數標題級別：H2
• 評論計數字體：特殊精英
• 評論計數文本顏色：#000000
• 評論計數文字大小：2rem

表單標題文本設置

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

• 表格標題標題級別：H3
• 表格標題字體：特殊精英
• 表單標題文本顏色：#000000
• 表格標題文字大小：1.5rem

元文本設置

然後，更改元文本設置。

• 元字體：特殊精英
• 元文本顏色：#000000
• 元文本大小：1.5rem

評論文本設置

我們還將對評論文本設置進行一些更改。

• 評論字體：特殊精英
• 評論文字大小：1.2rem
• 評論行高：2.5em

按鈕設置

繼續按如下方式設置按鈕樣式：

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：1.2rem
• 按鈕文字顏色：#ffffff
• 按鈕背景：#000000
• 按鈕邊框寬度：0px
• 按鈕邊框半徑：0px

• 按鈕字體：特殊精英

評論正文 CSS

並通過在高級選項卡的評論正文中添加一些上邊距來完成模塊的設置。

margin-top: 100px;

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

創建模板的自定義博客文章正文後，您可以保存所有更改並查看博客文章的結果！

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們分享了一個受打字機啟發的經典博客文章模板，您可以免費下載並用於下一個 Divi 項目！ 我們也從頭開始重新創建了帖子模板設計。 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。

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