如何使用 Divi 為您的博客帖子模板設計動態作者框

在您的博客文章中提及文章作者是必不可少的。 現在，使用 Divi 的 Theme Builder，您可以為您的帖子添加一個站點範圍的動態作者框。 您還可以使用 Divi 的內置選項設置作者框的樣式，這可以帶來漂亮的網頁設計。 在本教程中，我們將向您展示如何在您的帖子模板中設計一個漂亮的動態作者框。 您也可以免費下載帖子模板 JSON 文件！

讓我們開始吧。

預覽

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

桌面

移動的

免費下載帖子模板

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

下載文件

免費下載

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

下載

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

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

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

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

在所有帖子上使用模板

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

• 用於：所有帖子

開始構建模板主體

並開始構建模板主體。

2. 建立博客帖子模板正文

部分設置

背景顏色

在模板編輯器中，您會注意到一個部分。 打開部分設置並添加背景顏色。

• 背景顏色：#270fff

背景圖片

上傳您可以在本文開頭下載的壓縮文件夾中找到的背景圖片。

添加新行

列結構

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

漿紗

打開行的設置並在大小設置中更改最大寬度。

• 最大寬度：1380px

將帖子標題模塊添加到列

元素

我們在這一行中唯一需要的模塊是帖子標題模塊。 我們正在元素設置中禁用帖子的特色圖片。

• 顯示特色圖片：否

文字設置

轉到模塊的設計選項卡並更改常規文本設置中的文本顏色。

• 文字顏色：淺

標題文字設置

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

• 標題字體：Work Sans
• 標題文字大小：7rem（桌面）、4rem（平板電腦）、2rem（手機）
• 標題字母間距：-2px

元文本設置

隨著元文本設置。

• 元字體：Work Sans
• 元文本大小：1rem

添加新部分

間距

在模板正文中添加一個新的常規部分，打開部分設置並刪除所有默認的頂部填充。

• 頂部填充：0px

添加新行

列結構

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

漿紗

打開行設置並更改大小設置如下：

• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 均衡柱高：是
• 最大寬度：1380px

間距

也刪除所有默認的頂部填充。

• 頂部填充：0px

第 1 列設置

間距

然後，打開第 1 列設置並在不同的屏幕尺寸中添加一些自定義填充值。

• 頂部填充：200 像素（桌面）、50 像素（平板電腦）、20 像素（手機）
• 底部填充：200 像素（桌面）、50 像素（平板電腦）、20 像素（手機）
• 左內邊距：100 像素（桌面）、50 像素（平板電腦）、20 像素（手機）
• 右內邊距：100 像素（桌面）、50 像素（平板電腦）、20 像素（手機）

盒子陰影

也將框陰影添加到第一列。

• 框陰影模糊強度：60px
• 陰影顏色：rgba(0,0,0,0.09)

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

文字設置

是時候開始添加模塊了！ 將 Post Content Module 放在第 1 列並相應地更改文本設置：

• 文字字體：Work Sans
• 文字大小：1rem（桌面），0.9rem（平板電腦和手機）
• 文本行高：2.3em

標題文字設置

還要修改不同的標題文本設置。

• 標題字體：Work Sans
• 標題 2 文字大小：1.6rem (H2)、1.5rem (H3)、1.4rem (H4)、1.3rem (H5)、1.2rem (H6)
• 標題線高度：1.3em

CSS ID

通過添加 CSS ID 完成模塊的設置。

• CSS ID：博客文章內容

將代碼模塊添加到第 1 列

插入標題 CSS 代碼

為了在不同的帖子內容元素之間添加一些空間，我們將向第 1 列添加一個代碼模塊並插入以下 CSS 代碼行：

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

#blog-post-content p {
margin-top: 20px;
margin-bottom: 20px;
}
</style>

將人員模塊添加到第 2 列

動態內容

在第二列中，我們唯一需要的模塊是 Person 模塊。 我們將選擇以下動態內容：

• 姓名： 帖子作者
• 職位：作者
• 正文：作者簡介

