活动日历是 WordPress 的标准活动日历。 它适用于 Divi,但要将其添加到您的布局中 Divi,您必须使用简码。 样式是通过 WordPress 仪表板中的设置选项卡完成的。 这使得很难将样式与布局相结合 Divi。 一个名为的第三方插件 Divi活动日历模块 通过将“事件日历”显示为Divi模块来解决此问题。 在本文中,我们将看到Divi Events Calendar模块,并了解其功能。

Divi活动日历模块的安装

活动日历wordpress divi插件

首先,从以下位置安装插件 活动日历 。 如果未安装此插件,您将收到一条错误消息,告知您需要安装该插件,并提供指向该插件的WordPress页面的链接。 

然后下载并激活Divi Events Calendar Module插件并激活它。

配置事件日历插件wordpress

对于我的示例,我为Divi和WordPress创建了一组事件,它们具有不同的类别,组织者,位置和日期。

Divi活动日历模块

活动日历模块divi

两个新模块被添加到Divi Builder中。 第一个称为Divi Events Calendar,将事件作为卡片显示在列表中,就像博客文章一样。 第二个称为Divi Event Calendar View,它在日历上显示事件。 日历视图模块仍处于测试阶段。 目前,它的功能有限。 我们将研究两个模块。

对于第一个,我使用的是Meetup Schedule页面布局包。 我用Divi Events Calendar模块替换了此页面上的事件。

内容选项卡

配置divi内容选项卡

模块自动显示事件。 它包括标准 Divi 选项卡。 选项卡 包装内容 添加 内容 和元素。 它默认添加蓝色背景。

包装内容

选择内容分类模块的类型

部分 包装内容 允许您输入要显示的事件数、要包含的类别、日期格式、片段长度和偏移量。 在此示例中,我将 Divi 事件类别中的事件限制为 2 个。 我将偏移量设置为 1。

分子

配置divi元素的显示

Elements 允许您选择要显示的元素。 这包括特色图片、展会组织者、 网站Web、日期、时间、地点、位置、摘录、类别、更多信息按钮和过去的事件(这将模块限制为仅显示过去的事件)。 我将其配置为隐藏特色图片和展会组织者。

设计选项卡

配置divi设计选项卡

“设计”选项卡添加了布局,缩略图,标题文本,详细信息文本,提取的文本和“显示更多”按钮的选项。 文本的工作方式与常规文本模块相同。 我们将仔细查看布局,缩略图和“显示更多”按钮。 阴影边框和框适用于单个卡。 这是我想在许多Divi模块中看到的东西。

提供

选择divi布局

该布局使您可以选择列数(1-4),图像对齐方式(左或上),背景颜色,边距和填充。 我将图像放在顶部,并将背景更改为白色。 事件卡之间始终显示蓝色。

配置divi列数

在此示例中,我将列设置为2,并添加了页边距和填充以使卡片适合蓝色背景,并创建了边框。

创建divi活动日历

这是3列的示例。 我可以调整网址文字使其适合。 在3列上,图像的位置不是选项。

配置divi列

这个有2列,左边的图像。

贴纸

自定义divi贴纸

缩略图设置包括边距,填充,宽度,角,边框样式,边框宽度,边框颜色和边框样式。 在此示例中,我将填充设置为75,以使图像位于地图的中心,宽度为100。

配置divi图像大小

对于此示例,我将角设置为36像素,并为其设置了9像素的边框宽度。 我设置了边框颜色的样式,并给它添加了插图样式。

文本

自定义divi模块文本

我调整了标题文本以使其与布局相匹配,并具有轻巧的Roboto字体和所有大写字母。 默认情况下,我保留了摘录和详细文本。

显示更多按钮

显示更多divi按钮

在此示例中,我使用了按钮布局的样式。 我将尺寸设置为14像素,调整了背景颜色,更改了边框的宽度和半径,并在所有大写字母中以粗体选择了Roboto。 我保留了默认的悬停效果,这增加了按钮的大小,如顶部按钮所示。 我还保留了默认文本,即“ VIEW”。

对于此示例,我使用了先前示例中的大多数设置,但进行了一些修改。 我删除了蓝色背景,更改了边框的半径,并删除了边框。 我还将类别限制为仅显示Divi事件(我创建的示例的两个类别之一)。 限制设置为2个事件。

对于此示例,我将布局设置为显示3列。 我删除了按钮边框并居中对齐按钮。 我还删除了URL,更改了细节文字的颜色,更改了按钮文字,并给了卡片一个阴影,使它们在背景下显得突出。

Divi活动日历查看模块

演示模块事件日历

这是第二个模块的概述。 它提供事件的日历视图。 日历包括月份,年份,导航,并突出显示今天的日期。 这是美术馆布局包的“事件”页面。 将鼠标悬停在事件上会显示一个包含信息的弹出窗口。 这是默认视图。

修改模块布局

“设计”选项卡添加模块文本的参数。 它将可选地包括标题,月份等的设置。 在此示例中,我调整了文本的粗细,颜色和大小。 这将调整日历上的日期。

更改divi日历模块的颜色

对于此示例,我将字体系列更改为Roboto,并调整了颜色,大小,字母间距和行高。 我还给文本添加了阴影以帮助其突出显示。 除“今日”按钮外的所有文本均受尺寸,间距和高度的影响。

如何添加divi日历模块

您还可以调整边框,背景,框阴影等。 在此示例中,我将模块文本设置为大写。 这包括月份和日期的文本。 我还调整了背景,为模块添加了边框(使用双边框样式),并为其添加了阴影。 边框与文本的颜色相同。

divi 模块日历概览

为此,我为布局框添加了颜色和阴影设置。 我喜欢它与布局设计一起工作的方式。 即使调整次数有限,日历显示模块还是值得与Divi布局一起使用的。

价格和文件

您可以在 开发者网站 35 美元。 它包括无限使用 网站Web、终身支持和更新,以及 30 天退款保证。

文档 包含一个视频和一个简短的文章,以指导您完成安装过程,还提供了一些简短的文章,以展示如何使用它以及如何进行更新。 幸运的是,我不需要查阅文档(模块非常直观),但是很高兴看到它在需要时可用。

其他资源

结束思想

这是我们对Divi的Divi活动日历模块插件的看法。 这些模块的工作方式与任何Divi模块一样,因此可以轻松设置事件样式以与Divi布局一起使用。 主日历模块甚至包括针对模块中各个元素的填充,边距和边框调整。 这使您可以控制将其样式设置为单独的卡片。

如果需要更多控制,它可以让您输入要显示的类别。 这是唯一与其他模块不同的功能,其他模块可让您从下拉列表中选择选项。 我更喜欢下拉选项。 我希望将来能有所改变。 我还希望能够根据位置,事件组织者等选择事件。

活动日历本身对于任何人来说都是一个很棒的工具 网站Web。 它对于拍摄照片、音乐会、产品展览、贸易活动、会议等非常有用。 如果您想在 Divi 网站上使用活动日历插件,那么 Divi 活动日历插件值得一看。