如何在博客帖子模板中设置 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 文件。 如果您有任何问题或建议，请随时在下面的评论部分发表评论！