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

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

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

让我们开始吧！

预览

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

桌面

移动的

安装 Bloom 插件

下载绽放

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

上传和安装 Bloom

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

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

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

设置 Bloom Optin 表单

添加新的锁定内容表单

我们现在可以开始创建锁定的内容表单，稍后我们将在我们的 Divi 设计中使用它！ 转到您的WordPress 仪表板 > Bloom > Optin Forms并创建一个新的optin 表单。

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

设置设置

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

设计设置

下一步是设计表格。 在这篇文章的后面，我们将在我们将设置样式的文本模块中使用 optin 表单短代码，因此我们不需要对 optin 表单本身应用太多设置。 确保将 optin 标题和 optin 消息内容框留空。 还要更改图像方向。

• 图像方向：无图像

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

• 背景颜色：#ffffff
• 形式方向：底部形式

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

• 表单字段方向：堆叠表单字段
• 表单背景颜色：#f4f4f4
• 按钮颜色：#ffffff
• 按钮文字颜色：深色
• 选择表格边缘样式：第二个选项

用 Divi 创造设计

添加新行

列结构

我们现在可以切换到 Divi Builder！ 继续使用度假村布局包的主页创建一个新页面。 上传布局后，继续使用以下列结构在第二部分的顶部添加一个新行：

浆纱

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

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

间距

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

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

添加文本模块

添加H3内容

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

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

然后，返回 Bloom 插件并复制您在本教程的前一部分中创建的 optin 表单的短代码。

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

背景颜色

接下来转到模块的背景设置并添加完全白色的背景色。

• 背景颜色：#ffffff

文字设置

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

• 文字字体：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%

克隆行

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

将重复的行放在此处：

删除部分底部填充

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

• 底部填充：0px

更改文本模块间距设置

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

• 左边距：0vw
• 右边距：65vw（桌面）、37vw（平板电脑）、3vw（手机）

更改文本模块圆角

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

更改文本模块动画设置

最后但并非最不重要的一点是，将动画方向更改为右侧，您就完成了！

• 动画方向：右

预览

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

桌面

移动的

最后的想法

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