Each and every week, we give you new and unfastened Divi format packs which you’ll be able to use in your subsequent mission. For one of the crucial format packs, we additionally percentage a use case that’ll can help you take your web page to the following degree.
This week, as a part of our ongoing Divi design initiative, we’re going to turn you how you can create shocking occasion customized publish kind templates with Divi the use of the unfastened Meetup Structure Pack. This use case instructional is made imaginable via the Divi Builder Custom Post Type Support feature, one among Divi’s contemporary updates. We’re going to create a template that can fit the Meetup Structure Pack. After growing this template, you’ll be capable of reuse it for the entire parties you percentage for your web page.
Let’s get to it!
Preview
Earlier than we dive into the educational, let’s check out the general outcome on other display screen sizes.
Set up The Occasions Calendar Plugin
Pass to Plugins & Upload a New One
So as to add occasion customized publish sorts to our web page, we’ll be the use of The Occasions Calendar plugin. This can be a unfastened plugin which you’ll be able to to find via going in your WordPress dashboard > Plugins > Upload New > On the lookout for The Occasions Calendar plugin.
Turn on Plugin
When you’ve put in the plugin, remember to turn on it in an instant so you’ll be able to get started the use of it.
Exchange Theme Customizer Settings
Exchange Typography
Now prior to we create an occasion, let’s get started via getting the basics of our web page proper. Open your Theme Customizer via going in your WordPress dashboard > Look > Customise. Navigate to the typography of your web page via going to Common Settings > Typography subsequent. When you’re there, observe the next settings:
- Frame Textual content Dimension: 16
- Frame Line Top: 1,9
- Header Font: Roboto
The Occasions Calendar Settings
The Occasions Calendar plugin has a few of its personal settings within the Theme Customizer as neatly. Return to the principle menu of your Theme Customizer > The Occasions Calendar > Common Theme > And use the next colours:
- Accessory Colour: #06c8ff
- Featured Spotlight Colour: #06c8ff
Return to the settings of The Occasions Calendar > Common Theme and use the similar ‘#06c8ff’ colour for the entire choices you’ll be able to to find there.
Upload a New Match
Upload New Match
We’re now able to create a brand new occasion. To try this, move in your WordPress dashboard > Occasions > Upload New. When you’ve added a brand new occasion, remember to give it a name as neatly.
Upload Match Main points
Proceed via coming into your occasion main points. This comprises:
- Time & Date
- Location
- Organizers
- Match Web page
- Match Price
Upload Featured Symbol
Upload a featured picture in your occasion as neatly. Later in this publish, we’ll take away this from the frontend however we’ll nonetheless want it for social sharing.
Exchange Divi Web page Settings
In the suitable nook of your occasion, you’ll see the Divi Web page Settings. There, take away the sidebar via deciding on ‘No Sidebar’ for the Web page Structure.
Submit Match
We’re now able to start out operating at the frontend. Pass forward and post your occasion.
That is default web page design with no need enabled the Visible Builder:
Open Meetup Touchdown Web page & Save Design Components
Find & Save Row to Divi Library
Running successfully is extra vital than operating arduous. That’s why we’re going to avoid wasting ourselves some effort and time via reusing parts of the Meetup Structure Pack. Get started via opening the touchdown web page the use of Divi’s Visible Builder. Then, find the next row for your web page and reserve it in your Divi Library:
Find & Save Segment to Divi Library
We’ll additionally want the next segment so move forward and save this one as neatly:
Get started Developing Match Customized Kind Template
Upload Customized CSS Code Strains to Fit Meetup Structure Pack
We will use the Visible Builder for occasion pages however sadly, we can not use it in all places. To verify the whole lot is in step with the Meetup Structure Pack, we’re going so as to add a couple of CSS code traces prematurely:
#tribe-events {
margin: 5%;
}
.tribe-events-single-event-title {
font-weight: 300;
font-size: 60px !vital;
}
#tribe-events-content a {
font-family: Roboto !vital;
font-weight: 300 !vital;
}
.tribe-events-event-image{
show: none;
}
Transfer over to Visible Builder
We will now transfer over to the use of the Visible Builder on our occasion!
Upload a New Segment
Background Symbol
You’ll see that there’s a bit already provide at the web page. That’s where at the web page we’re ready to switch. Get started via opening the segment settings and upload the ‘bg-4.png‘ background picture. You’ll be able to to find this picture for your Media Library in case you’ve already uploaded the Meetup Structure Pack in your web page. At the side of the background picture, use the next settings:
- Background Symbol Dimension: Exact Dimension
- Background Symbol Place: Backside Proper
Spacing
Open the Spacing settings of your segment subsequent and upload ‘100px’ to the highest margin.
Border
We’re additionally growing this type of timeline impact for our template. Pass in your Border settings and upload the next left border:
- Left Border Width: 7px
- Left Border Colour: #8301e9
Upload a New Row
Column Construction
Now that we’re achieved editing the segment settings, we will be able to get started including our rows. Upload a brand new row with the next column construction:
Sizing
Open the settings of your row and permit the ‘Make This Row Fulliwdth’ choice within the Sizing settings. That is one thing we’re going to do for every one of the crucial rows inside of this format.
Upload Textual content Module to Row
Sizing
Subsequent, upload a Textual content Module with an outline of your occasion, transfer directly to the Sizing settings and use the next Width:
- Desktop: 47%
- Pill & Telephone: 100%
Import Stored Row
Proper underneath the row you’ve added, move forward and import the row you’ve stored in your Divi Library.
Sizing
We’ll want to regulate some issues about this row, beginning with the Sizing settings. Allow the ‘Make This Row Fullwidth’ choice.
Take away Frame Textual content Module & Button Module
Subsequent, take away the paragraph of the Textual content Module and the Button Module within the first column.
Clone Textual content Module & Take away Sizing
Pass forward and clone the Textual content Module for your first row and position it within the first column of your new row. Open the Sizing settings subsequent and take away the custom designed Width for desktop.
Import Stored Segment
We’re achieved editing the primary segment! Pass forward and import the segment you’ve stored subsequent.
Upload Border
We’re including a left border to this segment as neatly:
- Left Border Width: 7px
- Left Border Colour: #06c8ff
Exchange Sizing of Each and every Row
There are a few rows inside the segment you’ve simply imported. Allow the ‘Make This Row Fullwidth’ choice for every this sort of rows.
Exchange Button Alignment
Finally, alternate the Button Alignment to left as neatly.
Save Template to Divi Library
Upload to Library
The format template is completed! You’ll be able to now reserve it in your Divi Library and reuse it for different parties as neatly.
Preview
Now that we’ve long past via all other steps, let’s take a last have a look at the outcome on other display screen sizes.
Ultimate Ideas
On this use case weblog publish, we’ve proven you how you can create shocking occasion customized publish kind templates. The template we’ve created suits the way of the Meetup Structure Pack. After growing this template, we’ve additionally stored it to the Divi Library so we will be able to reuse it for different parties as neatly. If in case you have any questions or ideas, remember to go away a remark within the remark segment underneath!
The publish Creating Stunning Event Custom Post Type Templates with Divi gave the impression first on Elegant Themes Blog.
WordPress Web Design