如何在博客帖子模板中設置 Divi 的評論模塊的樣式

使用 Divi 主題構建器設計博客文章模板非常容易。 但是在設計博客模板時，有一件容易被忽視的事情，那就是評論部分。 幸運的是，Divi 有一個可自定義的評論模塊，可以輕鬆添加到博客文章模板中。 在這篇文章中，我們將向您展示如何創建兩個可以包含在任何博客模板中的自定義評論部分設計。 您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

讓我們來看看評論佈局設計在不同屏幕尺寸上的外觀。 第一個設計是黑色和白色的極簡風格，第二個設計更加豐富多彩。

桌面

藥片

電話

桌面

藥片

移動的

免費下載評論模塊模板

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

下載文件

免費下載

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

下載

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

讓我們重新創建評論模塊設計 #1

創建背景設計

重新創建黑白評論佈局模板的第一步是設計圓點背景。 一個用於桌面視圖，另一個用於響應式屏幕。 如果您想自己創建它，您將需要 Adob​​e Illustrator 的圖案製作工具。 否則，您可以從 Internet 獲取類似的模式，或使用上面可下載的 .zip 文件中包含的模式。

1. 在 Adob​​e Illustrator 中，創建一個大約 1920 像素高 + 670 像素寬的空白畫板。
2. 在白色方塊內創建一個黑色圓圈，邊距約為圓圈大小的一半。
3. 選擇兩個形狀並通過單擊對象 > 圖案 > 製作來製作圖案。
4. 在圖案製作器中，選擇“逐列磚”並另存為圖案色板。
5. 創建一個與畫板大小相同的形狀並應用該圖案。
6. 對於響應式屏幕尺寸，將形狀縮小到其尺寸的一半。 按 shift 以保持圓圈的比例。
7. 複製並粘貼第一個旁邊的圖案形狀，現在您擁有相同的圖案和較小的圓圈。
8. 分別下載。

打開主題生成器並添加新模板

現在是時候打開主題構建器了。 添加新模板。

選擇所有帖子的模板

在所有帖子上使用新模板。

添加自定義主體並從頭開始構建

最後但並非最不重要的一點是，開始構建模板的自定義主體。

添加新部分

背景

現在，我們可以開始構建評論佈局的設計。 在模板編輯器中，您會注意到一個部分。 打開部分設置並上傳圖案背景圖片。 還要添加漸變疊加。

• 背景：漸變
• 顏色 1：半透明白色 rgba(255,255,255,0.96)
• 顏色 2：白色 #ffffff
• 將漸變放在背景圖像上方：是
• 圖片：
  • 桌面：點圖案圖像 1
  • 平板電腦和手機：圓點圖案圖像 2

添加新行

列結構

現在，添加一個包含兩列的新行。

漿紗

然後，調整行的大小。

• 自定義天溝寬度：2
• 寬度：80%
• 最大寬度：100%

第 2 列設置

邊界

在列設置中，將頂部邊框添加到第二列。

• 款式：僅限上衣
• 寬度：3px
• 顏色：黑色#ffffff

將文本模塊添加到第 1 列

內容

使用您選擇的一些 H3 內容將第一個文本模塊添加到第 1 列。

• 文字：段落

標題文字

然後，在設計選項卡中，設置標題文本的樣式。

• 標題級別：H3
• 字體：GFS 迪多
• 顏色：黑色#000000
• 尺寸：
  • 台式機：5vw
  • 平板電腦：9vw
  • 電話：13vw

間距

另外，調整間距。

• 底部填充
  • 台式機：3vw
  • 平板電腦和手機：7vw

將推薦模塊添加到第 1 列

內容

現在，將推薦模塊添加到第 1 列，其中包含您選擇的一些內容。 也上傳一張圖片。

• 作者：忠實讀者
• 職位名稱：內容營銷官
• 公司：老虎傳媒公司
• 正文：段落文本
• 圖片：人像照片

背景

確保背景是透明的

• 背景顏色：透明

元素

在元素選項卡中，選擇以顯示引用圖標。

• 顯示報價圖標：是

報價圖標

然後，按如下所示設置引用圖標的樣式。

• 顏色：黑色#000000
• 背景：白色#ffffff
• 圖標字體大小：
  • 台式機：2vw
  • 平板電腦：5vw
  • 電話：9vw

圖片

接下來更改圖像設置。

• 寬度和高度：
  • 桌面：110px
  • 平板電腦和手機：90px
• 圓角：90px
• 邊框顏色：透明

文本

也更改文本對齊方式。

• 對齊方式：居中

文章主體

然後，設置正文的樣式。

• 字體: Verdana
• 顏色：黑色
• 尺寸：
  • 台式機：0.7vw
  • 平板電腦：2vw
  • 電話：3vw

作者文本

