使用 Divi 创建令人惊叹的事件自定义帖子类型模板

已发表: 2018-08-03

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

本周，作为我们正在进行的 Divi 设计计划的一部分，我们将向您展示如何使用免费的 Meetup 布局包通过 Divi 创建令人惊叹的活动自定义帖子类型模板。 Divi Builder 自定义帖子类型支持功能使此用例教程成为可能，这是 Divi 最近的更新之一。我们将创建一个与 Meetup Layout Pack 相匹配的模板。创建此模板后，您将能够将其重复用于您在网站上共享的所有活动。

让我们开始吧！

预览

在我们深入学习教程之前，让我们来看看不同屏幕尺寸的最终结果。

事件自定义帖子类型

安装事件日历插件

转到插件并添加一个新插件

要将事件自定义帖子类型添加到我们的网站，我们将使用事件日历插件。这是一个免费插件，您可以通过转到WordPress 仪表板 > 插件 > 添加新 > 搜索事件日历插件来找到它。

事件自定义帖子类型

激活插件

安装插件后，请确保立即激活它，以便您可以开始使用它。

事件自定义帖子类型

更改主题定制器设置

改变排版

现在，在我们创建活动之前，让我们首先了解我们网站的基本原理。转到您的WordPress 仪表板 > 外观 > 自定义，打开您的主题定制器。通过转到“常规设置”>“排版”来导航到您网站的排版。到达那里后，应用以下设置：

正文大小：16
车身线高：1,9
标题字体：Roboto

事件自定义帖子类型

活动日历设置

事件日历插件在主题定制器中也有一些自己的设置。返回主题定制器的主菜单> 事件日历 > 常规主题 > 并使用以下颜色：

强调色：#06c8ff
特色高光颜色：#06c8ff

事件自定义帖子类型

返回事件日历 > 常规主题的设置，并为您可以在那里找到的所有选项使用相同的“#06c8ff”颜色。

事件自定义帖子类型

添加新事件

我们现在准备创建一个新事件。为此，请转到您的WordPress 仪表板 > 事件 > 添加新。添加新事件后，请确保为其命名。

事件自定义帖子类型

添加事件详细信息

继续输入您的活动详细信息。这包括：

时间和日期
地点
主办方
活动网站
活动费用

事件自定义帖子类型

添加特色图片

还将特色图片添加到您的活动中。在这篇文章的后面，我们将从前端删除它，但我们仍然需要它来进行社交分享。

事件自定义帖子类型

更改分区页面设置

在活动的右上角，您将看到 Divi 页面设置。在那里，通过为页面布局选择“无侧边栏”来删除侧边栏。

事件自定义帖子类型

发布活动

我们现在准备开始在前端工作。继续并发布您的活动。

事件自定义帖子类型

这是未启用 Visual Builder 的默认页面设计：

事件自定义帖子类型

打开聚会登陆页面并保存设计元素

定位并保存行到 Divi 库

高效工作比努力工作更重要。这就是为什么我们要通过重用 Meetup Layout Pack 的元素来节省一些时间和精力。首先使用 Divi 的 Visual Builder 打开登录页面。然后，在您的页面上找到以下行并将其保存到您的 Divi 库中：

事件自定义帖子类型

找到部分并将其保存到 Divi 库

我们还需要以下部分，所以继续并保存这一部分：

事件自定义帖子类型

开始创建事件自定义类型模板

添加自定义 CSS 代码行以匹配 Meetup 布局包

我们可以将 Visual Builder 用于事件页面，但不幸的是，我们不能在任何地方使用它。为了确保一切都符合 Meetup Layout Pack，我们将提前添加几行 CSS 代码：

#tribe-events {
margin: 5%;
}
.tribe-events-single-event-title {
font-weight: 300;
font-size: 60px !important;
}
#tribe-events-content a {
font-family: Roboto !important;
font-weight: 300 !important;
}
.tribe-events-event-image{
display: none;
}

事件自定义帖子类型