朝阳网络制作：如何使用Divi和WooCommerce创建自定义事件列表和注册页面

如果您在举办活动的朝阳网络制作组织中运行或帮助志愿者，那么您可能熟悉各种各样的活动规划、管理和促销工具。有Facebook，Meetup，还有很多WordPress插件，它们都有一些不同的方式来完成设置事件的任务。

这些工具很棒。对于我能想到的几乎每一个用例，其中一个都能完美地工作。但是在某些情况下，例如在一个只做几个一次性活动或少量年度活动的组织中，这些选择可能是过分的。或者，他们在代表事件对您的组织有多重要方面做得不够好，因为在许多这些工具中，所有事件看起来都是一样的。

毕业典礼或晚宴，以纪念一位特别的客人，真的应该看起来和感觉和休闲野餐一样吗？

如果你问我的话，答案是否定的。

但是，如果这些工具都不适合这项任务，这就引出了另一个问题：我们应该做什么呢？

我的回答是：用Divi创建自定义事件列表和注册页面！

最终结果预览

我们周一发布的“农民市场布局包”已经有了一个定制的事件页面。所以这个元素就被处理好了。您可以免费下载该布局包，并按原样使用该设计，也可以将其调整为您的首选项。

但是正如您所看到的，这些事件中的每一个都有一个链接，上面写着“注册信息”。如果你想把它和Facebook或者Meetup联系起来-工作完成了。但是，如果你想要更多地控制你的整个活动细节的设计和注册过程，你可以链接到你的网站上的一个页面，如我在下面设计的页面。

此自定义事件列表/注册页面将允许您以完全品牌的方式呈现您的事件，从而提供您希望与您的组织进行交互的人的体验。

相当整洁，对吧？

下面是如何自己创建它！

准备设计资产

您需要跟随本教程的主要资产是我们全新的(免费)。农贸市场布局包。按照那篇文章中的说明下载并安装它。然后，我强烈建议遵循这篇文章中概述的步骤把你的网站提升到下一个层次。

您还需要从“农民市场布局包”中下载“图像资产”文件夹。它位于柱子的最下面。其中有一个不在布局包中的图像，我们希望使用它，称为农民-市场-22.jpg。我把这张图像的尺寸从2496 px的1665 px调整到1200 px的800 px。

我所使用的唯一未包括在农民市场布局包或图像资产中的图像是设计的“满足您的指导员”部分的600 pxx800px肖像图像。因此，在接下来的过程中，您将需要为本节提供您自己的图像。

(或者抓住我用过的那个我们先前发布的旅行布局包.)

如何使用Divi和WooCommerce创建自定义事件列表和注册页面

在Divi中创建自定义事件注册页

首先，让我们创建一个新的页面页面>添加新在WordPress管理中。从我们的节目单页面，我将创建一个注册页面是有机烹饪班，应该在9月份举行。所以我会把我的新页面叫做“九月有机烹饪课”。然后，我们需要点击紫色使用DiviBuilder按钮。

现在，我们可以通过单击“使用VisualBuilder”的蓝色按钮将东西移到网站的前端进行设计工作。

要开始工作，请单击“蓝色齿轮”图标来打开您的区段设置。在“背景”下，单击“图像”选项卡，并添加我们调整大小的农民-市场-22.jpg图像。然后，将背景图像混合设置为重叠。

然后，在背景设置中，跳到颜色选项卡并将背景色设置为RGBA(0、0、0、0.47)。保存你的设置。

接下来，是时候添加我们的页面标题了。单击绿色行中间(而不是其底部)的绿色加号图标，为该行选择列首选项。选择单列。然后将提示您插入一个模块。插入文本模块。

输入文字“九月有机烹饪班”，并将您的段落样式设置为H1。

然后跳到文本模块的“设计”选项卡中，打开标题文本的设计设置。配置以下设置：

标题字体：Lato

标题字体重量：粗体

标题文本对齐：中心

标题文本大小：46 px

标题文本颜色：#ffffff

接下来，向下滚动到空格选项。配置以下设置。

填充顶部：100 px

填充底部：75 px

保存这些设置，然后创建一个新的常规部分(蓝色)。为您的行选择两个相等列选项。在左边的列中添加一个图像模块。我使用的图像名为Product-14.jpg，它应该已经在您的媒体库中了，因为您使用的是农民市场布局包。

在第二行列中，添加一个文本模块。写出以下文字：

“今天预约座位

预定九月份有机烹饪班的位置。这次购买为您提供了一个有限的档位和所有的用品，您将需要跟随。带着你自己吧！“

