如何使用 Divi 和 GiveWP 创建一个捐赠星期二登录页面

如果您还没有听说过，我们正准备在 Elegant Themes 开始大规模的黑色星期五和网络星期一活动。 但是每年的这个时候还有一件很酷的事情发生。 它被称为“捐赠星期二”（今年是 11 月 28 日），这是世界非营利组织的一项努力，旨在提醒每个人，虽然他们已经拿出钱包进行个人购物，但他们可能想考虑向那些在也需要。 多么酷的主意！ 由于我们致力于为我们的社区赋权，我们认为帮助那些使用 Divi（或 Extra）并为非营利组织工作的人制作最好的周二捐赠登陆页面是个好主意能够。

这是我们今天将要创建的内容的快速浏览。

最终结果预览

在今天的帖子中，我们将创建一个漂亮的 Giving 星期二登陆页面，并配有一个视觉上令人惊叹（当然还有功能）的捐赠表格。

安装 GiveWP 插件并创建新表单

我们将在本教程中使用的捐赠表格由 GiveWP 插件生成。 要安装它，请在您的 WordPress Admin 中导航到Plugins > Add New 。 在那里，使用搜索功能找到 Give 插件。 单击“立即安装”按钮，然后将其激活。

接下来，转到Donations > Add Form 。 输入表单标题。 我选择了“支持当地农民和可持续农业”。

接下来，您会注意到捐赠表格选项。 让我们逐个浏览它们。

在名为 Donation Options 的第一个选项卡中，在顶部配置以下设置。

捐赠方式：多级捐赠

捐赠展示：按钮

自定义金额：已启用

在捐赠级别部分，设置以下捐赠级别：$1、$5、$10、$25、$50、$100。 请务必将 5.00 美元的捐赠级别设置为新的默认值。

现在转到“表单显示”选项卡。 您在这里唯一需要做的就是将“显示选项”设置更改为“模态”。

