通常,每个主题包都包含一个博客布局,使您能够快速启动并运行您的博客。 但是,您是否曾经想知道其中一个博客页面是如何构建的?? 在这篇文章中,我们将利用其中一种博客布局来演示如何使用Divi的博客模块来创建博客页面。 我们将逐步引导您完成每个设置。

让我们开始吧!
设计预览

创建页面
首先,转到 Pages>Add New 并创建一个新页面。

因此,为页面提供一个听起来合理的标题。 我正在使用布局包中的页面名称 Acai 博客页面。 在右侧边栏中,选择所需的任何页面属性。 我只保留属性。
创建令人惊叹的网站
使用最好的免费页面构建器 Elementor
现在开始- 页面标题:Acai 博客页面

移至 Divi Builder
之后,您需要切换到 Divi Builder。 通过单击页面中心的紫色按钮来使用 Divi Builder。 这会将您带到前端,Divi Builder 将在此处处于活动状态,为我们开始构建页面做好准备。

带标题的英雄部分
风格英雄部分
我们将从第一部分开始。 打开该部分的选项。

在部分设置中进行一些更改。
- 背景:#f9f3fd
- 管理员标签:博客

博客页面标题
之后,我们将为标题创建一个 Row。 选择带有单列的绿色信号的行。

然后添加一个文本模块。

样式化文本模块
打开文本设置并对 H1 标题进行以下更改。
- 字体:标题 1
- 文字:我们的博客

现在移动到设计选项卡并在下面进行这些更改。
- 文本对齐:居中
- 标题文字:H1
- 字体:Cormorant Infant
- 重量:粗体

还可以更改字体颜色、大小和高度。
- 颜色:#442854
- 桌面文字大小:130px
- 行高:0.8em

现在更改标题文本大小。
- 平板文字大小:60px

现在更改电话图标大小。
- 电话:40像素

创建最新的博客文章和 CTA
我们的英雄区域以最新的帖子和选择加入的电子邮件表格为特色。 在我们的第一行下方创建一个新行,并选择左侧三分之二和右侧三分之一的列设计。

从设计选项卡打开行设置并更改间距。
- 底部填充:0px

特色博客文章模块
之后,我们将提供一个博客模块。 本节将包含我们最新的内容。 通过单击新行左列中的灰色添加图标来添加博客模块。

在内容设置下,为帖子计数块输入 1。
- 帖子数:1

元素
在内容选项卡上,向下移动到元素部分并取消选中作者和分页。
- 显示作者:没有
- 显示分页:否

布局
在设计选项卡上,更改布局和覆盖设置。
- 布局:全宽
- 特色图像叠加:关闭

标题文字
现在根据以下设置更改标题文本。
- 标题级别:H2
- 字体:Cormorant Infant
- 重量:粗体
- 颜色:#442854

另外,更改字体大小。
- 尺寸:30px 桌面,20px 平板,18px 手机
- 标题行高度:1.1em

主体
对于正文文本设置,更改以下内容。
- 字体:小屋
- 颜色:#442854
- 行高:1.8em

元文本
此外,对元文本进行一些更改。
- 字体:Cormorant Infant
- 重量:常规
- 风格:无
- 颜色:#442854
- 尺寸:桌面16px,平板15px,手机14px
- 行高:1.8em

间距
现在添加一些间距。
- 最高边距:0vw

盒子阴影
最后,禁用盒子阴影。
- 盒子阴影:禁用

博客电子邮件文本模块
我们现在将移动到右栏并开发电子邮件 CTA。 首先,将一个文本模块插入右列。 选择灰色的 + 图标并输入文本。

内容
选择标题 2 并输入一些吸引人的文本。
- 字体:H2
- 文本:订阅优惠 & 食谱

标题文字
对于标题文本,选择中心对齐,选择 H2,选择 Cormorant Infant,并将其设置为粗体。
- 文本对齐:居中
- 标题文字:H2
- 字体:Cormorant Infant
- 重量:粗体

- 颜色:#442854
- 尺寸:32px
- 行高:0.95em

间距
最后,为项目添加一些底部边距。
- 下边距:10px

博客电子邮件选项模块
现在将电子邮件选项模块添加到右列。

内容
删除标题和正文。
- 标题:无
- 正文:无

向下滚动到电子邮件帐户并添加您的服务提供商。

接下来,滚动到背景并取消选择它。
- 使用背景颜色:否

字段
转到设计选项卡并更改字段背景颜色。
- 背景颜色:rgba(255,255,255,0)
- 字段文本颜色:#442854

向下滚动到字体选项并进行以下更改。
- 字段字体:小屋
- 尺寸:16 像素
- 行高:1.8em

- 字段圆角:32px
- 边框宽度:2px
- 边框颜色:#442854

按钮
向下滚动到 Button 并选择为 Button 使用自定义样式。
- 为按钮使用自定义样式:是
- 尺寸:18 像素
- 颜色:#ffffff
- 按钮背景:#442854

- 边框半径:50px
- 字体:Cormorant Infant
- 重量:粗体

let’s 添加一些按钮边距和填充。
- 按钮上边距:20px
- 顶部,底部填充:12px
- 左,右填充:32px