繼續設置作者文本的樣式。

• 字體：GFS 迪多
• 重量：粗體
• 顏色：黑色#ffffff
• 尺寸：
  • 台式機：1.2vw
  • 平板電腦：2.5vw
  • 電話：4vw
• 字母間距：1px

位置文本

然後，位置文本。

• 字體：GFS 迪多
• 顏色：黑色#ffffff
• 尺寸：
  • 台式機：0.9vw
  • 平板電腦：2vw
  • 電話：3vw
• 線高：2em

公司文字

此外，公司文本。

• 字體：GFS 迪多
• 顏色：黑色#ffffff
• 尺寸：
  • 台式機：0.7vw
  • 平板電腦：2vw
  • 電話：3vw
• 線高：2em

漿紗

繼續調整模塊的大小。

• 寬度：
  • 台式機：60%
  • 平板電腦：65%
  • 電話：75%
• 模塊對齊：居中

間距

另外，調整間距。

• 頂部填充：
  • 台式機：1.5vw
  • 平板電腦：5vw
  • 電話：6vw

邊界

最後，為模塊添加一個頂部邊框。

• 邊框樣式：僅頂部
• 寬度：2px
• 顏色：黑色#ffffff

將評論模塊添加到第 2 列

元素

轉到第 2 列，添加評論模塊。 如下更改元素設置。

• 顯示作者頭像：否
• 顯示回复按鈕：是
• 顯示評論數：否

字段

轉到模塊的設計選項卡並更改字段設置。

• 文字顏色：黑色#oooooo
• 背景顏色：淺灰色#f7f7f7
• 焦點文字顏色：黑色#oooooo
• 焦點背​​景顏色：淺灰色#f7f7f7
• 字體：GFS 迪多
• 字體大小：
  • 台式機：0.9vw
  • 平板電腦：1.5vw
  • 電話：2.5vw
• 字母間距：1px

表單標題文本

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

• 字體：GFS 迪多
• 顏色：黑色#ffffff
• 尺寸：
  • 台式機：0.9vw
  • 平板電腦：2.5vw
  • 字體：3.5vw

元文本

繼續設置元文本的樣式。

• 字體：GFS 迪多
• 顏色：黑色#ffffff
• 尺寸：
  • 台式機：1.3vw
  • 平板電腦：3vw
  • 電話：4vw

評論文本

此外，評論文本。

• 字體: Verdana
• 顏色：黑色#ffffff
• 尺寸：
  • 台式機：0.7vw
  • 平板電腦：1.7vw
  • 電話：2.7vw
• 字母間距：1px
• 線高：1.8em

按鈕

繼續，設計按鈕。

• 字體大小：
  • 台式機：0.9vw
  • 平板電腦：2.5vw
  • 電話：3.5vw
• 文字顏色：白色#000000
• 背景：黑色#ffffff
• 字母間距：1px
• 字體：GFS 迪多

漿紗

然後，調整模塊的大小設置。

• 寬度：90%
• 模塊對齊：居中

間距

最後，間距也是。

• 頂部填充：
  • 台式機：4vw
  • 平板電腦和手機：8vw
• 左右填充：3vw

讓我們重新創建評論模塊設計 #2

創建背景設計

重新創建彩色圓圈評論模塊佈局的第一步是準備背景設計。 您可以在您最喜歡的圖形編輯器中創建一個簡單的圓形設計。 這些是創建背景圖像所需的步驟：

1. 創建一個寬 1800 像素、高約 1800 像素的畫布。
2. 添加兩個圓圈，一個比另一個大。
3. 給圓圈上色並添加一些透明度。
4. 將兩個圓圈稍微重疊放在畫布的左上角。
5. 將圓圈組合為一個對象並複制它們。
6. 翻轉圓圈並將它們從前兩個對角向下放置。
7. 確保在頂部和底部留出空間。 當有很多評論時，圖像會重複並垂直平鋪。

我們為此評論佈局模板創建的背景設計也可以在本教程開頭下載的壓縮文件夾中找到。

打開主題生成器並添加新模板

現在是時候打開主題構建器了。 添加新模板。

選擇所有帖子的模板

將模板應用於所有帖子。

添加自定義主體並從頭開始構建

並開始構建模板的自定義主體。

添加新部分

進入模板編輯器後，您會注意到一個部分。 打開該部分並上傳背景圖像。 還包括漸變顏色疊加。

背景

• 背景：漸變
• 漸變色1：透明白rgba(255,255,255,0.55)
• 漸變色2：透明白rgba(255,255,255,0.55)
• 圖片：圓圈背景

間距

此外，在添加行之前調整節的間距。

• 頂部和底部填充：200px

添加新行

列結構

現在添加一行三列。

漿紗

在添加模塊之前，調整行的大小。