在捐赠目标选项卡中，首先启用捐赠目标选项。 完成后，设置目标金额。 我已将我的设置为 1,000 美元。 我还将目标格式设置为百分比。 这将使表单查看者知道我们实现的目标的百分比，而不是我们筹集的实际金额。 最后，我稍微更改了进度条颜色，以匹配我网站其余部分使用的相同绿色 (#07c907)。

最后，我们需要添加一些表单内容。 在表单内容选项卡中，启用显示内容。 然后，向内容区域添加一些文本。

就本教程而言，这些都是我们需要配置的 Give 表单设置。 单击“发布”按钮并注意稍后您将需要此捐赠表格的短代码这一事实。

真实地设置此表单时，您还需要转到“捐赠”>“设置”并配置诸如支付网关、电子邮件等内容。

准备您的图像资产

我们还需要为我们的表单部分自定义背景图像。 这当然是可选的，它不会影响表单的工作方式。 但它看起来很酷，并为我们的农贸市场示例增添了不错的设计搭配。

为了创建这个图像，我使用了 Photoshop，但你也可以使用一个名为 Gimp 的免费软件。 它是一个开源工具，具有许多相同的功能。

这是创建它的方法。

首先，找到一张包含与您的非营利组织相关的元素的图片。 由于我使用的示例是针对农贸市场的，因此我决定使用蔬菜。 我在库存图片网站上搜索了“孤立的蔬菜”。 通常，库存图片网站上的“隔离”一词是指白色背景上的项目。 这可以通过删除背景轻松隔离它们。 这正是我所做的。

这是我找到的图像。

然后我在photoshop中打开了那个图像。

因为初始图层默认是锁定的，通过右键单击它并选择“复制图层”来复制它。 然后，通过单击旁边的眼睛图标隐藏第一层。

接下来，使用魔术棒工具选择蔬菜元素周围和内部的所有空白区域。 按退格键删除它。

接下来，在顶部菜单中导航至图像 > 画布大小并将画布大小调整为 1920×1080。 当您这样做时，与您的新的、较小的画布相比，您的元素可能会非常大。

在键盘上按 command+T 或转到Edit > Transform > Scale 。 调整孤立元素层的大小以适应新的画布大小。

这就是我们现在对这张图片的了解。 只需确保您已经保存了这个新的 Photoshop 文件。 一旦我们有了新的捐赠表格作为尺寸参考，我们将继续往下看。

在 Divi 中创建设计

如果您还没有这样做，您需要下载并安装我们全新的（免费）农贸市场布局包。 按照该帖子中的说明安装布局包。 安装后，请按照此博客文章中的说明为您的网站设置下一阶段的自定义，我们将在此处介绍。

准备好后，导航到您的捐赠页面并使用页面顶部的按钮启用可视化构建器。 我将在页面上逐节带您进行自定义。

由于我们正在为“捐赠星期二”活动准备此页面，因此我们可能应该在顶部提及这一点。 因此，将鼠标悬停在您的英雄部分并通过单击灰色模块控件中的齿轮图标打开模块设置。

然后，仍然在“内容”选项卡中，向下滚动并打开链接设置。 在字段标题按钮 #1 URL 中放置文本“#donate”。 这将用作我们将在下面创建的表单的锚链接。

最后，导航到“设计”选项卡并打开“副标题文本”设置。 将副标题字体粗细设置为粗体。

第一部分现已完成。 向下滚动到第三部分（带有大引号的部分），然后单击蓝色部分控件中的齿轮图标。 将背景颜色设置为#F6F6F6。

接下来，打开报价文本模块的模块设置。 将其背景也更改为#F6F6F6。

此部分现在也已完成。 移动到它正下方的第四部分。 这是我们的捐赠表格部分。

由于此部分存在于布局包中，因此它更像是一个“承诺”部分，人们可以在其中使用联系表向您发送他们打算捐赠多少的承诺。 但是我们将把它变成一个真正的捐赠表格，我们可以直接接受钱。

让我们从部分设置开始并开始工作。首先，我们需要更改背景颜色。 将其设置为与上述部分相同的 #F6F6F6。

然后，在“设计”选项卡部分中，打开“间距”选项。 添加以下自定义填充：

顶部：250px

右：40px

底部：250px

左：40px

最后，仍然在部分设置中，导航到高级选项卡并打开 CSS ID 和类控件。 在 CSS ID 下写上“捐赠”这个词。

保存您的新设置。

我们现在需要摆脱我们的承诺表格。 它由两个文本模块和一个联系表单模块组成。 继续并删除它们。 在它们的位置添加一个文本模块。

在新的测试模块中，放置我们之前创建的 Give 捐赠表单的简码。 将背景设置为纯白色 (#ffffff)。

现在，导航到“设计”选项卡。 一个鲜为人知的秘密是，可以使用文本模块的设计设置在一定程度上自定义由第三方短代码生成的元素。

在文本选项下，配置以下设置：

文字文字大小：18px

文本行高：1.8em

在 H2 的标题文本选项下，配置以下设置：

标题 2 文字大小：36px

标题 2 行高：1.5em

在间距选项下，配置以下设置：

自定义填充：50xp（适用于所有领域）

在 Box Shadow 选项下，选择顶行（最右侧）的最后一个选项。 然后配置这个选项：

框阴影扩散强度：-2px

最后，在动画选项下，配置以下设置：

动画风格：弹跳

动画方向：向上

动画持续时间：800ms

动画延迟：400ms

动画开始不透明度：100%

配置完所有这些设计设置后，请保存它们。 您的捐赠表格现在应如下所示。

当然，这是一种完全可以接受的形式。 但在我看来，这有点无聊。 我想做两件事来增加它的趣味性。 首先，我们将匹配 Donate Now 按钮样式以匹配整个网站的其他 Donate 按钮。

通过转到Divi > Divi Library > General导航到您的主题选项向下滚动到自定义 CSS 框并将跟随按钮样式粘贴到那里：

/*Give Plugin Styles*/

.give-btn.give-btn-modal {
    background: #07C907;
    border: none;
    border-radius: 0px;
    color: #fff;
    padding: 20px;
    cursor: pointer;
    line-height: 1.2em;
    font-size: 18px;
    font-weight: bold;
}

#give-purchase-button.give-submit.give-btn {
    background: #07C907;
    border: none;
    border-radius: 0px;
    color: #fff;
    padding: 20px;
    cursor: pointer;
    line-height: 1.2em;
    font-size: 18px;
    font-weight: bold;
}

保存您的更改并返回到您的捐赠页面。 刷新它并查看您的表单。 它现在应该是这样的。

现在我们正在到达某个地方！ 让我们添加最后的润色。 我们之前开始创建的部分背景图像。

要完成它，请将浏览器窗口的大小调整为 1920×1120。 您可以使用类似 whatsmybrowsersize.com 的网站。

然后，将您的捐赠页面截图，并以我们的新表格为中心。 它应该是这样的。

在 Photoshop 中打开这个新屏幕截图以及我们之前创建的 Photoshop 文件。

使用矩形选框工具选择您的表单。 然后，转到“选择”>“反向”以选择除表单之外的所有内容。 删除您的新选择。 你现在应该有一个看起来像这样的画布。

您现在拥有一个大小正确的“表单模型”，您可以将其用作背景图像的参考。 打开两个 photoshop 文件后，将包含孤立表单的 photoshop 图层拖到背景图像文件中。

在图层面板中，将表单图层的不透明度调整为 50%。 然后，在稍后仍选中表单的情况下，单击锁定图标并将其锁定。 它现在应该是这样的。

您现在可以在图层面板中选择蔬菜图层。 使用套索工具选择单个元素，然后删除它们或重新排列它们，直到获得您喜欢的配置。 我的最终配置是这样的。

有了自己的最终配置后，您将转到文件 > 导出 > 导出为并选择 PNG 以保持透明背景。

现在我们可以将该图像添加到我们的捐赠页面的捐赠表格部分，回到我们的 Divi 网站。

打开部分设置。 在背景下保留我们之前设置的颜色并选择图像选项。 在此处添加您的新背景图片。 然后配置以下设置：

背景图片尺寸：实际尺寸

背景图片位置：中心

保存这些设置。 您的表单部分现在应该是完整的。

要完全完成您的设计（以匹配我们从文章开头的整页预览），只需更改其余页面部分的背景颜色以匹配屏幕截图中的背景颜色。 您将使用灰色 (#F6F6F6) 或白色 (#ffffff)。

众筹快乐！

有了 Divi 和像 Give 一样强大的插件，我们相信你在周二的捐赠努力一定会大受欢迎。 感谢您的关注。 如果您仍然需要本教程中涵盖的任何内容的帮助，我将在今天下午 3 点在我们的 Facebook 页面和 YouTube 频道上进行直播，在那里我将一次性展示整个过程。 随着我们的进展，我也会回答问题。 希望在那里见到你！