WordPress divi主题

使用 Divi 以令人惊叹的设计优雅地将您的副本隐藏在部分分隔线下方

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

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

Divi 的内置选项允许您将一种特定的设计设置用于多种目的,这反过来又有助于激发创造力。 今天,我们将以一种独特的方式使用部分分隔符来优雅地隐藏您网站的副本。 这是无需自定义代码即可向页面添加额外交互的好方法。 我们将从头开始重新创建一个漂亮的示例,您也可以免费下载该示例的 JSON 文件。

google广告开户

让我们开始吧!

预览

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

桌面

隐藏你的副本

移动的

隐藏你的副本

免费下载布局

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

让我们开始重建吧!

添加第 1 节

您需要做的第一件事是向您正在处理的页面添加一个新的常规部分。

添加新行

立柱结构

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

WordPress divi主题

将文本模块添加到列

添加H2含量

我们在这一行中需要的第一个模块是一个带有一些 H2 内容的文本模块。

H2 文本设置

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

  • 标题 2 字体:Playfair 显示
  • 标题 2 字体粗细:常规
  • 标题 2 文本对齐:居中
  • 标题 2 文字大小:70 像素(桌面)、40 像素(平板电脑)、30 像素(手机)

将分隔模块添加到列

能见度

在这一行中,我们需要的第二个也是最后一个模块是 Divider Module。 确保启用了“显示分隔线”选项。

线

我们还在设计选项卡中更改线条颜色。

浆纱

继续调整大小设置并应用以下设置:

  • 分隔线重量:5px
  • 宽度:27%
  • 模块对齐:中心

fiverr建站WordPress程序员

添加第 2 节

背景颜色

将第二个常规部分添加到您的页面,打开部分设置并更改背景颜色。

  • 背景颜色:#f7f7f7

溢出

确保在高级选项卡中也隐藏部分溢出。 这将确保没有任何东西超出部分容器。

  • 水平溢出:隐藏
  • 垂直溢出:隐藏

过渡

在这篇文章的后面,我们将创建一个悬停过渡。 为了确保顺利运行,我们将在高级选项卡中增加过渡持续时间。

独立站选品工具
  • 转换持续时间:800ms

添加新行

立柱结构

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

浆纱

在不添加任何模块的情况下,打开行设置并通过应用以下设置允许行占据部分容器的整个宽度:

  • 使用自定义装订线宽度:是
  • 天沟宽度:1
  • 宽度:100%
  • 最大宽度:100%

高质量外链购买

将文本模块 #1 添加到列

添加H3内容

是时候开始添加模块了,从文本模块开始。 输入您选择的一些 H3 内容。

H3 文字设置

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

  • 标题 3 字体:Playfair 显示
  • 标题 3 文本对齐:居中
  • 标题 3 文本颜色:#000000
  • 标题 3 文本大小:3vw(桌面)、6vw(平板电脑)、7vw(手机)

将分隔模块添加到列

能见度

我们在这一行中需要的第二个模块是 Divider Module。 确保启用了“显示分隔线”选项。

JasperAI 10000字免费额度试用

线

更改分隔线的颜色。

间距

并添加一些自定义的顶部和底部边距以创建空间。

  • 最高边距:2vw
  • 底边距:2vw

WordPress备份工具updrafplus

将文本模块添加到列

添加内容

我们需要的下一个模块是另一个文本模块。 添加您选择的一些段落内容。

文字设置

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

  • 文字字体:Open Sans
  • 文本对齐:居中
  • 文字颜色:#777777
  • 文字大小:0.8vw(桌面)、1.7vw(平板电脑)、2.2vw(手机)
  • 文字行高:1.8em

间距

接下来添加一些自定义边距值。

  • 左边距:3vw(桌面)、7vw(平板电脑)、10vw(手机)
  • 右边距:3vw(桌面),7vw(平板电脑和手机)

将按钮模块添加到列

添加副本

我们在这一行中需要的下一个也是最后一个模块是按钮模块。 输入您选择的一些副本。

