如何使用 Divi 的尺寸选项创建固定联系表单角落弹出窗口

已发表: 2019-07-17

每周，我们都会为您提供新的免费 Divi 布局包，您可以将其用于下一个项目。对于其中一个布局包，我们还分享了一个用例，可帮助您将网站提升到一个新的水平。

本周，作为我们正在进行的 Divi 设计计划的一部分，我们将向您展示如何使用 Divi 的尺寸选项向您的页面添加固定的联系表单角落弹出窗口。这种方法将帮助您设置一个联系表单，在访问者访问您网站的过程中跟踪他们，而无需额外的插件！

让我们开始吧。

预览

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

桌面

固定联系方式

移动的

固定联系方式

1. 上传脊医布局包登陆页面

添加新页面

首先创建一个新页面。为页面命名并发布后，切换到 Visual Builder。

固定联系方式

上传脊医布局包登陆页面

接下来上传脊医布局包登录页面。尽管我们将使用这种特定的布局，但您可以使该技术在您正在处理的任何页面上工作。

固定联系方式

2. 让我们开始再创造吧！

将新部分添加到页面底部

我们将为点击时弹出的固定联系表单专门开辟一个全新的部分。将此部分添加到页面底部。

固定联系方式

背景颜色

打开部分设置并使用完全透明的背景颜色。在这篇文章的后面，我们将修复整个部分。使用透明的背景颜色将确保显示在部分容器下方的所有内容。

背景颜色：rgba(255,255,255,0)

固定联系方式

浆纱

移至设计选项卡并更改不同屏幕尺寸的部分的宽度。

宽度：37%（桌面）、95%（平板电脑）、100%（手机）
截面对齐：右

固定联系方式

间距

接下来删除默认的顶部填充。

顶部填充：0px

固定联系方式

CSS 类

我们还需要为我们的新部分提供一个自定义 CSS 类。在这篇文章的后面，我们将使用这个 CSS 类来添加一些 JQuery 和 CSS 代码。

CSS 类：部分打开

固定联系方式

默认 Z 索引

为了确保该部分出现在所有页面内容的顶部，我们将增加可见性设置中的部分 z 索引。

Z指数：99

固定联系方式

悬停 Z 索引

在悬停时也添加相同的 z 索引值。

Z指数：99

固定联系方式

添加第 1 行

列结构

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

固定联系方式

添加模糊模块

将内容框留空

我们在这一行中需要的第一个也是唯一一个模块是 Blurb 模块。确保将标题和内容框留空。

固定联系方式

选择图标

接下来选择一个图标。

固定联系方式

背景颜色

也更改模糊背景颜色。

背景颜色：#FFFFFF

固定联系方式

图标设置

转到设计选项卡并应用以下图标设置：

图标颜色：#ff5f24
图标位置：顶部
使用图标字体大小：是
图标字体大小：46px（桌面）、30px（平板电脑）、25px（手机）

固定联系方式

浆纱

接下来修改不同屏幕尺寸的尺寸设置。

宽度：140px（桌面）、105px（平板）、80px（手机）
模块对齐：右

固定联系方式

间距

我们还将在不同的屏幕尺寸中添加一些自定义的顶部和底部填充值。

顶部填充：50 像素（桌面）、35 像素（平板电脑）、25 像素（手机）
底部填充：20px（桌面）、10px（平板电脑）、0px（手机）

固定联系方式

边界

要创建圆形，我们需要为边框设置中的每个角添加一个高值。我们正在使用“500px”。

固定联系方式

盒子阴影

我们还将添加一个微妙的框阴影以显示圆形。

框阴影模糊强度：80px

固定联系方式

动画片

接下来打开动画设置，去掉图标动画。

图标动画：无动画

固定联系方式

CSS 类

最后但并非最不重要的一点是，向 Blurb 模块添加一个 CSS 类。在这篇文章的后面，我们将使用这个 CSS 类来使点击功能工作。

CSS 类：接触开放

固定联系方式

添加第 2 行

列结构

到第二排！使用以下列结构：

固定联系方式

背景颜色

尚未添加任何模块，打开行设置并添加白色背景色。

背景颜色：#FFFFFF

固定联系方式

边界

将“39px”边框半径添加到下一个角的每个角。

固定联系方式

盒子阴影

并通过添加一个微妙的框阴影来完成行设置。

框阴影模糊强度：80px

固定联系方式

添加联系表格

元素

我们在这一行中唯一需要的模块是联系表单模块。添加模块后，请在元素设置中禁用验证码。

显示验证码：否

固定联系方式

字段

转到设计选项卡并更改字段设置中的字段背景颜色。

字段背景颜色：rgba(0,126,255,0.13)

固定联系方式

按钮

继续设置按钮样式。

为按钮使用自定义样式：是
按钮文字大小：16px
按钮文字颜色：#FFFFFF
按钮背景颜色：#ff5f24
按钮边框宽度：2px
按钮边框颜色：rgba(0,0,0,0)
按钮边框半径：0px
按钮字体：Karla
按钮字体粗细：粗体
按钮顶部填充：14px
按钮底部填充：14px
按钮左填充：20px
按钮右内边距：20px

固定联系方式

间距

并添加一些自定义填充值。

顶部填充：30px
底部填充：30px
左填充：40px
右填充：40px

固定联系方式

添加代码模块

插入 JQuery 代码

完成联系表单模块后，就可以使用点击功能了！将代码模块添加到该部分的第二行，并在脚本标记之间插入以下 JQuery 代码行，如下面的打印屏幕所示：

jQuery(function($){
$(".contact-open").click(function() {
 $('.section-open').toggleClass('section-open-active');
});
});

固定联系方式

更改部分设置

高度

继续打开部分设置。更改不同屏幕尺寸的高度。

高度：190px（桌面）、140px（平板）、125px（手机）

固定联系方式

默认主元素

将一些自定义 CSS 代码添加到旁边部分的主要元素，使其固定在右下角。

bottom: 0;
right: 0;
position: fixed;

固定联系方式

悬停主元素

确保您也将固定位置添加到悬停主元素中。

position: fixed;

固定联系方式

向页面添加自定义 CSS 代码

打开页面设置

要完成切换效果，我们还需要向页面添加一些 CSS 代码。打开页面设置。

固定联系方式

添加自定义 CSS

转到高级选项卡并添加以下 CSS 代码行：

.section-open-active {
height: auto !important;
}

固定联系方式

预览

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

桌面

固定联系方式

移动的

固定联系方式

最后的想法

在这篇文章中，我们向您展示了如何使用 Divi 的大小设置向您的页面添加固定联系表单。您可以使这种方法适用于您正在构建的任何类型的网站。本教程是我们正在进行的 Divi 设计计划的一部分，我们每周都会尝试在您的设计工具箱中添加一些额外的东西。如果您有任何问题或建议，请务必在下面的评论部分留言。

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