你想用博客模块创建一个博客页面吗 de 迪维？
通常每个 Divi 布局包都发布在 优雅的主题 提供博客布局，帮助您创建 您的博客 足够快。 但是您是否曾经想了解如何自己创建这些博客页面之一？
在本文中，我们将了解如何使用 Divi 的博客模块创建博客页面。 我们将逐步完成每个设置。
让我们开始吧！
概观
在开始之前，让我们先看看我们将要创建的内容的概述。
创建一个新的博客页面
建立新页面
首先，我们将创建我们的页面。 在 WordPress 仪表板中，单击 前往 > 添加.
给页面一个对你有意义的标题。
- 页面标题：关于 Divi 的博客
切换到 Divi Builder
点击页面中央的紫色按钮： 使用Divi Builder .
为博客页面标题添加一个部分
自定义部分
我们将从第一部分开始。 打开它们 截面参数 .
滚动到 丰 并将颜色更改为#f9f3fd。 输入博客作为管理员标签。 关闭部分设置。
- 背景：#f9f3fd
- 管理员标签：博客
创建博客页面标题
然后我们将添加一个 线 为标题。 选择绿色图标并选择单列行。
然后添加一个 文本模块 在线。
自定义博客标题文本模块
打开它们 文本模块参数 并选择 H1。 添加标题我们的博客。
- 字体：标题 1
- 文字：我们的博客
然后去样式选项卡 并将对齐方式设置为居中。 对于 H1 标题文本，选择 Cormorant Infant 作为字体并将其设为粗体。
- 文本对齐方式：居中
- 标题文字：H1
- 标题字体：Cormorant Infant
- 柔光标题：粗体文本
将颜色设置为#442854，大小设置为 130px，行高设置为 0,8em。
- 颜色：#442854
- 桌面文字大小：130px
- 行高：0,8em
创建最新文章和号召性用语部分
我们的部分包括最新文章和选择加入的电子邮件。
添加新行 在我们的第一行下，选择左侧 2/3 和右侧 1/3 的列设计。
打开它们 线路参数 通过单击齿轮图标。
选择样式选项卡, 滚动到 间距 并将 0px 添加到底部内边距。 关闭设置。
- 底部内边距：0px
添加和自定义特色博客文章模块
然后我们将添加一个 博客模块 . 这将包含我们的最后一篇文章。 单击新行左列中的灰色加号图标并添加博客模块。
包装内容
SOUS 包装内容 , 输入 1 作为帖子数。
- 职位数：1
分子
滚动到 分子 并取消选中作者和分页。 我们将其余部分保留为默认值。
- 显示作者：没有
- 显示分页：否
提供
然后选择 样式选项卡 并为布局选择全屏并关闭特色图像叠加。
- 型号：全屏
- 选定的图像叠加：禁用
标题文字
滚动到 标题文字 . 选择 H2 并选择 Cormoran Infant。 选择粗体并将颜色更改为#442854。
- 插入标题三：H2
- 字体标题：Cormorant Infant
- 柔光标题：粗体字
- 标题文字颜色：#442854
将字体大小设置为 30 像素。 将行高更改为 1.1em。
- 尺寸：台式机30像素，平板电脑20像素，手机18像素
- 标题行高：1,1 em
正文文本
然后向下滚动到 主体 . 字体选择 Cabin，颜色改为#442854，行高改为 1,8em。
- 警察部队：小屋
- 正文颜色：#442854
- 车身线高：1,8 em
文本元数据
然后向下滚动到 文本元数据 . 设置参数如下：
- 元数据字体：Cormorant Infant
- 元数据暗光：常规
- 元数据复制样式：无
- 元数据文本颜色：#442854
- 元数据文本大小：桌面 16 像素、平板电脑 15 像素、手机 14 像素
- 元数据行高：1,8 em
间距
然后向下滚动到 间距 并将上边距更改为 0vw。
- 最高边距：0vw
影盒
最后，向下滚动到 影盒 并禁用它。
- 影子盒：禁用
添加和自定义博客电子邮件文本模块
现在我们要移动到右列 通过电子邮件创建号召性用语 . 首先，在右栏中添加一个文本模块。 单击灰色加号图标并搜索文本。
包装内容
选择标题 2 并输入文本订阅我们的报价。
- 字体：标题 2
- 文本：订阅我们的优惠
标题文本
为 文本 标题，选择Center Alignment，选择H2，选择Cormorant Infant并将其设置为Bold。
- 文本对齐方式：居中
- 标题文字：H2
- 标题字体：Cormorant Infant
- 柔光标题：粗体
将颜色更改为#442854，大小更改为 32px，行高更改为 0,95em。
- 标题文字颜色：#442854
- 标题文本大小：32 像素
- 标题行高度：0,95 em
间距
最后，向下滚动到 间距 并在下边距添加 10 个像素。 关闭文本模块设置。
- 下边距：10px
添加和自定义博客电子邮件选项模块
然后我们去 创建 形式 电子邮件 . 在右栏中的文本模块下方添加一个电子邮件选项模块。
包装内容
首先，删除标题和正文。
- 标题：无
- 正文：无
滚动到 电子邮件帐户 并添加您的服务提供商。
然后向下滚动到 丰 并取消选择背景颜色。
- 使用背景颜色：否
冠军
前往 样式选项卡 并将字段背景颜色更改为 rgba(255,255,255,0)，将文本颜色更改为 #442854。
- 背景颜色字段：rgba(255,255,255,0)
- 文本颜色字段：#442854
向下滚动到 字体选项 并将字体更改为cabinet，将大小更改为16px，将行高更改为1,8em。
- 字体字段：小屋
- 文本大小字段：16 像素
- 字段行高：1,8 em
接下来，将字段的圆角调整为 32px，边框宽度为 2px，并将边框颜色更改为 #442854。
- 圆角矩形控件：32px
- 边框宽度字段：2px
- 边框颜色字段：#442854
按键
滚动到按钮并选择 为 Button 使用自定义样式 . 将大小更改为 18ps，将按钮颜色更改为白色，将按钮背景颜色更改为 #442854。
- 为按钮使用自定义样式：是
- 按钮文字大小：18 像素
- 按钮文字颜色：#ffffff
- 背景按钮：#442854
将边框半径更改为 50 像素，将字体更改为 Cormorant Infant，并将粗体设置为粗体。
- 边框半径按钮：50px
- 字体按钮：Cormorant Infant
- 柔光按钮：粗体字
最后，让我们添加一些边距。 为上边距输入 20px，为上边距和下边距输入 12px，为左右边距输入 32px。 关闭电子邮件选项设置。
- 上边距按钮：20 px
- 顶部和底部填充按钮：12 px
- 按钮左右内边距：32px
为博客文章列表添加新行
我们现在去 创建项目列表 的页面。 首先，在我们上一节的下方添加一个新的单列行。
线路设置
去 样式选项卡 并将 0px 添加到顶点内边距。 关闭线路设置。
- 内边距顶点：0px
将博客模块添加到您的行
添加一个 博客模块 通过单击灰色加号图标并单击博客添加到您的新行。
样式化博客文章提要
让我们更改博客页面提要。
博客提要内容
打开它们 博客模块设置 并输入 3 作为帖子数。 这使您可以选择屏幕上显示的帖子数量。
较小的数字，例如 3，可以让我们专注于最近的帖子并减小页面大小。 如果您不经常发帖或想要保持页面整洁，这是一个不错的选择。 如果您想专注于博客流量，则显示更多帖子（例如 6-9）是一个好主意。
- 帖子数：3
输入 1 作为偏移量。 这告诉 Divi 从第二篇博客文章开始，这会阻止我们显示已经在上面显示的博客文章中显示的同一篇文章。
- 后偏移数：1
分子
滚动到 分子 . 启用特色图片、日期、类别片段和分页。 禁用其余部分。
- 显示特色图片：是的
- 数据：是
- 类别：是的
- 摘录：是的
- 分页：是的
背景
访问 丰 并将网格图块背景颜色设置为 rgba(255,255,255,0)
- 网格网格平铺背景颜色：rgba (255,255,255,0)
布局和覆盖
然后去 样式选项卡 . 将布局设置为网格。 我们为上面的博客文章选择了全角布局。 我们将为此博客提要使用网格布局，这是默认选项。 禁用特色图像叠加。
- 布局：网格
- 选定的图像叠加：禁用
标题文字
为 标题文字 , 选择 H2。 选择 Cormorant Infant，将其设置为粗体并输入 #442854 作为颜色。
- 插入标题三：H2
- 字体标题：Cormorant Infant
- 柔光标题：粗体字
- 标题文字颜色：#442854
选择 20px 作为文本大小。 将行高设置为 1,1 em。
- 标题文字大小：桌面20px
- 标题行高：1,1 em
正文文本
滚动到 主体 并选择客舱。 将颜色设置为#442854。
- 警察总队：客舱
- 正文颜色：#442854
将行高设置为 1,8 em。
- 线高：1,8 em
文本元数据
滚动到 文本元数据 并选择鸬鹚婴儿。 将重量设置为正常，样式设置为无，颜色设置为 #442854。
- 元数据字体：Cormorant Infant
- 元数据暗光：常规
- 元数据复制样式：无
- 元数据文本颜色：#442854
- 元数据文本大小：桌面 16px，平板电脑 15px，手机 14px
- 元数据行高：1,8 em
分页文字
现在到 分页 . 对于字体选择 Cormorant Infant，选择粗体并将颜色更改为 #442854。
- 字体显示分页：Cormorant Infant
- 显示寻呼柔光：粗体
- 文本颜色显示分页：#442854
间距
然后我们将继续 间距 并在顶部添加 0vw 边距。 这可以防止我们的模块与前一个模块重叠。
- 最高边距：0vw
边框
滚动到 边框 并为所有四个角输入 0px。 这给了我们卡片的方形形状。
- 圆角矩形网格布局：0px
影盒
最后，向下滚动到 盒子阴影 并禁用它。 关闭博客设置。 博客部分已完成。
- 影盒：无
将新的“号召性用语”部分添加到博客页面
然后我们去 创建“号召性用语”部分 页面的。 此部分包括视差全屏背景图像， CONTACT 和社会关注链接。
添加新部分
点击蓝色图标即可 添加一个新的常规部分 在页面的底部。
- 部分：常规
设置号召性用语部分的样式
打开它们 截面参数 通过单击其齿轮图标。
背景
滚动到 丰 并选择图像选项卡。 单击标有背景图像的灰色图标。
从媒体库中选择全屏图像。 选择使用视差效果，然后选择 CSS 作为视差方法。
- 背景图像
- 使用视差效果：是
- 视差方法：CSS
向下滚动到管理员标签并在字段中输入“页脚”。 这将帮助您跟踪部分。
- 管理员标签：页脚
然后去 样式选项卡.
- 内部边距：10vw（顶部和底部）
添加新行
单击绿色加号图标，然后 将一行添加到单个列 对于我们的内容。
浆纱
打开它们 线路参数 并转到样式选项卡。
- 最大宽度：320 像素
标题文本模块
我们的号召性用语部分带有标题。 为了创造这个， 添加文本模块 在线。
自定义标题文本
添加您的标题并将字体更改为标题 3。
- 字体：标题 3
- 文字：关于 Divi
标题文本
去 样式选项卡 并滚动到 字幕文字 . 选择居中对齐，选择 H3，选择 Cormorant Infant，将其设置为粗体并选择白色作为颜色。
- 文字对齐：居中
- 标题文字：H3
- 标题字体：Cormorant Infant
- 柔光标题：粗体
- 标题文本颜色：#ffffff
- 标题文本大小：台式机 42 像素，平板电脑 20 像素，手机 16 像素
- 标题行高度：1,1 em
间距
最后，向下滚动到 间距 并在下边距添加 10 个像素。 关闭模块设置。
- 下边距：10px
地址的文本模块
添加另一个文本模块 为您的实际地址。
设置物理地址文本模块的样式
地址文本
将您的地址添加为段落文本。
- 风格：段落
- 文字：你的地址
段落文本
然后转到文本中的 样式选项卡 并选择 Cormorant Infant，半粗体，并将其设置为白色。
- 字体：Cormorant Infant
- 柔光文字：半粗体
- 文字颜色文字：#ffffff
- 文字文字大小：桌面28px，平板20px，手机16px
- 文字行高：1,2 em
添加模块在社交网络上关注我们
我们的最后一个模块是模块 在社交媒体上关注我们 . 将其添加到行的底部。
风格化在社交媒体模块上关注我们
我们将从 样式选项卡 这次。 选择模块对齐的中心并将图标颜色更改为 #442854。
- 模块对齐：中心
- 图标颜色：#442854
滚动到 BORDure 并为圆角添加 23 个像素。
- 圆角矩形：32px
添加和自定义您的社交网络
现在回到 内容选项卡 并添加您想要包含的任何社交网络。 单击灰色加号图标。
打开它们 每个社交网络的设置 ，选择网络并将链接添加到您的帐户。 将背景颜色设置为#f9f3fd。 关闭子模块设置。
- 社交网络：您的选择
- 帐户链接 URL：您的链接
- 背景颜色：#f9f3fd
保存博客页面并退出可视化构建器
enfin， 保存页面 在右下角并选择 退出可视化生成器 在页面顶部。 你已经准备好看到你的作品了。
博客页面预览
这是我们的结果。
立即下载 DIVI！！！
结论
所以 ！ 这是我们对如何使用 Divi 创建博客页面的看法。
Divi Builder 可以轻松创建有趣的布局，并且有多种方法可以使用每个模块。 正如本教程所探讨的，可以在同一页面上使用多个版本的博客模块以不同的方式显示博客提要。
如果您有任何疑虑或建议，请联系我们 评论部分 讨论一下。
但是，您也可以咨询 我们的资源，如果您需要更多的元素来执行创建Internet网站的项目，请参考我们关于 WordPress博客创建 或者那个 Divi：有史以来最好的WordPress主题.
但与此同时， 在您不同的社交网络上分享此文章.
...