结盟

在设计选项卡中更改按钮对齐方式。

按钮设置

继续设置按钮设置的样式。

  • 为按钮使用自定义样式:是
  • 按钮文字大小:1vw(桌面)、2vw(平板电脑)、3vw(手机)
  • 按钮文字颜色:#000000
  • 按钮边框宽度:1px
  • 按钮边框半径:0px
  • 按钮字体:Playfair Display

间距

并添加一些自定义间距值。

  • 最高边距:2vw
  • 顶部填充:1vw
  • 底部填充:1vw
  • 左填充:3vw(桌面)、6vw(平板电脑)、8vw(手机)
  • 右填充:3vw(桌面)、6vw(平板电脑)、8vw(手机)

附加部分设置

默认顶部分隔线

将所有模块添加到该部分后,是时候进行一些额外的部分设置了。 打开部分设置,转到设计选项卡并添加以下顶部分隔线:

  • 分隔线样式:在列表中查找
  • 分隔线颜色:#e8e8e8
  • 分隔线高度:7000px
  • 分频器翻转:垂直
  • 分隔线排列:在章节内容之上

悬停顶部分隔线

更改悬停时的分隔高度。

底部分隔线

还要添加一个底部分隔线。

  • 分隔线样式:在列表中查找
  • 分隔线颜色:#5c26ff
  • 分隔高度:600px
  • 分隔线排列:在章节内容之上

悬停底部分隔线

并删除悬停时的分隔高度。

间距

正如您在这篇文章的预览中所看到的那样,我们将这个部分转了一圈。 为此,我们首先需要为不同的屏幕尺寸添加一些自定义边距和填充值:

  • 左边距:10vw(桌面)、11vw(平板电脑)、0vw(手机)
  • 右边距:47vw(桌面)、11vw(平板电脑)、0vw(手机)
  • 顶部填充:8vw(桌面)、15vw(平板电脑)、16vw(手机)
  • 底部填充:8vw(桌面)、15vw(平板电脑)、16vw(手机)

边界

继续在每个角上添加“50vw”,将部分转换为圆形。 我们还使用以下设置添加边框:

  • 边框宽度:1px
  • 边框颜色:rgba(255,255,255,0)

悬停边框

更改悬停时的边框颜色。

克隆部分两次

完成所有部分设置后,您可以继续克隆该部分两次。

修改重复#1

更改顶部分隔线颜色

我们将从第一个开始修改这两个部分的重复项。 打开部分设置并更改顶部分隔线颜色。

更改底部分隔线颜色

修改底部分隔线颜色。

更改间距

然后,转到间距设置并确保应用以下值:

  • 最高边距:-20vw(台式机),0vw(平板电脑和手机)
  • 左边距:47vw(桌面)、11vw(平板电脑)、0vw(手机)
  • 右边距:10vw(桌面)、11vw(平板电脑)、0vw(手机)

修改副本#2

更改顶部分隔线颜色

打开第二个副本的设置并更改顶部分隔线颜色。

更改底部分隔线颜色

更改底部分隔线颜色。

更改间距

并在这里修改间距值。

  • 最高边距:-20vw(台式机),0vw(平板电脑和手机)
  • 底边距:7vw
  • 左边距:10vw(桌面)、11vw(平板电脑)、0vw(手机)
  • 右边距:47vw(桌面)、11vw(平板电脑)、0vw(手机)

预览

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

桌面

隐藏你的副本

移动的

隐藏你的副本

最后的想法

在这篇文章中,我们向您展示了如何优雅地将副本隐藏在部分分隔符下方。 这是以不同于您习惯的方式使用 Divi 的一些直观内置选项的好方法。 我们希望本教程也能激发您使用这种技术创建自己的替代设计。 如果您有任何问题或建议,请务必在下面的评论部分发表评论!

如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品,请确保订阅我们的电子邮件通讯和 YouTube 频道,这样您将永远是第一批了解并从这些免费内容中受益的人之一。