spot_img
HomeDivi主题使用教程使用 Divi 创建令人惊叹的事件自定义帖子类型模板

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

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

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

让我们开始吧!

预习

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

事件自定义帖子类型

谷歌SEO优化服务

安装事件日历插件

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

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

事件自定义帖子类型

激活插件

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

事件自定义帖子类型

更改主题定制器设置

更改排版

现在,在我们创建活动之前,让我们先了解我们网站的基础知识。 转到您的,打开您的主题定制器 WordPress 仪表板 > 外观 > 自定义. 通过转到导航到您网站的排版 常规设置 > 排版下一步. 到达那里后,应用以下设置:

WordPress divi主题
  • 正文大小:16
  • 车身线高:1,9
  • 标题字体:Roboto

事件自定义帖子类型

事件日历设置

Events Calendar 插件在 Theme Customizer 中也有一些自己的设置。 返回您的主菜单 Theme Customizer > The Events Calendar > General Theme > 并使用以下颜色:

  • 强调色:#06c8ff
  • 特色高亮颜色:#06c8ff

事件自定义帖子类型

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

事件自定义帖子类型

添加新事件

添加新事件

我们现在准备创建一个新事件。 为此,请转到您的 WordPress 仪表板 > 事件 > 添加新的. 一旦你添加了一个新事件,确保你也给它一个标题。

事件自定义帖子类型

添加事件详细信息

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

  • 时间和日期
  • 地点
  • 组织者
  • 活动网站
  • 活动费用

事件自定义帖子类型

事件自定义帖子类型

H10的年终大促

添加特色图片

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

事件自定义帖子类型

更改 Divi 页面设置

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

事件自定义帖子类型

发布事件

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

事件自定义帖子类型

这是没有启用 Visual Builder 的默认页面设计:

事件自定义帖子类型

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

找到行并将其保存到 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;
}

事件自定义帖子类型

切换到 Visual Builder

我们现在可以切换到在事件中使用 Visual Builder!

JasperAI 10000字免费额度试用

事件自定义帖子类型

添加新部分

背景图片

您会看到页面上已经有一个部分。 这是我们能够修改的页面上的位置。 首先打开部分设置并添加 ‘bg-4.png‘ 背景图片。 如果您已经将 Meetup 布局包上传到您的网站,则可以在您的媒体库中找到此图片。 连同背景图像,使用以下设置:

  • 背景图像尺寸:实际尺寸
  • 背景图片位置:右下角

事件自定义帖子类型

事件自定义帖子类型

间距

接下来打开您部分的间距设置,并将“100px”添加到上边距。

事件自定义帖子类型

边界

我们还为我们的模板创建了这种时间线效果。 转到您的边框设置并添加以下左边框:

  • 左边框宽度:7px
  • 左边框颜色:#8301e9

事件自定义帖子类型

添加新行

列结构

现在我们已经完成了部分设置的修改,我们可以开始添加行了。 添加具有以下列结构的新行:

事件自定义帖子类型

WordPress花园粉丝福利

想做跨境电商独立站但是没什么钱?可以免费试用Shopline智能建站工具,一个月都不要一顿火锅的钱!(这里就可以在线申请!) 或者扫描下方二维码
shopline

浆纱

打开您的行的设置,并在“大小调整”设置中启用“使此行成为全宽”选项。 这是我们要为此布局中的每一行做的事情。

事件自定义帖子类型

将文本模块添加到行

浆纱

接下来,添加一个带有事件描述的文本模块,继续调整大小设置并使用以下宽度:

  • 台式机:47%
  • 平板电脑和手机:100%

事件自定义帖子类型

导入保存的行

在您添加的行下方,继续并将您保存的行导入 Divi 库。

事件自定义帖子类型

浆纱

我们需要修改有关此行的一些内容,从大小设置开始。 启用“使此行全宽”选项。

事件自定义帖子类型

删除正文模块和按钮模块

接下来,删除第一列中文本模块和按钮模块的段落。

事件自定义帖子类型

克隆文本模块并删除尺寸

继续并克隆第一行中的文本模块并将其放置在新行的第一列中。 接下来打开尺寸设置并删除桌面的自定义宽度。

事件自定义帖子类型

导入保存的部分

我们完成了第一部分的修改! 继续并导入您接下来保存的部分。

事件自定义帖子类型

添加边框

我们也在这个部分添加了一个左边框:

  • 左边框宽度:7px
  • 左边框颜色:#06c8ff

事件自定义帖子类型

更改每一行的大小

您刚刚导入的部分中有几行。 为这些行中的每一行启用“使此行全宽”选项。

事件自定义帖子类型

更改按钮对齐方式

最后,将 Button Alignment 也更改为 left。

事件自定义帖子类型

将模板保存到 Divi 库

添加到图书馆

布局模板完成! 您现在可以将其保存到您的 Divi 库中,并将其重新用于其他活动。

事件自定义帖子类型

预习

现在我们已经完成了所有不同的步骤,让我们最后看看在不同屏幕尺寸上的结果。

事件自定义帖子类型

最后的想法

在此用例博客文章中,我们向您展示了如何创建令人惊叹的事件自定义帖子类型模板。 我们创建的模板与 Meetup Layout Pack 的风格相匹配。 创建此模板后,我们还将其保存到 Divi 库中,以便我们也可以将其重新用于其他活动。 如果您有任何问题或建议,请确保在下面的评论部分发表评论!

tiktok siteground
5分钟生成10篇英文软文article forge软件试用
siteground

【WordPress花园提醒您】如果想购买国外正版WordPress主题和插件,您需要一张VISA信用卡才能支付,这里我们推荐光大银行信用卡!赶快免费申请,别耽误了买插件哦!

guangda
WordPress花园官方账号
WordPress花园隶致力于为广大跨境电商和独立站爱好者提供优质的WordPress教程、Woocommerce教程、Facebook、Twitter、tiktok、Instagram教程和谷歌SEO教程等资料和对应的建站推广服务。关注‘哟派出海’公众号了解最新资讯。粉丝福利:Shopline免费独立站建设14天优惠 商务合作: [email protected]
RELATED ARTICLES