• 自定義天溝寬度：2
• 寬度：80%
• 最大寬度：100%

第 2 列設置

背景

現在，通過添加藍色背景來設置第二列的樣式。

• 背景顏色：藍色 #51a2ff

邊界

繼續四捨五入。

• 圓角：1vw 所有四個角

盒子陰影

最後，也添加一個框陰影。

• 陰影：第三種選擇
• 模糊強度：80px
• 顏色：RGBA(0,0,0,0.13)

將人員模塊添加到第 1 列

內容

是時候添加模塊了。 從第 1 列中的人員模塊開始並添加內容。

• 姓名：珍妮·麥卡比
• 職位：常規貢獻者
• 正文：段落文本
• 圖片：人像照片

背景

為模塊添加白色背景。

• 背景顏色：白色#000000

圖片

在設計選項卡中，設置圖像邊框的樣式如下。

• 圓角：左上角和右上角0.5vw
• 邊框樣式：底部邊框
  • 寬度：5px
  • 顏色：藍色#51a2ff

標題文字

繼續設置標題文本的樣式。

• 標題級別：H4
• 字體：Alegreya Sans SC
• 風格：TT
• 顏色：#021859
• 尺寸：
  • 台式機：1vw
  • 平板電腦：3vw
  • 電話：5vw
• 字母間距：1px
• 線高：1.6em

文章主體

然後還有正文。

• 字體：拉托
• 顏色：藍色#1a1f73
• 尺寸：
  • 台式機：0.7vw
  • 平板電腦：2vw
  • 電話：3vw
• 線高：2em

位置文本

繼續位置文本。

• 字體：拉托
• 樣式：斜體
• 顏色：#021859
• 尺寸：
  • 台式機：0.8vw
  • 平板電腦：3vw
  • 電話：3.5vw

漿紗

然後，調整大小。

• 寬度：
  • 台式機：100%
  • 平板電腦：50%
  • 電話：70%
• 模塊對齊：居中

間距

還有間距。

• 頂部和底部填充：4vw

邊界

然後，添加一些圓角。

• 圓角：所有四個角均為 o.5vw
• 邊框樣式：所有四個邊均為 24 像素
  • 顏色：白色#ffffff

盒子陰影

最後，添加一個框陰影。

• 陰影：第三種選擇
• 模糊強度：80px
• 顏色：RGBA(0,0,0,0.13)

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

網絡

在人員模塊下方，添加具有三個社交網絡的社交媒體關注模塊。

• Facebook
• 領英
• 推特

網絡設置

為每個社交網絡應用透明背景色。 你需要一個一個地做這件事。

• 背景：透明

結盟

在主要設計設置中，將模塊對齊居中。

• 模塊對齊：居中

圖標

最後，將圖標塗成藍色。

• 顏色：藍色#51a2ff
• 尺寸：
  • 台式機：1vw
  • 平板電腦和手機：4vw

將文本模塊添加到第 2 列

內容

移至第 2 列。添加具有您選擇的一些 h3 內容的文本模塊。

• 文字：給我們留言

背景

添加白色背景。

• 背景顏色：白色#ffffff

標題文字

然後轉到設計選項卡並設置標題文本的樣式。

• 標題級別：H3
• 字體：Alegreya Sans SC
• 重量：粗體
• 字體樣式：TT
• 顏色：藍色#021859
• 尺寸：
  • 台式機：2vw
  • 平板電腦和手機：5.5vw

間距

最後，調整間距。

• 頂部填充：
  • 台式機：3vw
  • 平板電腦：2vw
  • 電話：6vw
• 底部填充
  • 台式機和平板電腦：3vw
• 左右填充：
  • 台式機和平板電腦：1vw

將評論模塊添加到第 2 列

元素

現在將評論模塊添加到第 2 列。啟用所有元素。

• 顯示作者頭像：是
• 顯示回复按鈕：是
• 顯示評論數：是

背景

為評論模塊添加白色背景。

• 背景顏色：白色#ffffff

字段

然後，通過如下調整字段設置來開始設置模塊樣式

• 背景顏色：白色#ffffff
• 文字顏色：藍色 #1a1f73
• 焦點背​​景顏色：白色#ffffff
• 焦點文字顏色：藍色 #1a1f73
• 字體：Alegreya Sans SC
• 風格：TT
• 尺寸：
  • 台式機：1vw
  • 平板電腦：3vw
  • 電話：4vw
• 圓角：5px所有角

圖片

也更改圖像設置。

• 圓角：5px
• 邊框樣式：四面八方
• 寬度：3px
• 顏色：藍色#1a1f73

評論計數文本

然後，評論計數文本。

• 標題級別：H3
• 字體：Alegreya Sans SC
• 字體樣式：TT
• 顏色：藍色#021859
• 尺寸：
  • 台式機：1.3vw
  • 平板電腦：3vw
  • 電話：5vw
