WordPress divi主题

使用模块背景通过 Divi 显示内联视差图像

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

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

使用 CSS 内联视差背景确实有助于增强您网站的外观和感觉,本教程就是一个完美的例子。 我们将使用多个模块背景来创建令人惊叹且连贯的结果,显示背景图像的多个部分。 您还可以免费下载 JSON 文件!

google广告开户

让我们开始吧。

预览

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

桌面

移动的

免费下载内联视差布局

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

订阅我们的 Youtube 频道

让我们开始重新创建

添加新部分

首先向您正在处理的页面添加一个新的常规部分。

内联视差

WordPress divi主题

添加新行

立柱结构

继续使用以下列结构添加新行:

第 1 列设置

间距

将顶部填充值添加到第一列。

  • 顶部填充:
    • 台式机:2vw
    • 平板电脑+手机:6vw

第 2 列设置

间距

也将顶部填充值添加到第二列。

  • 顶部填充:
    • 台式机:4vw
    • 平板电脑+手机:6vw

第 4 列设置

间距

跳过第 3 列并将一些间距值添加到第 4 列。

  • 顶部填充
    • 台式机:19vw
    • 平板电脑:0vw
    • 电话:1vw
  • 左右填充
    • 台式机和平板电脑:1vw
    • 电话:0vw

将第一个文本模块添加到第 1 列

添加H2含量

现在,将第一个文本模块添加到第 1 列。插入一些您选择的 H2 内容。

fiverr建站WordPress程序员

标题文字

转到设计选项卡并相应地更改 H2 文本设置:

  • 标题文本级别:H2
  • H2字体:EB Garamond
  • H2 字体样式:TT
  • H2 文字颜色:黑色#oooooo
  • H2 文字大小:
    • 台式机:3.1vw
    • 平板电脑:5.4vw
    • 电话:10vw
  • H2 线高:
    • 台式机 + 平板电脑:1.1em
    • 电话:1.3em

间距

然后,为模块添加一些间距。

  • 顶部填充:
    • 台式机:4vw
    • 平板电脑+手机:0vw
  • 左填充:
    • 台式机和平板电脑:1vw
    • 电话:2vw
  • 右填充
    • 台式机和平板电脑:1vw
    • 电话:0vw

将第二个文本模块添加到第 1 列

添加内容

现在,在第一个文本模块下方添加第二个文本模块。 插入一些段落内容。

独立站选品工具

文本

转到设计选项卡并更改文本设置,如下所示:

  • 文字字体:EB Garamond
  • 文字颜色:深灰色#3d3d3d
  • 字体大小:
    • 台式机:1vw
    • 平板电脑:2.2vw
    • 电话:3.8vw
  • 文字行高:1.8em

间距

接下来调整模块的间距设置。

  • 底部填充:
  • 左填充:
  • 右填充:
    • 台式机:1.3vw
    • 平板电脑+手机:1.7vw

高质量外链购买

将按钮模块添加到第 1 列

添加内容

要完成第一列,请添加一个按钮模块。 插入一些副本。

添加链接

也为按钮添加一个链接。

按钮

转到设计选项卡并相应地设置按钮设置的样式:

JasperAI 10000字免费额度试用
  • 按钮文字大小:
    • 台式机:1vw
    • 平板电脑:2vw
    • 电话:4vw
  • 按钮文字颜色:深灰色#3d3d3d
  • 按钮边框宽度:1px
  • 按钮字体:EB Garamond

间距

然后,调整按钮的间距设置。

  • 最高边距:
  • 底边距:

将第一个文本模块添加到第 2 列

添加内容

进入下一栏! 添加带有您选择的一些 H4 内容的文本模块。

WordPress备份工具updrafplus

背景

继续添加背景图像。 为桌面上传 CSS 视差背景图像,并在较小的屏幕尺寸(没有 CSS 视差)上使用常规图像。

  • 桌面背景:图片
  • 平板电脑+手机背景:图片

背景悬停

接下来,仅在悬停时添加渐变背景。

  • 背景悬停:颜色渐变
  • 颜色渐变 1:浅金黄色 #edba63
  • 颜色渐变 2:金黄色 #ed9d12
  • 渐变方向:23度
  • 在背景图像上方放置渐变:是

标题文字

转到设计选项卡并更改 H4 文本设置。

  • 文本标题级别:H4
  • H4字体:EB Garamond
  • H4 文字颜色:白色#ffffff
  • H4 文字大小:
    • 台式机:2.3vw
    • 平板电脑:4.5vw
    • 电话:8.5vw

间距

然后,调整间距。

  • 最高边距:
  • 顶部填充:
    • 台式机:15vw
    • 平板电脑:22vw
    • 电话:43vw
  • 底部填充:
  • 左右填充:
    • 台式机和平板电脑:1.5vw
    • 电话:5vw

