你在你的网站上展示博客文章的方式对你的访问者在浏览你的网站时的表现有很大的影响。为了帮助您获得创造性和有效性，我们将向您展示如何以惊人的方式展示您最新的博客文章。
我们将重新创建的示例在较小的屏幕大小上看起来特别棒，同时在桌面和平板电脑上也保持了良好的外观和感觉。我们希望本教程激励您创建您自己定制的最新博客文章设计。
我们开始吧！河东网站建设
预览
在我们开始本教程之前，让我们快速查看不同屏幕大小的结果。
我们重新开始吧！
增加新科
梯度背景
创建一个新页面或打开一个现有页面，并向其中添加一个常规部分。打开设置，然后添加渐变背景。
- 颜色1：#2e1b8f
- 颜色2：#ffffff河东网站建设
- 梯度方向：90德克
- 起始位置：53.3%
- 期末职位：53.3%
间距
然后，转到间隔设置。在这里，我们将缩小桌面上部分内容的大小，并在较小的屏幕大小上逐步消除该空间。
- 最高保证金：100便士
- 底限：100 px
- 左垫：26 vw(桌面)，13 vw(平板电脑)，0 vw(电话)河东网站建设
- 右垫：22.8vw(桌面)，11.4vw(平板电脑)，0vw(电话)
增加新行
柱结构
继续使用以下列结构向该节添加一个新行：
第2栏背景颜色
在不添加任何模块的情况下，打开行设置并向第二列添加背景色。
第3栏背景颜色
将同样的颜色添加到第3列的背景中。我们对这两列使用相同的颜色来连接它们，使它们看起来像一块。在后面的文章中，我们将使用它来操作较小屏幕大小上的列宽度。
上浆
下一步转到“设计”选项卡，打开调整大小的设置。在这里，我们将删除列之间的所有默认空间。
- 全宽行：是的
- 使用自定义水槽宽度：是
- 排水沟宽度：1
- 等分柱高：是
显示
现在，为了确保这三列在较小的屏幕大小上出现在一起，我们需要在行的主元素中添加一行CSS代码。
将Blurb模块添加到第1列
选择图标
该开始添加模块了！从列1中的Blurb模块开始，并选择您选择的图标。
梯度背景
转到模块的背景设置，并添加径向梯度背景。
- 颜色1：#5000 ff
- 颜色2：RGBA(41，196，169，0)
- 梯度类型：径向
- 径向：中心
- 起始位置：28%
- 期末职位：28%
图标设置
继续转到“设计”选项卡并修改图标设置。
- 图标颜色：#ffffff
- 图像/图标布局：顶部
- 使用图标字体：是的
- 图标字体大小：22 px
间距
添加一些自定义的顶部和底部填充下一步。
边界
并添加一个微妙的底部边框，以完成Blurb模块的设计。
- 底部边框宽度：1 px
- 底部边框颜色：#ffffff
- 底部边框样式：虚线
将文本模块添加到第1列
添加内容
第一列中我们需要的下一个也是最后一个模块是文本模块。添加一些你选择的内容。
文本设置
然后，转到Design选项卡并相应地修改文本设置：
- 文本字体：哥特式教学
- 文本字体权重：粗体
- 文本颜色：#ffffff
将文本模块添加到第2列
添加内容
进入第二列！在这里，我们只需要一个文本模块。输入您选择的一些内容。
背景色
移到背景设置并添加一个完全白色的背景色。
文本设置
我们还通过修改“设计”选项卡中的文本设置来更改内容的外观。
- 文本字体：源Serif Pro
- 文本字体权重：粗体
- 文本颜色：#000000
- 文本大小：13 px
- 文本定位：中心
上浆
如前所述，我们正在操作列结构，以便在较小屏幕大小上创建自定义设计。要做到这一点，您需要减少文本模块的宽度，并确保它与列的左边对齐。
间距
接下来我们要添加一些自定义填充值。
- 顶部填充物：57 px
- 底垫：57 px
- 左填充物：20 px
- 右垫：20 px
盒影
还有一个微妙的盒子阴影。
- 盒影模糊强度：80 px
- 阴影颜色：RGBA(0，0，0，0.23)
将文本模块添加到第3列
添加内容
接下来是下一篇也是最后一篇专栏。添加一个文本模块与H3标题的博客文章和链接。在标题下面的段落文本样式中添加文章的详细信息。
文本设置
转到文本模块的设计选项卡并修改文本设置。
- 文本字体：源Serif Pro
- 文本颜色：#a8a8a8
- 文本大小：12 px
H3文本设置
继续通过更改H3文本设置以及。
- 标题3字体：哥特式教学
- 标题2字体重量：粗体
- 标题3文本大小：17 px
间距
最后，我们需要添加一些自定义的间距值。您会注意到，我们还向模块添加了一些负的左边距。这是在较小屏幕大小上创建不同类型的列结构的最后一步。因此，虽然列结构在技术上仍然相同，但我们结合了列背景、模块宽度和左边框的负值来创建一个不同的结果。
- 最高保证金：35%
- 左边框：-80 px(桌面)，-50 px(平板电脑和手机)
- 右垫：20 px
克隆行两次
一旦您完成了对行及其所有模块的修改，您就可以继续复制整个行，最多复制一次，这取决于您想要的最新博客文章的数量。
改变图标
更改每个副本的图标。
修改内容和链接
随着内容和链接的参与，你就完成了！
预览
现在我们已经完成了所有的步骤，让我们最后看看不同屏幕大小上的结果。
