如何使用 Divi 動態創建一個簡單的用戶體驗友好的博客帖子模板

在您的網站上分享新的博客文章時，重要的是要讓訪問者的閱讀體驗盡可能輕鬆。 這意味著消除盡可能多的干擾，同時仍然匹配您網站上的品牌。 允許訪問者通過他們的瀏覽器控製文本大小也很重要，這就是相對 rem 字體單位派上用場的地方。 它允許人們調整瀏覽器中顯示的字體大小。 在本教程中，我們將構建一個美觀且簡單的博客帖子模板，高度考慮用戶體驗。 您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

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

桌面

移動的

免費下載簡單的用戶體驗友好的博客帖子模板

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

下載文件

免費下載

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

下載

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

訂閱我們的 YouTube 頻道

1.轉到Divi Theme Builder並創建新模板

轉到 Divi 主題生成器

首先轉到Divi Theme Builder。

創建新模板

創建一個新模板並在您的所有帖子中使用它。

• 用於：所有帖子

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

然後，開始構建帖子模板的自定義正文。

將第 1 行添加到現有部分

列結構

在模板編輯器中，使用以下列結構向已有的部分添加一個新行：

漿紗

在不添加任何模塊的情況下，打開行設置並按如下方式更改大小設置：

• 使用自定義裝訂線寬度：是
• 天溝寬度：1

第 1 列和第 2 列邊框

接下來為第一列和第二列添加右邊框。

• 右邊框寬度：1px（桌面），0px（平板電腦和手機）
• 右邊框顏色：#333333

將文本模塊添加到每列

動態內容

繼續向每列添加一個文本模塊，並分別為每個模塊選擇一些動態內容。

• 第 1 列中的文本模塊：帖子類別

• 第 2 列中的文本模塊：發布後日期

• 第 3 列中的文本模塊：發表評論計數
• 之後：評論

文字設置

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

• 文字字體：Lato
• 文字大小：1.1rem
• 文字字母間距：1px
• 文本行高：2em

添加第 2 行

列結構

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

將文本模塊 #1 添加到列

動態內容

添加文本模塊並選擇帖子標題動態內容。

• 動態內容：帖子標題

• 之前：<H1>
• 之後：</H1>

H1 文本設置

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

• 標題字體：Playfair Display
• 標題文本對齊方式：居中
• 標題文字大小：6.2rem（桌面）、3.2rem（平板電腦）、2.3rem（手機）

間距

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

• 上邊距：50px
• 下邊距：100px

將文本模塊 #2 添加到列

動態內容

在上一個文本模塊的正下方添加另一個文本模塊，然後選擇帖子摘錄動態內容。

• 動態內容：帖子摘錄

文字設置

更改模塊的文本設置如下：

• 文字字體：Lato
• 文字大小：1.1rem
• 文字字母間距：1px
• 文本行高：2em
• 文本對齊：居中

添加第 3 行

列結構

使用以下列結構向該部分添加另一行：

展示

通過向行的主要元素添加一行 CSS 代碼，確保列保持彼此相鄰。

display: flex;

將圖像模塊添加到第 1 列

動態內容

繼續向第 1 列添加圖像模塊並選擇作者個人資料圖片動態內容。

• 動態內容：作者頭像

結盟

轉到模塊的設計選項卡並更改圖像對齊方式。

• 圖像對齊：右

漿紗

接下來修改寬度。

• 寬度：50px

間距

在平板電腦和手機上添加一些右邊距。

• 右邊距：20px（平板電腦和手機）

邊界

並通過在邊框設置中添加一些邊框半徑來完成模塊的設置。

• 所有角落：100px

將文本模塊添加到第 2 列

動態內容

在第二列中，我們需要一個文本模塊。 選擇帖子作者動態內容。

• 動態內容：帖子作者

文字設置

轉到設計選項卡並相應地更改文本設置：

• 文字字體：Lato
• 文字大小：1.1rem
• 文字字母間距：1px

間距

接下來添加一些自定義邊距值。

• 上邊距：15px
• 左邊距：20px（平板電腦和手機）

添加第 4 行

列結構

使用以下列結構向該部分添加另一行：

將文本模塊添加到列

將內容框留空

向該列添加一個文本模塊，並確保將內容框留空。

動態背景圖片

接下來將特色圖片動態內容添加到模塊的背景圖片中。

• 動態內容：特色圖片

漿紗

繼續修改模塊在不同屏幕尺寸上的尺寸設置。

• 寬度：800px（桌面）、500px（平板）、300px（手機）
• 模塊對齊：居中

間距

在不同的屏幕尺寸上添加一些自定義的頂部和底部填充。

• 頂部填充：400 像素（桌面）、250 像素（平板電腦）、150 像素（手機）
• 底部填充：400 像素（桌面）、250 像素（平板電腦）、150 像素（手機）

邊界

並在邊框設置中添加一些邊框半徑，將模塊變成圓形。

• 所有角落：500px

添加新部分

進入下一個常規部分。

添加第 1 行

列結構

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

將帖子內容模塊添加到列

文字設置

將 Post Content Module 添加到該列，轉到模塊的設計選項卡並相應地更改文本設置：

• 文字字體：Lato
• 文字大小：1.1rem
• 文字字母間距：1px
• 文本行高：2.3em

標題文字設置

也修改標題文本設置。

• 標題字體：Playfair Display
• H2 文字大小：3.5rem（桌面），2rem（平板電腦和手機）
• H3 文字大小：2.5rem（桌面），1.5rem（平板電腦和手機）
• H4 文字大小：2.3rem（桌面），1.3rem（平板電腦和手機）
• H5 和 H6 文本大小：2rem（桌面），1rem（平板電腦和手機）

添加第 2 行

列結構

使用以下列結構向該部分添加另一行：

間距

向該行添加一些自定義上邊距。

• 上邊距：100px

將評論模塊添加到列

字段設置

我們在這一行中唯一需要的模塊是評論模塊。 更改字段設置如下：

• 字段背景顏色：#ffffff
• 字段字體：Lato
• 字段文本大小：1.1rem

• 所有角：0px
• 字段邊框寬度：1px
• 字段邊框顏色：#000000

圖像設置

也更改圖像設置。

• 所有角落：100px

標題文字設置

然後，修改標題文本設置。

• 標題標題級別：H2
• 標題字體：Playfair Display
• 標題文字大小：3rem（桌面），2rem（平板電腦和手機）
• 標題行高度：1.4em

元文本設置

也為元文本設置樣式。

• 元字體：Playfair Display
• 元文本大小：1.4rem

評論文本設置

我們對評論文本設置使用以下設置：

• 評論字體：Lato
• 評論文字大小：1.1rem
• 評論字母間距：1px
• 評論行高：2em

按鈕文字設置

並通過按如下方式設置按鈕樣式來完成模塊的設置：

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

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

3. 保存模板和主題生成器更改

完成模板設計後，保存所有 Divi Theme Builder 更改並預覽帖子的結果！

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何創建一個漂亮而簡單的博客帖子模板，該模板專注於訪問者在閱讀時的用戶體驗。 使用 Divi 的內置選項修改此帖子模板，使其與您網站的品牌相匹配。 您還可以免費下載模板 JSON 文件！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。

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