Code by Day | Explore By Weekend
How To Change The Divi Events Calendar To A List View Tutorial by Pee Aye Creative

How To Change The Divi Events Calendar To A List View

This tutorial will show you how to change the layout of the Divi Events Calendar Feed Module into a beautiful list view with a quick snippet of CSS code.
Divi Events Calendar plugin modules by Pee-Aye Creative

Change The Divi Events Feed Into A List

Setup The Events Feed Module Settings

In the Design tab, set the Layout to 1 Column – Image Left, Details Right.

In the Content tab, turn off all the settings in Elements toggle except for Title, Date, Time, and More Info Button. Become of the design we want, we will not be showing the featured image, so that get’s turned off as well.

It will now look something like this, with the remaining items stacked on the left and a lot of empty space on the right:

changing the Divi Events Calendar into a list view

Since I am using my demo site, I am using the styling that was already set like the border, button color, text color, etc. The focus of this tutorial is the layout, not the design style.

Make Some Adjustments

Center The Text and Button

The next thing I would do is center the event details and event button. That way they don’t crowd each other out.

Adjust The Spacing

You will need to go to Layout and adjust the padding.

Add Some CSS To Create The Columns

Next, copy the CSS below and paste it into your website. If you are not sure where to add the code, check out our tutorial called Where To Add Custom Code In Divi. The short answer is to copy the code snippet and add it in Divi>Theme Options>Custom CSS box.

@media (min-width: 980px) {

	/*set the column width of the title*/

	.entry-title {
		display: inline-block;
		width: 40%;
	}


	/*set the column width of the event details*/

	.decm_event_display div.decm-show-detail-center {
		display: inline-block;
		width: 40%;
	}


	/*set the column width of the button*/

	.decm_event_display p.ecs-showdetail {
		display: inline-block;
		width: 20%;
	}
}

Notice the snippet is wrapped in a media query. The reason for that is because we only want the list view to work on Desktop, or above 980px. Below that on Tablet and Phone the items will stack like normal.

Here’s how that looks on our demo website.

create an events list view layout with the Divi Events Calendar

That’s all there is to it! Note that you will probably want to change the percentages for the column widths. For mine, the title text and event details are each 40% wide, and the button is 20% wide. You can adjust those however you need, just make sure they math adds up to 100%.

And of course you can customize this however you want. You could change the border, font size, colors, etc.

15

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.

Join Our NEW Divi Facebook Group!

The Divi Teacher Logo

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Guilamu
Guilamu
23 days ago
Guilamu
Guilamu

You’re very welcome, thank you for all your work!

Shop Our Divi Products!

Child Themes • Plugins • Layouts

Visit The Shop

become partners with Pee Aye Creative

Partner With Us

We are looking for you!

Learn More

Divi Tutorials On YouTube

Subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart