使用 Divi 以令人惊叹的移动设计展示您的最新博客文章

您在网站上展示博客文章的方式对访问者在您的网站上导航时遇到它们时的行为有很大影响。 为了帮助您发挥创意和效率，我们将向您展示如何以令人惊叹的方式展示您的最新博客文章。

我们将重新创建的示例在较小的屏幕尺寸上看起来特别好，同时在台式机和平板电脑上也保持良好的外观和感觉。 我们希望本教程能激发您创建自己的自定义最新博客文章设计。

让我们开始吧！

预览

在我们深入学习教程之前，让我们快速浏览一下不同屏幕尺寸的结果。

让我们开始重建吧！

添加新部分

渐变背景

创建一个新页面或打开一个现有页面并向其中添加一个常规部分。 打开设置，然后添加渐变背景。

• 颜色 1：#2e1b8f
• 颜色 2：#ffffff
• 梯度方向：90度
• 起始位置：53.3%
• 结束位置：53.3%

间距

然后，转到间距设置。 在这里，我们将缩小桌面上部分内容的大小，并在较小的屏幕尺寸上逐渐消除该空间。

• 上边距：100px
• 下边距：100px
• 左填充：26vw（桌面）、13vw（平板电脑）、0vw（手机）
• 右填充：22.8vw（桌面）、11.4vw（平板电脑）、0vw（手机）

添加新行

列结构

继续使用以下列结构向该部分添加新行：

第 2 列背景颜色

尚未添加任何模块，打开行设置并向第二列添加背景颜色。

• 第 2 列背景颜色：#f7f7f7

第 3 列背景颜色

也将相同的颜色添加到第 3 列的背景中。 我们对这两列使用相同的颜色来连接它们并使它们看起来像一个整体。 在这篇文章的后面，我们将使用它来操纵较小屏幕尺寸上的列宽。

• 第 3 列背景颜色：#f7f7f7

浆纱

接下来转到设计选项卡并打开大小设置。 在这里，我们将删除列之间的所有默认空间。

• 使这一行全宽：是
• 使用自定义装订线宽度：是
• 天沟宽度：1
• 均衡柱高：是

展示

现在，为了确保所有三列在较小的屏幕尺寸上彼此相邻，我们需要向行的主要元素添加一行 CSS 代码。

display: flex;

将 Blurb 模块添加到第 1 列

选择图标

是时候开始添加模块了！ 从第 1 列中的 Blurb 模块开始，然后选择您选择的图标。

渐变背景

转到模块的背景设置并添加径向渐变背景。

• 颜色 1：#5000ff
• 颜色 2：RGBA(41,196,169,0)
• 渐变类型：径向
• 径向：中心
• 起始位置：28%
• 结束位置：28%

图标设置

继续转到设计选项卡并修改图标设置。

• 图标颜色：#ffffff
• 图像/图标放置：顶部
• 使用图标字体：是
• 图标字体大小：22px

间距

接下来添加一些自定义的顶部和底部填充。

• 顶部填充：20px
• 底部填充：10px

边界

并添加一个微妙的底部边框来完成 Blurb 模块设计。

• 底部边框宽度：1px
• 底部边框颜色：#ffffff
• 底部边框样式：虚线

将文本模块添加到第 1 列

添加内容

第一列中我们需要的下一个也是最后一个模块是文本模块。 添加一些您选择的内容。

文字设置

然后，转到设计选项卡并相应地修改文本设置：

• 文字字体：Didact Gothic
• 文字字体粗细：粗体
• 文字颜色：#ffffff

将文本模块添加到第 2 列

添加内容

进入第二列！ 在这里，我们唯一需要的模块是文本模块。 输入您选择的一些内容。

背景颜色

转到背景设置并添加完全白色的背景色。

• 背景颜色：#ffffff

文字设置

我们还通过修改设计选项卡中的文本设置来更改内容的外观。

• 文本字体：Source Serif Pro
• 文字字体粗细：粗体
• 文字颜色：#000000
• 文字大小：13px
• 文字方向：居中

浆纱

如前所述，我们正在操纵列结构以在较小的屏幕尺寸上创建自定义设计。 为此，您需要减小文本模块的宽度并确保它与列的左侧对齐。

• 宽度：60%
• 模块对齐：左

间距

接下来我们将添加一些自定义填充值。

• 顶部填充：57px
• 底部填充：57px
• 左填充：20px
• 右填充：20px

盒子阴影

伴随着微妙的盒子阴影。

• 框阴影模糊强度：80px
• 阴影颜色：rgba(0,0,0,0.23)

将文本模块添加到第 3 列

添加内容

转到下一列和最后一列。 添加带有博客文章 H3 标题和链接的文本模块。 在标题正下方的段落文本样式中添加帖子详细信息。

文字设置

转到文本模块的设计选项卡并修改文本设置。

• 文本字体：Source Serif Pro
• 文字颜色：#a8a8a8
• 文字大小：12px

H3 文本设置

继续更改 H3 文本设置。

• 标题 3 字体：Didact Gothic
• 标题 2 字体粗细：粗体
• 标题 3 文字大小：17px

间距

最后，我们需要添加一些自定义间距值。 您会注意到我们还在模块中添加了一些负的左边距。 这是在较小的屏幕尺寸上创建不同类型的列结构的最后一步。 因此，尽管列结构在技术上仍然相同，但我们结合了列背景、模块宽度和负左边距来创建不同外观的结果。

• 上边距：35px
• 左边距：-80px（桌面），-50px（平板和手机）
• 右填充：20px

克隆行两次

完成对行及其所有模块的修改后，您可以继续克隆整行，最多可复制多次，具体取决于您想要展示的最新博客文章的数量。

更改图标

更改每个副本的图标。

修改内容和链接

连同所涉及的内容和链接，您就完成了！

预览

现在我们已经完成了所有步骤，让我们最后看看不同屏幕尺寸的结果。

最后的想法

在这篇文章中，我们向您展示了如何创建令人惊叹的移动设计来展示您的最新博客文章。 我们逐步重新创建的设计主要适用于较小的屏幕尺寸，但在平板电脑和台式机上看起来也很棒。 如果您有任何问题或建议，请务必在下方评论区留言！