为博客列表添加新行
让我们在 hero 部分下添加一个单列行。

博客列表行设置
转到设计选项卡并调整填充。
- 顶部填充:0px

博客模块到您的行
将博客模块添加到您的新行。

样式化博客提要
博客提要内容
在博客模块的设置中输入 3 作为帖子计数。 您可以使用帖子计数选项自定义屏幕上显示的帖子数量。
较小的数字(例如 3)使我们能够专注于最新的帖子,同时保持页面的可管理性。 如果您不更新太多或希望保持页面清洁,这是一个很好的选择。 如果您想专注于博客提要,增加显示的帖子数量(例如 6-9)是一个很好的建议。
- 帖子数:3

输入 1 作为偏移量。 这指示 Divi 从第二篇博客文章开始,阻止我们显示与该文章上方突出显示的博客文章行相同的内容。
- 后偏移数:1

元素
现在向下移动到元素并更改以下内容。
- 显示特色图片:是的
- 日期:是
- 类别:是的
- 摘录:是的
- 分页:是的

背景
转到背景并设置网格平铺背景。
- 网格平铺背景颜色:rgba(255,255,255,0)

布局和叠加
然后在设计选项卡上。 保持网格布局。 对于上面这篇精选的博客文章,我们使用了全角布局。 对于此博客提要,我们将使用默认的网格布局。 禁用特色图像的叠加。
- 布局:网格
- 特色图像叠加:关闭

标题文字
对于标题文本,选择 H2 并进行一些基本更改,如下所示。
- 标题级别:H2
- 字体:Cormorant Infant
- 重量:粗体
- 颜色:#442854

- 尺寸:20px 桌面,18px 手机
- 行高:1.1em

主体
滚动到正文文本并选择客舱。
- 字体:小屋
- 颜色:#442854
- 行高:1.8em

元文本
向下滚动到元文本并进行以下调整。
- 字体:Cormorant Infant
- 重量:常规
- 风格:无
- 颜色:#442854
- 尺寸:16px 桌面,15px 平板,14px 手机
- 行高:1.8em

分页文本
现在,让 ’s 移动到分页文本。
- 字体:Cormorant Infant
- 重量:粗体
- 颜色:#442854

间距
接下来,转到间距并将 0vw 边距添加到顶部。
- 最高边距:0vw

边界
滚动到边框并为所有四个角输入 0px。
- 圆角:0px

盒子阴影
最后,滚动到Box Shadow 并禁用它。
- 盒子阴影:无

博客页面的 CTA 部分
接下来,我们将创建页面的 CTA 部分。 此部分包括全角视差背景图像、联系信息和社交关注链接。

添加新部分
单击蓝色图标以在页面下方添加新的常规部分。
- 部分:常规

样式化 CTA 部分
单击齿轮图标并打开Section’s 设置。

添加背景图像。

从媒体库中选择全角图像。
- 背景图片
- 使用视差效果:是
- 视差方法:CSS

转到管理员标签并选择页脚。
- 管理员标签:页脚

移动到设计选项卡并添加一些间距。
- 填充:10vw(顶部和底部)

新的 CTA 行
将单列行添加到该部分。
- 行:一列

浆纱
导航到行首选项中的设计选项卡。 从最大宽度下拉菜单中选择平板电脑图标并输入 320px。 这将自动反映在手机的设置中。 关闭行配置。
- 最大宽度:320px 平板电脑

标题文本模块
添加一个文本模块来介绍 CTA。

标题文本样式
添加您的标题并将字体更改为 H3。
- 字体:H3
- 正文:健康从这里开始

标题文字
转到设计选项卡并向下滚动到标题文本。
- 对齐方式:中心
- 标题文字:H3
- 字体:Cormorant Infant
- 重量:粗体
- 颜色:#ffffff

- 尺寸:42px 桌面,20px 平板,16px 手机
- 行高:1.1em

间距
最后,滚动到间距并添加一些底部边距。
- 下边距:10px

地址
要在 CTA 下显示物理地址,请添加一个文本模块。

样式化地址
地址文本
将您的地址添加为段落文本。
- 风格:段落
- 文字:你的地址

段落文本
接下来,转到“设计”选项卡中的“文本”并更改以下设置。
- 字体:Cormorant Infant
- 重量:半粗体
- 颜色:#ffffff

- 尺寸:28px 桌面,20px 平板,16px 手机
- 行高:1.2em

社交媒体关注模块
最后一个模块是社交媒体关注模块。 将其添加到行的底部。

社交媒体关注模块样式
这次转到设计选项卡并进行这些更改。
- 模块对齐:中心
- 图标颜色:#442854
- 圆角:23px

社交网络图标样式
打开设置并添加您所需的社交媒体平台并添加链接。
- 社交网络:您的选择
- 帐户链接 URL:您的链接
- 背景颜色:#f9f3fd

我们完成了。 保存设计并退出可视化构建器。
最终预览
这是我们的最终设计。

最后的想法
我们对如何使用Divi创建博客页面的检查到此结束。 Divi Builder 使构建视觉上吸引人的布局变得简单,并且每个模块都可以以多种方式使用。 如本文所示,可以在同一页面上使用博客模块的多个实例,以便以多种方式显示博客提要。