WordPress divi主题

如何使用 Divi 的大小选项创建固定的联系表格角落弹出窗口

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

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

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

google广告开户

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

让我们开始吧。

预览

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

桌面

固定联系表格

移动的

固定联系表格

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

添加新页面

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

固定联系表格

上传脊医布局包登陆页面

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

固定联系表格

WordPress divi主题

2.让我们开始重建吧!

将新部分添加到页面底部

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

固定联系表格

背景颜色

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

  • 背景颜色:rgba(255,255,255,0)

固定联系表格

浆纱

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

  • 宽度:37%(台式机)、95%(平板电脑)、100%(手机)
  • 部分对齐:右

固定联系表格

间距

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

固定联系表格

CSS 类

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

固定联系表格

fiverr建站WordPress程序员

默认 Z 索引

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

固定联系表格

悬停 Z 指数

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

固定联系表格

添加第 1 行

立柱结构

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

独立站选品工具

固定联系表格

添加模糊模块

将内容框留空

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

固定联系表格

选择图标

接下来选择一个图标。

固定联系表格

高质量外链购买

背景颜色

更改简介背景颜色。

  • 背景颜色:#FFFFFF

固定联系表格

图标设置

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

  • 图标颜色:#ff5f24
  • 图标位置:顶部
  • 使用图标字体大小:是
  • 图标字体大小:46px(台式机)、30px(平板电脑)、25px(手机)

固定联系表格

浆纱

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

JasperAI 10000字免费额度试用
  • 宽度:140px(台式机)、105px(平板电脑)、80px(手机)
  • 模块对齐:右

固定联系表格

间距

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

  • 上边距:50 像素(桌面)、35 像素(平板电脑)、25 像素(手机)
  • 底部填充:20px(桌面)、10px(平板电脑)、0px(手机)

固定联系表格

边界

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

固定联系表格

WordPress备份工具updrafplus

盒子阴影

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

  • 盒子阴影模糊强度:80px

固定联系表格

动画片

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

  • 图标动画:无动画

固定联系表格

CSS 类

最后但同样重要的是,将 CSS 类添加到 Blurb 模块。 稍后在这篇文章中,我们将使用这个 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');
});
});

固定联系表格

更改部分设置

高度

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

  • 高度:190 像素(桌面)、140 像素(平板电脑)、125 像素(手机)

固定联系表格

默认主元素

在下一节的主要元素中添加一些自定义 CSS 代码,使其固定在右下角。

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

固定联系表格

悬停主要元素

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

position: fixed;

固定联系表格

将自定义 CSS 代码添加到页面

打开页面设置

为了完成切换效果,我们还需要在页面中添加一些 CSS 代码。 打开页面设置。

固定联系表格

添加自定义 CSS

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

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

固定联系表格

预览

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

桌面

固定联系表格

移动的

固定联系表格

最后的想法

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

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

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