WordPress divi主题

如何在您的 Divi Hero 部分中无缝包含滑入式列联系表

| 5月 3, 2022 | Divi主题使用教程 | 0 条评论

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

在考虑在页面设计中包含 CTA 的方法时,您可能会考虑在您的英雄部分中包含一个联系表。 这种方法允许人们立即与您取得联系,而无需在您的网站上进一步导航。 如果您正在寻找一种无缝方式在 Divi 中进行这项工作,那么您会喜欢这篇文章的。 在本教程中,我们将向您展示如何仅使用 Divi 的内置选项将滑入式列联系表单添加到您的英雄部分。 您还可以免费下载 JSON 文件!

google广告开户

让我们开始吧。

预览

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

桌面

专栏联系表

移动的

专栏联系表

免费下载专栏联系表英雄部分布局

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

让我们开始重新创建

添加新部分

背景颜色

首先向您正在处理的页面添加一个新部分。 打开部分设置并更改背景颜色。

  • 背景颜色:#ff8949

专栏联系表

背景图片

接下来我们将上传一个背景图案,它是财务顾问布局包的一部分。 您可以在本文开头下载的文件夹中找到此背景图片。

  • 背景图像大小:适合
  • 背景图像位置:中心

专栏联系表

WordPress divi主题

间距

转到该部分的设计选项卡并删除所有默认的顶部和底部填充。

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

专栏联系表

溢出

通过隐藏高级选项卡中的溢出来完成部分设置。 这将确保我们稍后添加的动画不会超出部分容器。

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

专栏联系表

添加新行

立柱结构

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

专栏联系表

浆纱

在不添加任何模块的情况下,打开行设置并修改大小设置,如下所示:

  • 均衡柱高:是
  • 宽度:80%(桌面)、100%(平板电脑和手机)
  • 最大宽度:1380px
  • 行对齐:右

专栏联系表

间距

接下来删除所有默认的顶部和底部填充。

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

专栏联系表

fiverr建站WordPress程序员

第 1 列设置

间距

然后,打开第 1 列设置,修改不同屏幕尺寸的间距设置。

  • 顶部填充:22%
  • 底部填充:22%
  • 左侧填充:10%(仅限平板电脑和手机)
  • 右侧填充:10%(仅限平板电脑和手机)

专栏联系表

第 2 列设置

背景颜色

接下来,我们将打开第 2 列设置并使用白色背景颜色。

  • 背景颜色:#ffffff

专栏联系表

动画片

我们将通过应用以下动画设置来完成第 2 列的设置:

独立站选品工具
  • 动画方向:左(桌面),上(平板电脑和手机)
  • 动画时长:1500ms
  • 动画强度:70%
  • 动画开始不透明度:100%

专栏联系表

将文本模块 #1 添加到第 1 列

添加H1内容

是时候添加模块了,从第 1 列中的第一个文本模块开始。添加一些您选择的 H1 内容。

专栏联系表

H1 文字设置

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

  • 标题字体:Oswald
  • 标题字体样式:大写
  • 标题文字颜色:#ffffff
  • 标题文字大小:120 像素(桌面)、70 像素(平板电脑)、60 像素(手机)

专栏联系表

高质量外链购买

浆纱

我们也在更改模块的大小设置。

  • 宽度:75%(桌面)、100%(平板电脑和手机)
  • 模块对齐:左

专栏联系表

将文本模块 #2 添加到第 1 列

添加描述内容

进入下一个模块,这是另一个文本模块。 添加一些您选择的描述内容。

专栏联系表

文字设置

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

JasperAI 10000字免费额度试用
  • 文字字体:Open Sans
  • 文字颜色:#ffffff
  • 文字行高:1.9em

专栏联系表

浆纱

也修改大小设置。

  • 宽度:75%(桌面)、100%(平板电脑和手机)
  • 模块对齐:左

专栏联系表

将按钮模块添加到第 1 列

添加副本

第 1 列中我们需要的最后一个模块是按钮模块。 添加一些您选择的副本。

专栏联系表

WordPress备份工具updrafplus

按钮设置

转到模块的设计选项卡并更改按钮设置,如下所示:

  • 为按钮使用自定义样式:是
  • 按钮文字颜色:#ffffff
  • 按钮边框半径:1px

专栏联系表

  • 按钮字体:Oswald
  • 按钮字体样式:大写

专栏联系表

将 Blurb 模块添加到第 2 列

添加内容

到第二列。 在那里,我们需要的第一个模块是一个 Blurb 模块。 添加您选择的标题。

专栏联系表

选择图标

接下来,选择一个图标。

专栏联系表

图标设置

转到模块的设计选项卡并更改图标设置,如下所示:

  • 图标颜色:#ffd8c6
  • 图标位置:顶部
  • 图标对齐:居中
  • 使用图标字体大小:是
  • 图标字体大小:250px(桌面)、150px(平板电脑和手机)

专栏联系表

标题文本设置

接下来修改标题文本设置。

  • 标题标题级别:H2
  • 标题字体:Oswald
  • 标题字体样式:大写
  • 标题文本对齐方式:居中
  • 标题文字颜色:#ff8949
  • 标题文字大小:38px

专栏联系表

间距

也添加一些左右填充。

  • 左填充:11%
  • 右填充:11%

专栏联系表

动画片

并通过添加以下动画设置来完成模块:

  • 动画方向:下
  • 动画时长:1100ms
  • 动画延迟:400ms
  • 动画开始不透明度:100%

专栏联系表

将联系表单模块添加到第 2 列

将字段全宽

到最后一个模块,即联系表单模块。 分别打开名称和电子邮件字段,并在布局设置中将它们设为全角。

专栏联系表

专栏联系表

背景颜色

然后,返回到常规联系表单模块设置并添加背景颜色。

  • 背景颜色:#f7f7f7

专栏联系表

字段设置

转到设计选项卡,然后对字段设置进行一些更改。

  • 字段背景颜色:#ffffff
  • 字段文本颜色:#ff8949
  • 字段上边距:15px
  • 字段下边距:15px
  • 字段顶部填充:20px
  • 字段底部填充:20px

专栏联系表

  • 字段字体:Oswald
  • 字段字体样式:大写
  • 字段文本对齐方式:居中
  • 字段文本大小:21px

专栏联系表

按钮设置

然后,相应地设置按钮样式:

  • 为按钮使用自定义样式:是
  • 按钮文字颜色:#ff8949
  • 按钮边框半径:1px

专栏联系表

  • 按钮字体:Oswald
  • 按钮字体样式:大写

专栏联系表

浆纱

我们还在尺寸设置中确保宽度为“100%”。

专栏联系表

间距

接下来继续间距设置并应用一些自定义填充值。

  • 顶部填充:14%
  • 底部填充:14%
  • 左填充:12%
  • 右填充:12%

专栏联系表

动画片

然后,使用以下动画设置:

  • 动画风格:幻灯片
  • 动画方向:向上
  • 动画时长:1100ms
  • 动画延迟:400ms
  • 动画开始不透明度:100%

专栏联系表

位置

并通过仅在桌面上重新定位模块来完成模块设置(和教程):

  • 位置:绝对(桌面),默认(平板电脑和手机)
  • 位置:底部中心

专栏联系表

预览

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

桌面

专栏联系表

移动的

专栏联系表

最后的想法

在这篇文章中,我们向您展示了如何在您的英雄部分无缝地包含联系表。 更具体地说,我们创建了一个滑入式列联系表单,该表单在所有屏幕尺寸上看起来都很棒。 您还可以免费下载 JSON 文件! 如果您有任何疑问,请随时在下面的评论部分发表评论。

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

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