WordPress divi主题

如何使用 Divi 创建锁定的内容角弹出窗口

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

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

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

google广告开户

本周,作为我们正在进行的 Divi 设计计划的一部分,我们将向您展示如何使用 Divi 和度假村布局包创建锁定的内容角弹出窗口。 锁定内容选择表单的概念很简单。 人们必须输入他们的电子邮件地址,一旦输入,隐藏的内容就会暴露出来。 例如,您可以使用此隐藏内容共享折扣代码。 为了实现这一切,我们将使用 Bloom 插件并将锁定的内容 optin 表单短代码添加到我们将样式设置为弹出窗口的文本模块中。 文本模块还将包含一个带有动画延迟的动画,以使文本模块看起来像是一个弹出窗口。

让我们开始吧!

预览

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

桌面

锁定的内容角弹出窗口

移动的

锁定内容角弹出窗口

安装 Bloom 插件

下载绽放

您需要做的第一件事是下载 Bloom 插件。 如果您已经是 Elegant Themes 会员,您可以前往会员区找到该插件。 在那里,您将能够下载压缩文件。 如果您还不是优雅主题会员,则需要先购买会员资格。

锁定的内容角弹出窗口

上传并安装 Bloom

下载 Bloom 后,您可以继续将其上传到您的 WordPress 网站,方法是转到 插件 > 添加新的 并单击页面顶部的“上传插件”。

锁定的内容角弹出窗口

WordPress divi主题

然后,上传压缩文件并单击“立即安装”。

锁定的内容角弹出窗口

上传后不要忘记激活插件。

锁定的内容角弹出窗口

设置 Bloom 选择表单

添加新的锁定内容表单

我们现在可以开始创建锁定的内容表单,我们将在这篇文章的稍后部分将其用于我们的 Divi 设计! 去你的 WordPress 仪表板 > Bloom > 选择表单 并创建一个新的 optin 表单。

锁定的内容角弹出窗口

继续选择“锁定内容”选项类型并继续进行设置。

锁定的内容角弹出窗口

设置设置

进入设置设置后,您需要为新的 optin 表单命名。 您还需要选择您选择的电子邮件提供商并输入身份验证详细信息。

锁定的内容角弹出窗口

fiverr建站WordPress程序员

设计设置

下一步是设计表格。 稍后在帖子中,我们将在我们将设置样式的文本模块中使用 optin 表单简码,因此我们不需要对 optin 表单本身应用太多设置。 确保将 optin 标题和 optin 消息内容框留空。 同时更改图像方向。

  • 图像方向:无图像

锁定的内容角弹出窗口

向下滚动页面并对 optin 样式和表单设置进行一些额外的更改。

  • 背景颜色:#ffffff
  • 表格方向:底部表格

锁定的内容角弹出窗口

我们也在更改表单样式设置。

独立站选品工具
  • 表单字段方向:堆叠表单字段
  • 表单背景颜色:#f4f4f4
  • 按钮颜色:#ffffff
  • 按钮文字颜色:深色
  • 选择表格边缘样式:第二个选项

锁定的内容角弹出窗口

使用 Divi 进行设计

添加新行

立柱结构

我们现在可以切换到 Divi Builder! 继续使用 Resort Layout Pack 的主页创建一个新页面。 上传布局后,继续使用以下列结构在第二部分的顶部添加新行:

锁定的内容角弹出窗口

浆纱

在不添加任何模块的情况下,打开行设置并对大小设置进行一些更改。

  • 使这一行全宽:是
  • 使用自定义装订线宽度:是
  • 天沟宽度:1

锁定的内容角弹出窗口

高质量外链购买

间距

接下来转到间距设置并将“0px”添加到行的顶部和底部填充。 这将限制我们添加的新行占用的空间。

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

锁定的内容角弹出窗口

添加文本模块

添加H3内容

我们需要创建锁定内容角弹出窗口的唯一模块是文本模块。 将您选择的 H3 标题添加到内容框中。

锁定的内容角弹出窗口

添加锁定内容选择表单简码

然后,返回 Bloom 插件并复制您在本教程上一部分中创建的 optin 表单的简码。

JasperAI 10000字免费额度试用

锁定的内容角弹出窗口

在人们填写选择表单后添加您想要显示的任何内容。 在下面的示例中,您可以注意到我们正在共享优惠券代码,但您可以共享任何您想要的信息。

锁定的内容角弹出窗口

背景颜色

接下来进入模块的背景设置,添加一个完全白色的背景颜色。

  • 背景颜色:#ffffff

锁定的内容角弹出窗口

WordPress备份工具updrafplus

文字设置

转到设计选项卡,然后更改文本设置。

  • 文字字体:Open Sans
  • 文字颜色:#0f87ff
  • 文字大小:15px

锁定的内容角弹出窗口

H3 文字设置

更改用于 H3 副本的字体。

  • 标题 3 字体:Gilda Display

锁定的内容角弹出窗口

间距

为了给模块一个形状,我们将添加一些自定义边距和填充值。 我们还修改了所有这些值,以使设计与访问者使用的任何屏幕尺寸相匹配。

  • 最高边距:-17vw
  • 左边距:65vw(桌面)、37vw(平板电脑)、3vw(手机)
  • 右边距:0px
  • 顶部填充:5vw(台式机)、11vw(平板电脑)、13vw(手机)
  • 底部填充:5vw、11vw(平板电脑)、13vw(手机)
  • 左填充:6vw(桌面)、11vw(平板电脑)、16vw(手机)
  • 右填充:6vw(桌面)、11vw(平板电脑)、16vw(手机)

锁定的内容角弹出窗口

边界

继续转到文本模块的边框设置,并将“500vw”添加到每个角落,右下角除外。

锁定的内容角弹出窗口

盒子阴影

在旁边添加一个框阴影以使文本模块弹出。

  • 盒子阴影模糊强度:150px
  • 阴影颜色:rgba(0,0,0,0.3)

锁定的内容角弹出窗口

动画片

最后,我们还添加了一个从右到左的动画来创建弹出效果。

  • 动画重复:一次
  • 动画方向:左
  • 动画时长:500ms
  • 动画延迟:1000ms
  • 动画强度:16%

锁定的内容角弹出窗口

克隆行

创建完第一个锁定的内容角弹出窗口后,您可以继续克隆整行。

锁定的内容角弹出窗口

将重复的行放在这里:

锁定的内容角弹出窗口

删除部分底部填充

删除您放置该行的部分的底部填充。

更改文本模块间距设置

然后,打开文本模块的设置并更改自定义边距值。

  • 左边距:0vw
  • 右边距:65vw(桌面)、37vw(平板电脑)、3vw(手机)

锁定的内容角弹出窗口

更改文本模块圆角

确保你也改变了圆角。 除了左下角之外,我们对每个角都使用“500vw”。

锁定的内容角弹出窗口

更改文本模块动画设置

最后但同样重要的是,将动画方向更改为向右,您就完成了!

  • 动画方向:右

锁定的内容角弹出窗口

预览

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

桌面

锁定的内容角弹出窗口

移动的

锁定的内容角弹出窗口

最后的想法

在这篇文章中,我们向您展示了如何使用 Divi、Bloom 插件和 Resort Layout Pack 创建锁定的内容角弹出窗口。 您可以使用此技术通过提供一个优惠券代码来说服人们成为您的电子邮件列表的一部分,该优惠券代码会在他们填写表格后出现。 本教程是我们正在进行的 Divi 设计计划的一部分,我们每周都会尝试在您的设计工具箱中添加一些额外的东西。 如果您有任何问题或建议,请务必在下面的评论部分发表评论!

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