使用你的段落样式将文本“保留你今天的位置”设置为H2。保存你的设置。现在应该有一个如下所示的节/行。

现在是定制的时候了！让我们从这排开始。我们希望它脱颖而出，因为这是我们的注册页面的主要行动呼吁。将行背景色设置为#e55039。

现在让我们跳到行的设计选项卡中。打开间隔选项并配置以下设置：

自定义填充：所有选项的0px。

第2栏自定义填充：

顶部：60 px

右：25便士

底部：25便士

左：25 px

保存设置。

现在打开图像模块的设计设置。在“尺寸”下，选择“是”在“力量全宽”下。在“间隔”下配置以下设置。

海关保证金：

顶部：-40 px

底部：-40 px

定制衬垫：

左：60 px

最后，转到动画设计设置并配置这些设置。

动画风格：幻灯片

动画方向：向上

动画强度：8%

动画启动透明度：100%

保存设置。

现在是处理第二行列的时候了。从朝阳网络制作已经存在的文本模块开始。打开文本模块设置并转到“设计”选项卡。在文本下配置以下设置。

文本颜色：光

文字字体：蒙特塞拉特

文本大小：18 px

文本线高度：1.8em

文本导向：合理

(要设置文本方向，请向下滚动文本阴影设置。)

在标题文本设计设置下，将以下内容应用于h2标题样式。

标题2字体：Lato

标题2文本对齐：中心

标题2文本大小：36 px

标题2线高：1.8em

接下来，在“间隔”下，应用以下设置。

定制衬垫：

顶部：10 px

右：60 px

底部：10 px

左：0 px

现在我们需要添加按钮。在文本模块下，我们刚刚样式，添加一个新的按钮模块，点击灰色加图标浮动在文本模块的底部。输入“购买您的票证”作为按钮文本，并直接移动到设计设置选项卡。

将按钮对齐设置为中心。然后，向下移动到按钮选项，并选择使用自定义按钮样式按钮。将这些设置应用于您的按钮。

按钮文本大小：18 px

按钮文本颜色：#ffffff

按钮背景颜色：#07c 907

按钮边框宽度：8 px

按钮边框颜色：RGBA(0，0，0，0)

继续应用这些自定义按钮设置。

按钮边框半径：0px

按钮字母间距：1 px

按钮字体：Lato

字体重量：粗体

接下来，向下移动按钮设计选项卡设置为间隔。应用这些设置。

自定义保证金权利：60 px

保存设置。

您对操作的主要调用现在已经完成，但是我们为其配置的设置使该部分感到有点局促。让我们回到我们的节设置，并将以下内容添加到我们的间距选项中。

定制衬垫：

顶部：110 px

底部：100 px

保存设置。

现在我们可以继续下一节了。添加另一个常规蓝色部分，并再次选择两列行。在左边的第一列中，插入一个文本模块。

增加以下案文：

“见见你的教练

Mus DUI eros lectus rhonus nec，dio risus，tortor，diissim temor ut。熟食朗库斯？[医]马尾松属植物。准整数，苏木，熟食女妖，沙瑞拉吉斯达斯！在马格尼斯相册，双瘤，大乌尔纳？

作者介绍：Agugueodiourna ut et platea整数Plerat，tristitor smadtis Aenean ac in，tristies Magnisenim tortor ultrice.三味鼻塞图。洛林，在火鸡饼干里！达皮布斯奈姆，在达菲西姆天鹅绒，乌尔纳弧托，NEC。“

将顶部的“遇见你的指导员”线设为H2。然后转到文本模块的设计设置。

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

文字字体：蒙特塞拉特

文本大小：16 px

文本线高度：1.8em

文本导向：合理

接下来，转到标题文本设计设置，并为您的H2文本配置以下内容。

标题2字体：Lato

标题2字体重量：粗体

标题2文本大小：36 px

标题2线高：2.7em

保存设置。

现在是时候在新行的第二列中添加我们的肖像图像了。添加图像模块，选择肖像图像并配置以下设计设置。

对齐：中心

施胶宽度：75%

保存设置。

好了，这一节就快结束了。我们只需要对部分设置本身做一些最后的修改。单击蓝色齿轮图标并在背景下选择图像选项。添加名为back-texture.png的图像。然后，跳到Design选项卡并配置以下设置：

间距：

顶部：60 px

底部：60 px

动画：

动画风格：幻灯片

动画方向：向上

动画延迟：200 MS

动画强度：2%

