spot_img
HomeDivi主题使用教程使用专为网格布局设计的背景升级您的 Divi 博客页面

使用专为网格布局设计的背景升级您的 Divi 博客页面

为您的博客创建网格布局是组织帖子的好方法。 Divi 的博客模块使这一切变得非常容易。 只需几秒钟,您就可以将一个正常运行的博客网格布局部署到您的页面。 您甚至可以利用许多设计设置以多种方式自定义博客网格的外观。 但今天,我要把事情提升到另一个层次。

在本教程中,我将向您展示如何创建多个背景层来为您的三列博客网格构建美观且对称的设计。 希望您可以使用这些设计技术来创建一个保证给人留下深刻印象的博客页面。

让我们开始吧。

订阅我们的 Youtube 频道

谷歌SEO优化服务

网格布局设计的先睹为快

这是设计的先睹为快。

博客网格布局

入门

对于本教程,您只需要 Divi。 安装并激活 Divi 主题后,创建一个新页面并为您的页面命名。 然后部署 Visual Builder。 选择“选择预制布局”,然后将治疗师博客页面布局上传到您的页面并发布。

博客网格布局

确保您至少有 6 篇包含内容和特色图片的博客文章。 如果不这样做,博客文章将不会显示在页面上。

WordPress divi主题

现在您可以开始编辑了。

将第一个背景层添加到该部分

自定义设计将添加到包含博客模块的布局的第二部分。 要创建我们的第一个背景层,我们将按如下方式设置部分设置的样式:

背景颜色:#5873dd
自定义填充(桌面):4vw Top,4vw Bottom,7vw Left
自定义填充(平板电脑):0vw 左

博客网格布局

自定义 7vw 左填充基本上偏移了部分(行)的内容以获得独特的外观。 如果你想要一切都很好并且以你的设计为中心,你可以忽略它。

将第二个和第三个背景层添加到行中

第二和第三个背景层将通过向整行添加背景颜色然后向行内的列添加背景渐变来创建。

打开行设置并更新以下内容:

背景颜色:rgba(255,255,255,0.3)
第 1 列背景左侧颜色:rgba(255,255,255,0.0)
第 1 列背景右侧颜色:rgba(255,255,255,0.3)
列梯度方向:90deg
列起始位置:列起始位置:33.3%
列结束位置:0%

博客网格布局

请注意,我使用的是不透明度为 30% 的白色,以创建一致程度的白色叠加颜色,让蓝色部分背景显示出来。 当每种颜色重叠时,用户会看到蓝色部分背景的亮度降低 30%。 这样,如果您想更改布局的配色方案,您只需更改部分背景颜色即可。

H10的年终大促

将列渐变起始位置设置为 33.3% 可确保渐变在我的博客网格的第一列和第二列之间正确划分。 但这最初看起来并不正确,因为我们仍然需要为我们的行提供 100% 的自定义宽度等等。

自定义宽度:100%
排水沟宽度:4
自定义填充:顶部 4%,底部 4%

自定义填充垂直暴露图层以添加到整体设计中。

保存设置。

将第四个背景层添加到我们的博客模块

这是一切都准备就绪的地方。 第四层也是最后一层将是添加到我们博客模块的背景渐变。 然后加上精确的间距,博客模块将与我们的背景层完美对齐。 我还将对博客卡片添加一些样式调整,以添加一些最后的润色。

转到博客模块设置并更新以下内容:

网格图块背景颜色:rgba(255,255,255,0.7)

要添加背景渐变,您可以转到行设置并复制第 1 列背景渐变,然后返回博客设置并使用右键单击选项将其粘贴。

然后更新以下内容:

起始位置:66.6%

高质量外链购买

博客网格布局

自定义边距:顶部 4%,底部 4%
自定义填充:顶部 4%、底部 4%、左侧 4%、右侧 4%

博客网格布局

如您所见,始终使用 4% 的长度值来为我们的设计提供相等的间距。 这个 4% 的价值远比看上去的要多。 如果您还记得,我们将我们的行设置为具有 4 的自定义间距宽度。在 Divi 中,如果您将具有网格布局的博客模块添加到具有 4 间距宽度的行,您的博客网格列将水平分隔 8%保证金。 因此,向模块添加 4% 的左右填充将创建我们需要的精确间距。

至此,我们完成了背景设计。 看看我们到目前为止有什么。

JasperAI 10000字免费额度试用

博客网格布局

现在我们需要做的就是对博客模块添加一些最后的润色。

最后润色

在博客模块设置的设计选项卡下,更新以下内容:

正文颜色:rgba(0,0,0,0.8)
元文本颜色:rgba(0,0,0,0.5)
分页字体样式:下划线
分页下划线颜色:rgba(166,221,217,0.39)
分页文字颜色:#ffffff
分页文本大小:3vw(台式机)、40px(平板电脑)、30px(智能手机)

博客网格布局

如果你想让你的设计更有质感,你可以为你的部分添加分隔背景。

分隔线顶部:见截图
分频器颜色:rgba(88,115,221,0.5)
分频器高度:32vw
分频器水平重复:0.3X

博客网格布局

分隔线底部:见截图
分频器颜色:rgba(88,115,221,0.5)
分频器高度:43vw
分频器水平重复:0.3X

博客网格布局

WordPress花园粉丝福利

想做跨境电商独立站但是没什么钱?可以免费试用Shopline智能建站工具,一个月都不要一顿火锅的钱!(这里就可以在线申请!) 或者扫描下方二维码
shopline

现在看看最终结果……

博客网格布局

响应式设计

构成网格列的层在所有桌面浏览器尺寸上都完美缩放。

使用专为网格布局设计的背景升级您的 Divi 博客页面

虽然背景层不会针对平板电脑上的两列和智能手机上的一列进行调整,但结果仍然非常对称,并提供了一种效果很好的微妙的破碎网格设计。

这是它在手机上的样子……

博客网格布局

最后的想法

这种分层背景技术实际上是一种创建具有三列背景的印象的方法,而实际上只有一列(因为博客模块位于一列中)。 当然,这可以在博客模块级别的自定义 CSS 中完成,但我认为在 Divi Builder 上使用创造性的解决方案会更有帮助。 设计的变体也可以用作其他内容的背景。

我试图解释本教程中使用的一些样式背后的原因,但如果您有任何疑问,我会洗耳恭听。 而且,对于那些希望为您的博客网格布局增添趣味的人,希望这篇文章至少能为您提供一些设计技巧来做到这一点。

我期待在评论中收到您的来信。

干杯!

5分钟生成10篇英文软文article forge软件试用
siteground

【WordPress花园提醒您】如果想购买国外正版WordPress主题和插件,您需要一张VISA信用卡才能支付,这里我们推荐光大银行信用卡!赶快免费申请,别耽误了买插件哦!

guangda
WordPress花园官方账号
WordPress花园隶致力于为广大跨境电商和独立站爱好者提供优质的WordPress教程、Woocommerce教程、Facebook、Twitter、tiktok、Instagram教程和谷歌SEO教程等资料和对应的建站推广服务。关注‘哟派出海’公众号了解最新资讯。粉丝福利:Shopline免费独立站建设14天优惠 商务合作: [email protected]
RELATED ARTICLES