使用 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;
}

事件自定義帖子類型