• 線高：2 em

表單標題文本

另外，設置表單標題文本的樣式。

• 標題級別：H3
• 字體：Alegreya Sans SC
• 字體樣式：TT
• 顏色：藍色#021859
• 尺寸：
  • 台式機：1vw
  • 平板電腦：3vw
  • 電話：5vw
• 線高：2 em

元文本

移動到元文本和样式如下。

• 字體：拉托
• 顏色：#021859
• 尺寸：
  • 台式機：1vw
  • 平板電腦：2.7vw
  • 電話：3.5vw

評論文本

然後是評論文本。

• 字體：拉托
• 顏色：#021859
• 尺寸：
  • 台式機：0.9vw
  • 平板電腦：1.8vw
  • 電話：2.5vw

按鈕

不要忘記設計按鈕的樣式。

• 字體大小：
  • 台式機：0.9vw
  • 平板電腦：2.5vw
  • 電話：3.5vw
• 文字顏色：白色#ffffff
• 邊框半徑：5px
• 字體：拉托

間距

此外，評論模塊的間距。

• 最高保證金：
  • 桌面：-1vw
  • 平板電腦和手機：-3.3vw
• 頂部填充：
  • 台式機和平板電腦：3vw
  • 電話：4vw
• 底部填充：
  • 台式機：3vw
  • 手機和平板電腦：0vw
• 左右填充：
  • 台式機：2vw
  • 平板電腦：4vw
  • 電話：7vw

邊界

最後，在評論模塊中添加一些圓角。

• 邊框樣式：四邊2px
• 顏色：藍色#1a1f73

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

內容

轉到第 3 列和電子郵件選擇模塊。 給模塊一個標題。

• 文本：獲取定期更新
• 正文：段落文本

電子郵件帳戶

在電子郵件帳戶選項卡中設置您的電子郵件提供商。 選擇一個列表並添加您的 API 密鑰。

• 電子郵件提供商
  • 列表
  • API 密鑰

字段

然後，選擇僅使用單個名稱字段。

• 使用單一名稱字段：是

背景

為模塊添加白色背景。

• 背景顏色：白色

佈局

轉到設計 ta 並按如下方式更改佈局設置。

• 佈局：左側主體，右側表單
• 名稱全角：是
• 名字全角：是
• 姓氏全角：是
• 電子郵件全角：是

字段

然後，設置字段設置的樣式。

• 文字顏色：藍色 #1a1f73
• 背景顏色：白色#ffff
• 焦點文字顏色：藍色 #1a1f73
• 焦點背​​景顏色：白色#ffff
• 字體：拉托
• 字體大小：
  • 台式機：0.7vw
  • 平板電腦：2.2vw
  • 電話：3.2vw
• 字母間距：1px
• 圓角：所有角為 0.2vw
• 邊框樣式：所有四個邊
  • 寬度：2px
  • 顏色：藍色#1a1f73

標題文字

其次是標題文字。

• 標題級別：H4
• 字體：Alegreya Sans SC
• 重量：中等
• 字體樣式：TT
• 顏色：藍色#1a1f73
• 尺寸：
  • 台式機：1vw
  • 平板電腦：4vw
  • 電話：5vw
• 字母間距：1px

文章主體

還有正文。

• 字體：拉托
• 顏色：藍色#1a1f73
• 尺寸：
  • 台式機：0.7vw
  • 平板電腦：2.3vw
  • 電話：3vw

結果消息文本

不要忘記結果消息文本。

• 字體：拉托
• 顏色：藍色#1a1f73
• 尺寸：
  • 台式機：0.7vw
  • 平板電腦：2.3vw
  • 電話：3vw

按鈕

此外，樣式按鈕。

• 字體大小：
  • 台式機：0.7vw
  • 平板電腦：2.3vw
  • 電話：3vw
• 文字顏色：白色#ffffff
• 背景顏色：藍色 #51a2ff
• 字體：拉托

間距

調整間距。

• 頂部和底部填充：4vw

邊界

然後，添加一些圓角。

• 圓角：所有四個角均為 o.5vw

盒子陰影

最後，添加一個框陰影。

• 陰影：第三種選擇
• 模糊強度：80px
• 顏色：RGBA(0,0,0,0.13)

預覽

現在我們已經完成了所有步驟，讓我們最後看看本教程的結果。

桌面

藥片

電話

桌面

藥片

移動的

這是一個評論模塊包裝！

就是這樣！ 您剛剛在博客文章模板中添加了自定義評論部分。 我們希望這些設計能夠激發您自己的 Divi 主題構建器創作。 您可以在本教程開始時下載這兩種設計的 JSON 文件。 如果您有任何問題或建議，請隨時在下面的評論部分發表評論！