Code by Day | Explore By Weekend

Please be sure to read the 2.1 release post/video and review the Important Update Information before updating!

Divi Events Calendar

Documentation & Support

Docs » Divi Events Calendar » How To Change The Events Feed Into A Compact List View
How To Change The Divi Events Calendar Events Feed To Compact A List View Tutorial by Pee Aye Creative

How To Change The Events Feed Into A Compact List View

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.

Last updated May 5, 2021 @ 4:19 pm

Get Support

Have a question? Something not going well? I am happy to help!


Pin It on Pinterest

0

Your Cart