使用 Divi Scroll Motion 效果创建浮动接触部分

每个网站都需要一个联系部分，但这并不意味着您需要采用标准设计。 使用 Divi 的滚动效果，您可以创建一个突出的浮动联系人部分。 通过垂直滚动联系部分布局改善您的用户交互，该布局将邀请访问者与您的联系表单互动。 在这篇文章中，我们将向您展示如何创建可以添加到任何页面的全宽浮动联系人部分。 您甚至可以使用 Divi Theme Builder 在站点范围的页脚顶部添加它。

在下面，您将找到一个可免费下载的文件夹，其中包含 JSON 布局，可上传到您自己的 Divi 库。 我们还提供了一个 PSD 模板来帮助您重新创建地图背景，以及一个地图图钉的 SVG，以便您可以使用自己的颜色对其进行个性化设置。

让我们开始吧！

预览

在我们开始构建联系表单布局之前，先看看不同屏幕尺寸的结果。

桌面

移动的

免费下载浮动接触部分

要了解自由浮动接触部分布局，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

1.为浮动接触部分创建地图背景

打开谷歌地图

本教程的第一步是创建黑白地图背景。 要创建自己的，请按照以下步骤操作：

• 首先，打开谷歌地图并搜索您的地址。
• 当它加载时，缩小以便您可以看到您地址周围的大部分城市或街道。

• 接下来，定位地图，使您的位置位于地图的右上角象限。
• 然后，取下定位销。
• 最后，对地图进行截图，避开角落上的选项卡。

个性化 Pin 图

在上面的可下载文件中，我们包含了我们在设计中使用的引脚的 SVG 文件。 欢迎您使用它并使用矢量图形编辑器更改颜色。 如果您想在 Photoshop 中更改颜色，我们还包含了一个透明的 PNG。

对 SVG 引脚执行以下步骤：

• 首先，下载本教程开头的免费文件并解压文件夹。
• 其次，使用 Illustrator、Inkscape 或您喜欢的矢量编辑器打开 SVG 图钉图形。
• 第三，更改颜色以匹配您的品牌或网站。
• 最后，另存为透明的 PNG。

在 Photoshop 上编辑

现在是时候把它们放在一起了。 首先，在您最喜欢的图形编辑器中打开地图以降低颜色的饱和度。 其次，添加引脚。

如果你有 Photoshop，你可以使用我们包含的 PSD 文件，只需将你的地图截图添加到第二层的智能对象中。

要使用智能对象，请按照下列步骤操作

• 打开 PSD 文件。
• 双击橙色图层。 将打开一个新窗口。
• 用你的地图替换我们的地图。
• 不要忘记点击保存。
• 返回主编辑窗口并在那里单击保存。
• 将网页导出为 .jpg。

如果您没有 Photoshop，请按照以下步骤操作：

• 首先，创建一个 1920 px x 700 px 的新项目。
• 其次，将地图截图放到画布上。 确保将您的位置保持在右上象限，略高于中心。
• 第三，使用图像调整将图像变成黑白。
• 另外，添加一些对比。
  1. 亮度：-25
  2. 对比度：-50
• 然后，单击图像层，并在大约 55% 处添加透明度。
• 如果您将在具有非白色背景的网页上创建此设计，请在图像下方添加一个白色图层，以保持基色为白色，无论网站的背景颜色是什么。
• 继续将图钉放在您的位置。 将其大小调整为大约 90px 高。 把它留在最顶层。
• 最后，下载为 .jpg。

2. 创建元素结构

添加新部分

背景

现在是时候开始使用 Divi Builder 构建浮动接触部分了！ 我们要做的第一件事是打开一个新页面或现有页面并添加一个新部分。

在内容选项卡中，添加您在 Photoshop 中创建的地图背景。

• 背景图片：您编辑过的地图

间距

然后，在设计选项卡中自定义节的间距设置。

• 上下边距：50vh
• 底部填充：0vw

能见度

接下来，将溢出调整为可见。

• 水平和垂直溢出：可见

位置

最后，将截面的 Z 索引设置为 10。

• Z指数：10

添加新行

列结构

现在是添加一些元素的时候了。 首先，添加一行 2 列。

浆纱

打开行设置并按如下方式调整大小。

• 宽度
  • 台式机：90%
  • 平板电脑和手机：80%
• 最大宽度：90%

能见度

单击高级选项卡，然后调整溢出。

• 水平和垂直溢出：可见

位置

通过修改位置设置完成行设置。

• 职位：相对
• 偏移原点：左上角
• 垂直偏移
  • 桌面：-8vw

第 1 列设置

背景

在添加模块之前，我们需要为各个列设置样式。 向第 1 列添加背景颜色。

• 纯色：#25274d

间距

接下来调整间距设置。

• 顶部和底部填充
  • 台式机和平板电脑：7vw
• 左右填充
  • 台式机：3vw
  • 平板电脑和手机：6vw

边界

然后，在边框设置中添加一些圆角。

• 圆角：四个角均为 10px

滚动效果

最后但并非最不重要的一点是，在滚动效果设置中使用一些垂直运动。 这将帮助我们创建浮动效果。

• 滚动变换效果：垂直运动
• 设置垂直运动/桌面
  • 起始偏移：4
  • 中间偏移：0（50%）
  • 结束偏移：-4
