晋城公司网页设计：如何使用PoteriaStudio布局包将事件日程安排和预订添加到您的站点

如果您想要添加事件调度到您的网站，这是您的教程。现代事件日历插件结合Divi的美丽布局是一个有效的组合，无论在设计和功能。

晋城公司网页设计在本教程中，我将展示如何将事件调度和预订添加到Divi的PotteryStudio布局中。我将向您展示如何添加新事件，以及如何创建自定义的短代码，以便在您的网站上显示事件日历。以下是我将涉及的内容的简要细目：

如何配置现代事件日历插件设置。

如何创建新事件。

如何使预订功能包括事件页面中的预订表单、支付网关和电子邮件通知。

如何创建自定义短代码以不同方式显示事件日历。

如何样式您的事件页面，以匹配您的Divi布局。

我们开始吧!

偷窥

下面是我们将要创建的事件页面的一个简要介绍。

这是你需要的

要完成本教程，您需要以下内容：

Divi主题(已安装和活动)。

陶艺工作室布局包。实际上，我将只使用“陶艺工作室”类页面布局。

现代事件日历插件(已安装和活动)

现代事件日历设置

首先，我将通过设置来获得所需的功能，以便为我们的活动调度和预订提供所需的功能。有大量的选项可供选择，当您试图完善用户体验时，计划或预订活动时，这将真正增强您的能力。

一般选择

我将把这些一般选项留给他们的默认选项，因为这确实是我所期望的大多数人所需要的一个坚实的设置。

出于SEO的目的，您可能需要添加您自己的存档页面标题。

鼻涕虫/翡翠墨水

也不需要更改此设置。但是，如果您提供的事件只会是您的站点的类，您可能会将主程序改为“类”而不是事件。这样，您的事件页面url将读取类似于以下…的内容www.website.com/Class/pottery 101/。

事件详细信息/单个事件页

将单个事件样式更改为现代样式。我更喜欢布局的设计。

货币期权

在这里添加美元货币符号$。

谷歌地图选项

如果要显示事件位置的谷歌地图，请检查在事件页面上显示GoogleMaps的选项。然后输入API密钥。我会把缩放等级定在14左右，这更接近街道的水平。GoogleMaps样式选项也是一个不错的触摸，但我现在保留默认样式。

Google Recaptcha选项

由于您将需要一个预订表，您可以启用这一点，如果您想要防御垃圾邮件的机器人。

出口模块选项

保留选中的GoogleCalendar和iCal选项，以便用户可以选择将这些事件添加到事件页面上的个人日历中。

局部时间模块

我将根据事件页面中访问者的本地时间选择显示事件时间的选项。这是一个更好的用户体验，我不需要担心添加时区和混淆访问者。

QR码模块

我不会使用QR代码，但它是一个很好的特性。QR代码将显示在事件详细信息页面上，并显示在用户预订事件后获得的发票上。

气象模块

在这里，您可以向事件页面添加天气模块，以显示事件的天气条件。您将需要它在DarSky.net注册并获得一个API密钥。

倒计时选项

选择倒计时计时器的翻转样式。在事件页面上看起来很棒。

社会网络

我将保持所有的社交网络活动，以便他们显示在事件页面。

下一个事件模块

如果要在单个事件页上显示即将发生的事件，请检查以在事件页上显示下一个事件模块。

前端事件提交

对于本教程，我不允许用户提交自己的事件。但是，您可以在这里选择要显示用户添加的事件列表以及希望用户添加和编辑其事件的页面。

前端事件提交部分

这些选项可供用户自定义自己的事件。与本教程无关。

例外日子

启用此选项允许您在添加新事件时排除事件发生日期的特定天数。

预约

这是一个重要选项。单击以启用预订模块。现在，用户将能够通过事件页面上的预订表单注册事件。它还允许他们支付他们的门票，就在那里的网页。

我也建议选择所有的选项，允许自动验证一个更顺畅的注册过程。

优惠券

启用此功能将在事件页上显示优惠券模块。现在不需要这样的选择，但很高兴知道它在这里。

税收/费用

通过启用赋税和收费模块并在这里添加它们，您将能够在添加新事件时选择它们。

BuddyPress集成

