WordPress divi主题

为您的 Divi 博客文章下载 5 种充满活力的背景样式

by | May 18, 2022 | Divi主题使用教程 | 0 comments

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

我们在这里有另一个免费的 Divi 下载! 这一次,我们将向您介绍 5 种不同的充满活力的背景样式,您可以将它们用于您网站上的博客文章。 您可以在同一个网站上轻松组合这些背景样式,为您发布的各种博客文章提供不同的外观和感觉。 除了免费为您提供所有这些充满活力的背景样式之外,我们还将指导您创建博客文章模板,您可以将其重复用于您在网站上创建和发布的任何博客文章。

google广告开户

让我们开始吧!

预览

让我们先来看看 5 种不同的结果以及不同屏幕尺寸上的视图。

充满活力的背景风格

免费下载充满活力的背景样式

要掌握充满活力的背景样式,您首先需要使用下面的按钮下载它们。 要访问下载,您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者,您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包! 如果您已经在列表中,只需在下面输入您的电子邮件地址,然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

调色板

对于每种背景样式,您可以在下面找到一个调色板。 我们将在整个教程中参考颜色编号,因此选择您要创建的背景样式和调色板并从那里开始。

调色板 #1

充满活力的背景风格

  • 颜色#1:#886DFC
  • 颜色#2:#7C56BD
  • 颜色#3:#372C66

调色板 #2

充满活力的背景风格

  • 颜色#1:#42bcb2
  • 颜色#2:#9CFEF0
  • 颜色#3:#a8baf7

调色板#3

充满活力的背景风格

  • 颜色#1:#96b2ff
  • 颜色#2:#d999ff
  • 颜色#3:#357ff4

调色板#4

充满活力的背景风格

WordPress divi主题
  • 颜色#1:#B981FF
  • 颜色#2:#24EEFA
  • 颜色#3:#be7bf2

调色板 #5

充满活力的背景风格

  • 颜色#1:#e02b20
  • 颜色#2:#f6ff56
  • 颜色#3:#db241e

创建新帖子

添加详细信息并启用 Divi Builder

让我们从头开始! 将新页面添加到您的 WordPress 网站,添加页面标题,上传特色图片并启用 Divi Builder。

充满活力的背景风格

分页设置

在切换到 Visual Builder 之前,对您所在页面右上角的 Divi 页面设置框进行一些更改。 这将确保您完全使用 Divi 创建博客文章布局。 如果您打算在您的网站上重复使用该模板,则必须记住每次创建新博客文章时都要修改这些设置。

  • 页面布局:全角
  • 帖子标题:隐藏

充满活力的背景风格

切换到可视化生成器

您现在可以切换到 Visual Builder。

充满活力的背景风格

完成后,屏幕上将出现三个选项。 单击蓝色按钮从头开始构建。

充满活力的背景风格

创建博客文章设计

添加第 1 节

背景图片

让我们开始创建模板吧! 从顶部的空白部分开始。 打开部分设置,转到背景设置并上传选择的背景样式。 您可以通过访问找到所有 5 种变体 下载的文件夹>英雄.

fiverr建站WordPress程序员
  • 背景图片尺寸:封面
  • 背景图像位置:顶部中心

充满活力的背景风格

间距

要让背景图像完全显示,请使用该部分的顶部填充。

充满活力的背景风格

添加第 2 节

间距

在您刚刚添加的部分正下方,继续添加另一个。 打开设置,转到间距设置并删除所有默认的自定义填充。

  • 顶部填充:0px
  • 底部填充:0px

充满活力的背景风格

独立站选品工具

添加新行

立柱结构

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

充满活力的背景风格

间距

删除下一节底部的所有默认填充。

充满活力的背景风格

添加帖子标题模块

元素

是时候开始添加模块了! 在这一行中,我们只需要一个帖子标题模块。 添加后,选择要显示的元素。

高质量外链购买

充满活力的背景风格

标题文本设置

然后,转到标题文本设置并进行一些更改。

  • 标题字体:Abril Fatface
  • 标题文本对齐方式:居中
  • 标题文字大小:73px(桌面)、50px(平板电脑)、40px(手机)

充满活力的背景风格

元文本设置

元文本设置也需要修改。

  • 元文本对齐:居中
  • 元文本颜色:颜色 #1(在调色板中查找)
  • 元文本大小:18px
  • 元线高度:3em

充满活力的背景风格

JasperAI 10000字免费额度试用

添加第 3 节

背景图片