• 设置垂直运动/平板电脑和手机
  • 起始偏移：4
  • 中间偏移：0（在 40% 和 60% 处）
  • 结束偏移：-3
• 运动效果触发器：元素中间

第 2 列设置

位置

现在，进入第二列设置。 相应地调整位置设置。

• 职位：相对
• 偏移原点：左上角
• 垂直偏移
  • 台式机：25vw

滚动效果

我们也为此列添加了一些垂直运动。

• 滚动变换效果：垂直运动
• 设置垂直运动/桌面
  • 起始偏移：2
  • 中间偏移：0（50%）
  • 结束偏移：-2
• 设置垂直运动/平板电脑和手机
  • 起始偏移：0
  • 中间偏移：0（50%）
  • 结束偏移：-2
• 运动效果触发器：元素顶部

将文本模块添加到第 1 列

内容

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

标题文字

转到设计选项卡并按如下方式设置 H2 文本的样式。

• 标题级别：H2
• 字体：Palanquin Dark
• 字体粗细：粗体
• 字体样式：TT
• 颜色：黄色#ffd868
• 尺寸
  • 台式机：5vw
  • 平板电脑：10vw
  • 电话：12vw
• 字母间距：4px

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

内容

在文本模块下方，添加联系表单。 这些是我们正在使用的字段：

• 姓名
• 电子邮件
• 主题
• 信息

垃圾邮件防护

在样式化联系表单模块之前。 打开垃圾邮件保护并连接您的 ReCaptcha 帐户。

• 使用垃圾邮件防护服务：是
• 服务提供商：ReCaptcha
• 选择账户

字段

转到设计选项卡并按如下所示设置字段样式。

• 背景颜色：深蓝色 #25274d
• 文字颜色：浅灰色#d1d1d1
• 焦点背景颜色：深蓝色 #25274d
• 焦点文本颜色：浅灰色 #d1d1d1
• 字体: Palanquin
• 风格：TT
• 字体大小
  • 台式机：0.9vw
  • 平板电脑：2vw
  • 电话：3vw
• 字母间距：1px

按钮

然后，设置按钮样式。

• 自定义样式：是
• 文字大小：20px
• 文字颜色：深蓝色 #25274d
• 背景颜色：黄色#ffd868
• 边框半径：7px
• 图标颜色：深蓝色 #25274d
• 上边距：5px

浆纱

接下来我们将修改大小设置。

• 宽度：100%
• 最大宽度：100%

间距

我们也会添加一些顶部填充。

• 顶部填充：4vw

边界

通过自定义边框设置完成模块设置。

• 输入圆角：所有四个角均为 6px
• 输入边框样式：所有四个边
• 输入边框宽度：2px
• 输入边框颜色：黄色 #ffd868

将社交媒体关注模块添加到第 2 列

内容

移至第 2 列并添加社交媒体模块。 使用您需要的所有社交媒体网络。

• Facebook
• 推特
• 领英

关联

在样式化之前，添加到相应网络的链接。

项目背景

现在，打开第一个社交网络并更改背景颜色。

• 颜色: 深蓝色#25274d

项目图标

在相同元素的设计选项卡中，更改图标设置如下。

• 颜色：黄色#ffd868
• 图标字体大小
  • 台式机和平板电脑：31px
  • 电话：26px

项目间距

然后，添加一个小的边距以将图标彼此分开。

• 右边距：1vw

复制和粘贴项目样式

要设置其余社交网络的样式，请返回主内容窗口并复制第一个图标的项目样式。 然后，将项目样式粘贴到其余社交网络上。

结盟

移至主设计选项卡并确保模块与左侧对齐。

• 模块对齐：左

浆纱

然后，调整模块的大小。

• 宽度：100%

间距

也擦除所有默认填充。

• 上、下、左、右填充：0vw

边界

最后，在边框设置中添加一些圆角。 这将一次调整所有图标的边框。

• 圆角
  • 左上和右上：7px
  • 左下和右下：0px

将文本模块添加到第 2 列

内容

在社交媒体模块下方，添加另一个文本模块。 添加一些您选择的内容。 我们添加了两个地址、一个电话号码和一个电子邮件。 在所有大写的每个项目的标题上使用粗体。

• 总部： 1587 Sukhumvit Soi 21，曼谷，泰国。
• 零售地点: Emporium Mall, 2nd Floor
• 电话 : (321) 564 2398
• 电子邮件： [电子邮件保护]

背景

修改模块的背景颜色。

• 颜色：深蓝色#25274d

文本

转到设计选项卡并设置文本样式。

• 字体: Palanquin
• 颜色：黄色#ffd868
• 尺寸：18px

间距

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

• 上边距
  • 桌面：-60px
  • 平板电脑和手机：-50px
• 顶部、底部、左侧和右侧填充
  • 台式机：3vw
  • 平板电脑：6vw
  • 电话：8vw

边界

并通过在边框设置中添加圆角来完成模块。 就是这样！

• 圆角：10px 右上角、左下角和右下角。

预览

现在我们已经完成了浮动接触部分的重新创建，最后看看不同屏幕尺寸的结果。

桌面

移动的

您已完成重新创建浮动接触部分布局！

使用新的 Divi 滚动效果有助于将任何标准布局变成出色的设计。 通过创建自己的地图背景，您可以更好地控制完成设计的外观。 如果您有任何问题或建议，请在下方评论区留言！