保存设置。

好的，我们还有两个部分。添加另一个蓝色正则部分，这一次使用单个列行。在您的行中添加一个文本模块，并在其中写入“我们将使用什么”。将文本设置为h2并跳入设计选项卡。在标题文本(当然是H2)下配置以下设置。

标题2字体：Lato

标题2字体重量：粗体

标题2文本对齐：中心

标题2文本大小：36

保存设置。

将另一个列行添加到我们刚刚完成的列的正下方。这一次，向它添加一个图库模块。将图像编号更改为8，并从媒体库中选择8幅图像。在“元素”下，关闭两个选项，以便没有显示标题、标题或分页。

接下来，跳到“设计”选项卡上，将覆盖颜色更改为#0DC20D。保存你的设置。

现在打开库模块的行设置。转到“设计”选项卡，在“间距”下将排水沟宽度设置为1。保存设置。

最后，打开这个区段设计选项卡，在空格下面给整个部分一个80 px的顶部填充。然后创建一个新的蓝色规则部分。这将是页面的最后一节。

添加新的单列行。但是，不要插入一个空白模块，而是从上面的部分复制文本模块(上面写着“我们将使用什么”的模块)。您可以通过右键单击它并选择“复制模块”来完成此操作。粘贴到你的新行。

直接点击课文，用“你会学到什么”来代替它。

在新文本下面添加一个新的两列行。在左边的列中添加一个图像模块。从媒体库中选择垂直方向的剪贴板图像。

在“图像模块设计”选项卡中，将对齐设置为“中心”，“尺寸”设置为“90%”。然后，将下列设置应用到“动画”部分。

动画风格：幻灯片

动画方向：右

动画强度：5%

保存设置。

在右边的列中，添加一个blurb模块.在内容设置下，添加标题和描述性文本。然后，确保打开你的图标下的图像和图标。我选择使用复选标记图标。

在Image&Icon下的blurb模块设计选项卡中，将图标颜色更改为#07c907，将图像/图标放置更改为左侧。在正文文本下，将线条高度设置为1.8em。然后，向下滚动到动画选项并应用以下设置。

动画风格：幻灯片

动画方向：左

动画强度：5%

保存设置。

接下来，复制并粘贴你的信息两次。您可以更改内容，但这将使您的设计设置更容易，以重新创建每一个脱口。

我们还有一个行要添加，但是在完成之前，让我们向我们一直使用的两列行添加一些填充。打开行设置。转到“设计”选项卡，在“间距”下，将50 px添加到第2列的顶部。

我们需要添加到页面的最后一个设计元素是最后一次调用操作按钮。因为我们已经在页面的顶部有了一个按钮，这将是很容易的。

添加新的单列行。但是，与其添加一个新的按钮模块，不如复制前面创建的按钮并粘贴到这里。然后，打开按钮设置。

将文本改为“今天预定位置”。然后转到“设计”选项卡。在“间距”下，删除已经存在的自定义边距，并添加100 px的上边距。保存你的设置。

最后但并非最不重要的是，进入您的最后一节的设计设置，并给整节80 px的顶部填充和60 px底部填充。保存这些设置。保存页面设置。然后退出视觉构建器。

你的最终设计应该是这样的。

将注册页面连接到WooCommerce“票证”

在这一点上，我们有一个漂亮的注册页面。但它和任何东西都没有联系！我们当然可以解决这个问题。这是怎么做的。

我们将在WooCommerce创建一个虚拟产品来销售我们的门票。有票扩展为WooCommerce，但为了我们的目的，这将同样有效。在WordPress管理中导航到插件>添加新。搜索WooCommerce并安装/激活它。按照启动向导。当最后提示时，选择创建一个新产品。

添加产品标题，将页面布局更改为全宽度，添加完整的产品说明，将产品设置为虚拟，设置价格，添加产品类别，输入简短的产品说明，然后添加产品的功能图像。预览以确保一切都正确显示，然后发布您的新“票证”产品。

现在，您可以将您的新产品链接到上面创建的按钮。另一个你想要设置的链接是事件页面上的“注册信息”链接到你的新注册页面。

终思

朝阳网络制作举办大型活动是一项很大的工作。所以，按照我的想法，如果你已经做了大量的工作来把这件事放在上面，你最好在向公众展示它的时候多花点功夫。这样的解决方案才是完美的。我希望你发现它有帮助，你的下一个重大事件是一个巨大的成功！如果您对上面使用的执行或工具有任何疑问，请在下面的评论中随意删除。