此页面的最后一部分将包含博客文章内容和 CTA。 首先上传您选择的背景样式。 您可以通过转到 下载的文件夹 > 正文. 上传背景图像后,对背景设置进行一些更改。

  • 背景图像尺寸:实际尺寸
  • 背景图像位置:顶部中心
  • 背景图像重复:空间

充满活力的背景风格

间距

删除此部分的所有默认顶部填充以消除此部分和上一个部分之间的所有空白。

充满活力的背景风格

添加第 1 行

立柱结构

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

WordPress备份工具updrafplus

充满活力的背景风格

背景颜色

将稍微透明的背景颜色添加到下一行。

  • 背景颜色:rgba(255,255,255,0.86)

充满活力的背景风格

间距

在这里也删除默认的自定义填充。

  • 顶部填充:0px
  • 底部填充:0px

充满活力的背景风格

添加文本模块

添加内容

继续将文本模块添加到您添加的行。 在这里,您可以添加所需的所有博客文章内容,并使用不同的文本样式来获得所需的结果。 在下面的打印屏幕中,我们使用了标题和段落。

充满活力的背景风格

文字设置

转到文本设置并在那里进行一些更改。

  • 文字大小:21px(桌面)、18px(平板电脑)、15px(手机)
  • 文本行高:2em

充满活力的背景风格

标题设置

标题文本设置也需要修改。

  • 标题字体:Abril Fatface
  • 标题文字大小:46px(桌面)、40px(平板电脑)、30px(手机)
  • 标题线高度:1.5em

充满活力的背景风格

间距

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

  • 上边距:80px
  • 底部填充:80px
  • 左填充:80 像素(桌面)、40 像素(平板电脑)、30 像素(手机)
  • 右内边距:80 像素(桌面)、40 像素(平板电脑)、30 像素(手机)

充满活力的背景风格

盒子阴影

最后,向文本模块添加一个微妙的框阴影。 这将为博客文章模板带来一些深度。

  • 盒子阴影模糊强度:80px
  • 盒子阴影传播强度:-14px

充满活力的背景风格

添加第 2 行

立柱结构

继续使用一列在前一行的正下方添加一个新行。

充满活力的背景风格

间距

删除该行的所有默认自定义填充。

  • 顶部填充:0px
  • 底部填充:0px

充满活力的背景风格

添加电子邮件选项模块

添加内容

然后,添加您的 CTA。 我们正在使用电子邮件选择模块。 添加后,修改内容。

充满活力的背景风格

字段

我们仅在此模块中使用电子邮件地址,因此请继续并在字段设置中禁用名字和姓氏。

充满活力的背景风格

渐变背景

继续向电子邮件选择模块添加渐变背景。

  • 颜色 1:颜色 #2(在调色板中查找)
  • 颜色 2:颜色 #3(在调色板中查找)
  • 渐变方向:144度

充满活力的背景风格

布局

然后,更改模块的布局。

  • 布局:正文在上,表格在下

充满活力的背景风格

文字设置

更改文本设置。

  • 文本方向:中心
  • 文字颜色:浅色

充满活力的背景风格

标题文本设置

接下来,打开标题文本设置并进行一些更改。

  • 标题字体:Abril Fatface
  • 标题文字大小:54px(台式机)、40px(平板电脑)、35px(手机)

充满活力的背景风格

按钮设置

修改按钮外观。

  • 按钮边框宽度:0px
  • 按钮边框半径:0px
  • 字体样式:下划线
  • 下划线样式:双

充满活力的背景风格

间距

最后,在电子邮件选项模块的间距设置中使用不同的自定义填充值。

  • 上边距:100px
  • 底部填充:100px
  • 左填充:300px(桌面),50px(平板电脑和手机)
  • 右侧内边距:300 像素(桌面)、50 像素(平板电脑和手机)

充满活力的背景风格

将布局保存在 Divi 库中以供重复使用

剩下要做的就是将布局保存在 Divi 库中。 这样,您也可以将其重用于其他页面! 创建新页面时,您还可以将博客文章作为现有页面访问。

充满活力的背景风格

预览

现在我们已经完成了所有步骤,让我们最后看看我们创建的结果。

充满活力的背景风格

最后的想法

在这篇文章中,我们与您分享了一些令人惊叹且充满活力的背景样式,您可以免费下载这些样式。 最重要的是,我们还指导您从头开始创建博客文章模板。 随意将这些背景样式用于您自己设计的博客文章模板。 如果您有任何问题或建议,请务必在下面的评论部分发表评论!