晋城网店制作：如何用Divi和GiveWP创建一个周二登陆页面

如果你还没听说，我们正准备开始一场大规模的黑色星期五及网络星期一运动优雅的主题。但每年这个时候还会发生另一件很酷的事情。它叫礼拜二(今年是11月28日)，这是世界非盈利组织的一项努力，提醒每个人，当他们把钱包拿出来买东西的时候，他们可能也会考虑捐钱给那些有需要的人。多酷的主意啊！由于晋城网店制作的业务是赋予我们的社区权力，我们认为帮助那些使用divi(或额外的)并为非营利组织工作的人做出他们能够做到的最好的周二捐赠登陆页面是个好主意。

下面简要介绍一下我们今天将要创建的内容。

最终结果预览

在今天的帖子，我们将创建一个美丽的捐赠星期二登陆页，完成了一个视觉上令人惊叹(当然，功能，)捐赠表格。

安装GiveWP插件&创建一个新表单

我们将在本教程中使用的捐赠表格是由GiveWP插件生成的。要安装它，请在WordPress管理员中导航到插件>添加新。在那里，使用搜索功能找到给插件。单击“立即安装”按钮，然后激活它。

接下来，去捐款>加表。输入表单标题。我选择了“支持当地农民和可持续农业”。

接下来，你会注意到捐款表格的选项。让我们一页接一张地浏览它们。

在第一个选项卡“捐赠选项”中，在顶部部分配置以下设置。

捐赠选项：多层次捐赠

捐款展示：按钮

自定义金额：已启用

在捐赠水平部分，设置以下捐款水平：$1，$5，$10，$25，$50，$100。确保将5.00美元的捐款水平设置为新的默认设置。

现在转到Form Display选项卡。这里唯一需要做的就是将显示选项设置更改为Modal。

在“捐赠目标”选项卡中，首先启用“捐赠目标”选项。一旦你这样做了，设定你的目标数量。我把我的钱定在1000美元。我还将目标格式设置为百分比。这将让形式观众知道我们已经达到的目标的百分比，而不是我们筹集到的资金的实际数额。最后，我稍微更改了进度条的颜色，使其与整个网站(#07c907)中使用的相同的绿色相匹配。

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

为了本教程的目的，这些都是我们需要配置的表单设置。单击“发布”按钮，注意您稍后将需要此捐款表格的短代码。

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

准备好您的图像资产

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

为了创建这个图像，我使用了Photoshop，但是您可能也可以使用一个名为瘸子。这是一个具有许多相同特性的开源工具。

下面是如何创建它。

首先，给自己找一个与你的非营利相关的元素的形象。因为我使用的例子是一个农贸市场，所以我决定使用蔬菜。我在一个股票图片网站上搜索“隔离蔬菜”。通常，股票图片网站上的“孤立”一词指的是白色背景上的项目。这使得它们很容易通过删除背景来隔离。我就是这么做的。

这是我找到的一张照片。 

然后我在Photoshop里打开了这张照片。

由于初始层在默认情况下是锁定的，所以通过右键单击它并选择“重复层”来复制它。然后，通过单击第一层旁边的眼睛图标来隐藏第一层。

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

接下来，在顶部菜单中导航到图像>画布尺寸把你的画布调整到1920×1080。当您这样做时，您的元素可能会比新的、更小的画布更大。

在键盘上点击命令+T或转到编辑>转换>缩放。调整孤立元素层的大小以适应新的画布大小。 

这就是我们目前在这张图片上所要做的。只需确保您已经保存了这个新的Photoshop文件。一旦我们有了新的捐款表格，我们就会继续往下走。

在Divi中创建设计

如果你还没有这么做，你会想下载并安装我们全新的(免费)农民市场布局包。请按照该帖子中的说明安装布局包。安装后，按照这篇博客文章中的说明让您的网站为下一阶段的定制，我们将在这里讨论。

准备好后，导航到您的捐赠页面，并使用页面顶部的Botton启用可视化构建器。我将逐段带您到页面下，进行自定义操作。

既然我们正在为星期二的竞选做好准备，我们也许应该在最上面提到这一点。因此，悬停在您的英雄部分，并打开模块设置点击齿轮图标在灰色模块控件。 

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

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

第一节现在已经完成。向下滚动到第三部分(具有一个大引号)，并单击蓝色部分控件中的齿轮图标。将背景色设置为#F6F6F6。 

接下来，打开晋城网店制作中的引号文本模块的模块设置。将其背景更改为#F6F6F6。

本节现在也完成了。接下来是第四部分，就在下面。这是我们的捐款表格部分。 

由于这个部分存在于布局包中，它更像是一个“保证”部分，人们可以使用联系人表单向您发送他们打算给多少的承诺。但我们要把它变成一种实际的捐赠形式，我们可以直接接受资金。

让我们从部分设置开始，并在其中工作。首先，我们需要改变背景色。将其设置为与上面一节相同的#F6F6F6。

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

顶部：250 PX

右：40 px

底部：250 PX

左：40 px

最后，当仍然在部分设置中时，导航到Advancedtab并打开CSSID&Class控件。在CSSID下写上“捐赠”这个词。

保存新设置。

我们现在需要去掉我们的抵押表格。它由两个文本模块和一个联系人表单模块组成。继续删除它们。在他们的位置上，添加一个文本模块。

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

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

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

文本大小：18 px

文本线高度：1.8em

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

标题2文本大小：36 px

航向2线高：1.5厘米

在“间隔”选项下，配置以下设置：

自定义填充：50 xp(适用于所有字段)

在“框影选项”下，选择顶部行中的最后一个选项(在最右边)。然后配置此选项：

盒影扩展强度：-2PX

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

动画风格：弹跳

动画方向：向上

动画持续时间：800 ms

动画延迟：400 ms

动画启动透明度：100%

配置完所有这些设计设置后，保存它们。你的捐款表格现在应该是这样的。

当然，这是一种完全可以接受的形式。但在我看来有点无聊。我想做两件事来调味它。首先，我们将匹配捐赠现在按钮风格，以匹配整个网站的其他捐赠按钮。

导航到主题选项，方法是divi>divi图书馆>总则向下滚动到自定义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。你可以使用这样的网站什么浏览器.

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

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

使用矩形框工具选择窗体。然后，去选择>逆选择一切但你的表格。删除您的新选择。现在应该有一个这样的画布。

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

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

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

一旦你有了你自己的最终配置文件>导出并选择PNG保持透明背景。

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

打开节设置。在背景下，保留先前设置的颜色，然后选择图像选项。在这里添加新的背景图像。然后配置以下设置：

背景图像大小：实际大小

背景图像位置：中心

保存这些设置。您的表单部分现在应该已经完成。

要完全完成您的晋城网店制作设计(为了匹配我们的整个页面预览，从文章开始)，只需更改其余页面部分的背景色，以匹配屏幕截图中的内容。您将使用灰色(#F6F6F6)或白色(#ffffff)。