圖片動態內容

模塊中也加入了作者的動態頭像。

• 圖片：作者簡介圖片

懸停背景顏色

然後，在懸停時添加白色背景色。

• 背景顏色：#ffffff

標題文字設置

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

• 標題標題級別：H3
• 標題字體：Work Sans
• 標題文字大小：1.1rem

正文設置

也修改正文設置。

• 正文字體：Work Sans
• 正文大小：0.9rem
• 車身線高：2em

位置文本設置

然後，更改位置字體文本設置。

• 職位字體：Work Sans
• 位置文本大小：0.9rem

默認大小

在大小設置中修改高度。

• 高度：160px（桌面），自動（平板電腦和手機）

懸停大小調整

並在懸停時將高度恢復為自動。

• 高度：自動

間距

接下來，我們使用自定義填充在模塊周圍添加一些空間。

• 頂部填充：50px
• 底部填充：50px
• 左填充：50px
• 右填充：50px

默認邊框

我們也將使用邊框。

• 左邊框寬度：0px（桌面），4px（平板電腦和手機）
• 左邊框顏色：#270fff

懸停邊框

修改懸停時的邊框寬度。

• 左邊框寬度：4px

默認框陰影

然後，添加一個框陰影。

• 框陰影模糊強度：60px
• 陰影顏色：rgba(0,0,0,0)（桌面），rgba(0,0,0,0.11)（平板電腦和手機）

懸停框陰影

更改懸停時的陰影顏色。

• 陰影顏色：rgba(0,0,0,0.11)

默認過濾器

繼續，我們將改變不透明度。

• 不透明度：41%（桌面），100%（平板電腦和手機）

懸停過濾器

懸停時將不透明度恢復到 100%。

• 不透明度：100%

主要元素 CSS

為了添加您在這篇文章的預覽中註意到的粘性效果，我們將向模塊的主要元素添加幾行自定義 CSS。

position: sticky;
position: -webkit-sticky;
top: 50px !important;

會員圖片CSS

我們通過向模塊的成員圖片添加一行 CSS 代碼來確保作者個人資料圖片左對齊。

text-align: left;

默認可見性

為了在桌面上隱藏模塊的內容，我們將更改高級選項卡中的溢出。

• 水平溢出：隱藏
• 垂直溢出：隱藏

懸停可見性

我們將通過將溢出更改為可見來使內容出現在懸停時。

• 水平溢出：可見
• 垂直溢出：可見

添加新部分

在您的設計中添加另一個部分。

添加新行

列結構

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

漿紗

打開行設置並相應地更改大小設置：

• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 均衡柱高：是
• 最大寬度：1380px

將評論模塊添加到列

字段設置

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

• 字段背景顏色：#ffffff
• 字段頂部填充：20px
• 字段底部填充：20px
• 字段字體：Work Sans
• 字段文本大小：1rem

評論計數文本設置

還要修改評論計數文本設置。

• 評論計數標題級別：H2
• 評論計數字體：Work Sans
• 評論計數文字大小：1.5rem

表單標題文本設置

然後，更改表單標題文本設置。

• 表格標題標題級別：H3
• 表單標題字體：Work Sans
• 表格標題文字大小：1.2rem

元文本設置

還要修改元文本設置。

• 元字體：Work Sans
• 元文本大小：1rem

評論文本設置

我們也在更改評論文本設置。

• 評論字體：Work Sans
• 評論文字大小：1rem
• 評論行高：2.3em

按鈕設置

通過設置按鈕樣式來完成模塊的設置。

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

• 按鈕字體：Work Sans

3. 保存主題生成器更改並查看結果

完成模板後，請確保保存所有更改，退出主題生成器並查看帖子的結果！

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何使用 Divi 的內置選項、動態功能和主題生成器設計一個漂亮的動態作者框。 將這三件事結合起來，現在比以往任何時候都更容易自定義您的博客帖子模板並以創造性的方式感謝帖子作者。 您也可以免費下載 JSON 文件！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。

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