对于那些使用BuddyPress的人来说，这是一个很好的特性。它允许您在“活动详细信息”页面中显示所有与会者，还可以在用户配置文件中显示预订活动。

MailChimp集成

在这里，您可以集成MailChimp将用户添加到列表中。

确保保存更改并刷新页面。由于启用了预订功能，您将在“设置”菜单中看到另一个选项卡，显示预订表单。

现在我们已经配置了我们的设置，让我们继续进行预订表单的设置。

将自定义字段添加到预订表单中

在MEC设置页上，单击“预订表单”选项卡。这是在事件页上显示的允许用户预订事件的表单。可以在“设置”页的“预订表单”部分中向此窗体添加自定义字段。默认情况下，您的预订表单将捕获用户的姓名和电子邮件。这就是我所需要的，所以我不会添加任何自定义字段。

添加支付网关

MEC有5个支付网关选项，包括Paypal，WooCommerce和Stripe。您甚至可以选择将您的支付网关设置为本地支付。

在用户填写预订表以预订付费事件后，将提示他们根据您的支付网关选项支付此事件的费用。

由于我将与Stripe集成我的表单，我所需要做的就是选择Stripe选项并添加秘密和可发布的键。

我也将把当地的工资作为一种选择。

配置电子邮件通知

在MEC设置菜单上，单击通知。在这里，您可以自定义所有通知电子邮件，包括预订通知、验证和确认。请随意定制，以满足您的需要。因为我选择了自动验证在我的设置，我的注册人将不会收到验证电子邮件，只有确认电子邮件。

配置样式选项

接下来，单击“样式选项”选项卡。这是将事件页面的设计与Divi布局匹配的一个重要部分。

由于我使用的是陶艺工作室布局包我的网站，我将使用一个颜色，以匹配布局的主要重音颜色(橙色)。

输入以下自定义颜色皮肤：#fdb 467

在排版下，选择波平斯用于标题和段落字体系列。

添加用于按困难标识事件的标签

若要添加新标签，请转到WordPress仪表板并导航到M.E.日历>标签。

加上名字“初学者”和鼻涕虫“初学者”。然后给它一个颜色，并选择添加新标签。

重复此操作，再创建两个标签：中间标签和高级标签。

为您的事件添加位置

晋城公司网页设计为事件添加新位置后，您将能够选择在事件页上显示该位置。你甚至可以自动显示谷歌地图。

若要添加新位置，请导航到M.E.日历>位置。输入名称和段塞，并输入地址到位置(您不必把纬度和经度)。然后单击“添加新位置”。

就这样。

对于本教程，我将添加休斯顿作为我的位置。

为您的活动添加组织者

当您将组织者添加到MEC时，您将能够轻松地在活动页面上展示这些组织者。若要添加新的组织者，请导航到M.E.日历>组织者。输入一个名字，鼻涕虫，电话号码，电子邮件，网址的组织者个人资料页(如果他们有)，并上传一个图像作为那里的肖像。然后单击“添加新组织器”。

在本教程中，我将添加“陶艺工作室布局类”页面中的相同组织者：

添加新事件

现在是开始添加您想要提供的事件的时候了。对于本例，我将提供与布局包中的研讨会和类相关的事件。我将添加3个类/事件，以便用户可以安排一个特定的陶器类。我要举办3场研讨会。

要添加一个新事件，请转到WordPress仪表板并导航到M.E.日历>AddEvent。

举办一次工作坊活动

若要设置一次性工作坊活动，请执行以下步骤：

1.加一个标题。

2.添加事件描述

3.添加事件的开始和结束日期和时间。因为这是一个只持续一天的一次性事件，所以在开始和结束日期输入字段中放置相同的日期。

4.您可以在这里为您的车间添加每小时的时间表。这有助于概述活动当天将发生的事情。

5.从下拉输入框中选择您已经输入的事件位置。

6.从下拉输入框中选择活动组织者之一。

7.输入事件的成本。这将显示在事件页面的顶部。

8.为了激活此事件页面上的预订表单，您将需要为该活动添加一张票证。输入票务成本、票务成本标签和可供购买的门票数量。

9.添加您为事件创建的任何标记。

