您在网站上展示博客文章的方式对访问者在浏览您的网站时遇到它们时的行为有很大影响。 为了帮助您发挥创造力和效率，我们将向您展示如何以令人惊叹的方式展示您的最新博客文章。
我们将重新创建的示例在较小的屏幕尺寸上看起来特别棒，同时在台式机和平板电脑上也保持良好的外观和感觉。 我们希望本教程能激发您创建自己的自定义最新博客文章设计。
让我们开始吧！
预览
在深入学习本教程之前，让我们快速浏览一下不同屏幕尺寸的结果。
让我们开始重建吧！
添加新部分
渐变背景
创建一个新页面或打开现有页面并向其中添加常规部分。 打开设置，然后添加渐变背景。
- 颜色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
克隆行两次
完成对行及其所有模块的修改后，您可以继续克隆整个行，根据需要多次克隆，具体取决于您想要展示的最新博客文章的数量。
更改图标
更改每个副本的图标。
修改内容和链接
连同所涉及的内容和链接，您就完成了！
预览
现在我们已经完成了所有步骤，让我们最终看看不同屏幕尺寸的结果。
最后的想法
在这篇文章中，我们向您展示了如何创建一个令人惊叹的移动设计来展示您的最新博客文章。 我们逐步重新创建的设计主要适用于较小的屏幕尺寸，但在平板电脑和台式机上看起来也很棒。 如果您有任何问题或建议，请务必在下面的评论部分发表评论！