边界

继续设置边框样式。

  • 圆角:1vw 所有角
  • 边框样式:所有边
  • 边框宽度:0.3vw
  • 边框颜色:白色#ffffff

变换比例悬停

通过在悬停时添加缩放效果来完成模块的设置。

  • 悬停时变换比例:102%

将第二个文本模块添加到第 2 列

添加内容

将第二个模块添加到第二列,其中包含您选择的一些 H4 内容。

背景

就像之前的文本模块一样,在桌面上添加 CSS 视差背景图像,在较小的屏幕尺寸上添加常规背景图像。

  • 桌面背景:图片
  • 平板电脑+手机背景:图片

背景悬停

也添加悬停渐变背景。

  • 背景悬停:颜色渐变
  • 颜色渐变 1:浅洋红色 #91463f
  • 颜色渐变 2:洋红色 #910400
  • 渐变方向:23度
  • 在背景图像上方放置渐变:是

标题文字

接下来为 H4 文本设置设置样式。

  • 文本标题级别:H4
  • H4字体:EB Garamond
  • H4 文字颜色:白色#ffffff
  • H4 文字大小:
    • 台式机:2.3vw
    • 平板电脑:4.5vw
    • 电话:8.5vw

间距

并修改间距设置。

  • 顶部填充:
    • 台式机:15vw
    • 平板电脑:21.1vw
    • 电话:43vw
  • 底部填充:
  • 左右填充:
    • 台式机和平板电脑:1.5vw
    • 电话:5vw

边界

也更改边框设置。

  • 圆角:1vw 所有角
  • 边框样式:所有边
  • 边框宽度:0.3vw
  • 边框颜色:白色#ffffff

变换比例悬停

最后但同样重要的是,为文本模块添加放大效果。

  • 悬停时变换比例:102%

将第 2 列的文本模块复制到第 3 列

复制和拖动文本模块

克隆两个文本模块并将它们放在行的第三列中。

调整第 3 列中的第一个文本模块

更改 H4 内容

打开第 3 列中的第一个重复文本模块并更改内容。

更改平板电脑和手机的背景

接下来在较小的屏幕尺寸上更改背景图像。

悬停时更改颜色渐变

继续更改渐变悬停中的颜色。

  • 颜色渐变1:玫瑰粉#cc9293
  • 颜色渐变 2:粉色 #cc9293

间距

最后调整间距如下。

  • 最高边距:
    • 平板电脑:-6.4vw
    • 电话:0vw

调整第 3 列中的第二个文本模块

更改 H4 内容

首先,改变内容。

更改平板电脑和手机的背景

然后,在较小的屏幕尺寸上更改背景图像。

悬停时更改颜色渐变

也改变渐变背景。

  • 颜色渐变1:软松#5c755c
  • 颜色渐变 2:松绿 #4D754D

将第一个文本模块添加到第 4 列

添加内容

转到第 4 列,添加一个文本模块。 插入您选择的一些 H3 内容。

标题文字

转到设计选项卡并更改 H3 文本设置,如下所示:

  • 标题文本级别:H3
  • H3 文字字体:EB Garamond
  • H3 字体样式:TT
  • H3 文字颜色:黑色#oooooo
  • H3 文字大小:
    • 台式机:3vw
    • 平板电脑:5vw
    • 电话:12vw
  • H3 线高
    • 台式机 + 平板电脑:1em
    • 电话:1.1em

将第二个文本模块添加到第 4 列

添加内容

在第一个下方添加另一个文本模块。 插入一些段落内容。

文本

转到设计选项卡并相应地更改文本设置:

  • 文字字体:EB Garamond
  • 文字颜色:深灰色#3d3d3d
  • 字体大小:
    • 台式机:1vw
    • 平板电脑:2.2vw
    • 电话:3.8vw
  • 文字行高:1.8em

间距

然后,调整间距。

  • 底部填充:
  • 左填充:0.9vw
  • 右填充:2.2vw

从第 1 列到第 4 列复制按钮模块

复制并拖动按钮模块

  • 复制第 1 列中的按钮模块。
  • 将其拖到文本模块下方的第 3 列。

间距

在复制的按钮模块中调整一些间距值,你就完成了!

  • 底边距:0vw
  • 左边距:
    • 台式机+平板电脑:0.7vw
    • 电话:0.9vw

预览

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

桌面

移动的

结论

在这篇文章中,我们向您展示了如何使用四个文本框创建内联视差设计,这些文本框显示同一图像的不同部分。 我们希望您喜欢这个设计,如果您有任何问题或建议,请务必在下面的评论部分发表评论!

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题