10.添加您可能拥有的任何类别。例如，您可以输入讲习班类别，以便在需要时可以按此类别筛选事件。

11.为您的事件添加事件颜色。

12.你可以为任何东西创建标签。由于我已经创建了三个标签来指定难度级别，所以请为您选择一个难度级别标签。

13.为事件设置一个特征图像。确保您的图像足够大，足以跨越整个浏览器的宽度，以获得最好看的结果。在我看来，1920×600的尺寸是理想的。此外，您还希望保持所有事件特征图像的大小相同，以便它们在以列表或网格格式显示事件时看起来一致。

14.保存你的活动。

在本教程中，我总共创建了三个研讨会活动。

设置定期的每周类事件

若要设置重复的每周课堂事件，请按照与创建一次性讲习班事件相同的步骤进行操作，有以下差异：

启用事件重复选项。然后选择要让类重复的方式。由于我希望我的班级每个星期一重复，我选择了某些工作日作为我的重复选项，然后我选择了星期一作为我的周日选项。

我还选择了在6次事件发生后结束的事件。这相当于6个星期一或6个星期。

此外，您将希望选择类作为您的类别，而不是车间。

这是类事件的最终结果。

在本教程中，我总共创建了三个类。

生成显示事件日历的自定义短代码

现在我们已经创建了单个事件页面，我们可以构建一个页面来展示我们的所有事件。幸运的是，MEC为您提供了大量显示事件的选项。我没开玩笑。您可以使用事件日历的短代码生成器显示事件日历。您可以通过导航到M.E.日历>短代码来访问短代码生成器。

短代码生成器允许您从16种不同的皮肤中进行选择。

每个皮肤都有自己的风格选项。

还可以筛选希望在“筛选器”选项下显示的事件。

您还可以选择将搜索表单显示在日历的顶部，这样用户就可以使用表单自己筛选日历。

一旦您完成了您的短代码，您只需复制短代码框中的短代码，然后将其粘贴到您的页面上。

在本教程中，我将创建两个自定义的短代码，以便在滑块视图和最小网格视图中显示我的日历。

若要生成滑块视图，请添加新的短代码并更新以下内容：

蒙皮：滑块视图

风格：3型

保存短代码。

网格皮肤短编码

若要生成网格短代码，请添加新的短代码并更新以下内容：

皮肤：网格视图

风格：最小

显示搜索表单：已禁用

保存短代码。

现在我们已经创建了两个短代码。让我们创建事件页面来展示我们的事件。

构建自定义事件页

对于事件页，我将使用PotteryStudio类页面布局。创建一个新页面，将其命名为“类和工作坊”，并部署可视化构建器。然后从库上传PotterStudio类布局。

在第一个部分下添加一个全宽度部分，其中包含一个全宽度代码模块。然后将前面创建的Slider视图短代码添加到Content选项卡下的Content框中。

然后在“设计”选项卡下给它一个-20 px底部的自定义保证金。

保存设置。

删除作为页面标题的原始顶部部分，以便滑块现在是顶部部分。

在第二节中，有三行。单击此处编辑第二行中的文本模块。在“内容”框中，删除虚拟文本，并添加先前创建的“网格皮肤”短代码的短代码。

直接删除该行下面的行。然后将该部分的背景更改为白色。

现在，您有了一个滑块，它显示您的工作坊和班级事件，以及相同事件的网格布局。用户可以单击这些事件中的任何一个，它们将被带到单个事件页，在该页面中，他们可以查看事件信息并为事件注册。

管理您的预订

MEC允许您从WordPress仪表板中管理所有预订。您甚至可以手动添加预订，这是一个不错的特性。

最后思想

我情不自禁地觉得我缩短了这个教程，仅仅是因为现代事件日历插件提供了更多的东西。短代码生成器可以创建这么多其他选项。让我向您展示完整的日历视图是什么样子。

晋城公司网页设计只是打破了所有可用于显示事件的不同选项的表面。

总之，一旦所有元素都就位，添加和显示事件是一个非常容易的过程。加上能够在DiviBuilder中嵌入短代码的额外好处，您没有理由不能为您的网站提供一个华丽的事件调度选项。

我期待着在评论中听到你的意见。

干杯!