Divi Events Calendar

Documentation

Home » Docs » Bonus Customization Resources » How To Make A Compact Events Feed List

Still Need Help?

If you have a question not covered here in the docs, or if you face any technical issue, you can reach out to us.

Visit Our Support Page

Divi Events Calendar Modules Plugin by Pee Aye Creative 2.2

Ready To Purchase?

Visit the product page to get all the details and make your purchase.

View Product

How To Make A Compact Events Feed List

Adjust Some Settings

Turn Off Stacked Events

The first step is to open the module and go to the Content tab to the Elements toggle and made some changes to the default settings as follows:

  • Turn off the Show Featured Image.
  • Turn off Show Venue
  • Turn off Show Organizer
  • Turn off Show Price
  • Turn off Show Category
  • Turn off Show Website
  • Turn off Show Excerpt
  • Turn off Stack Event Details.

Change The Layout

Next, go to the Design tab to the Layout toggle. Set the Layout to List and set the List type to Image, Details. Set the Number of Columns to 1 Column.

divi events compact list layout

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

divi events compact list layout so far

Center The Details Text

Optionally, you may want to go to the Design tab to the Details Text toggle and set the Details Text Alignment to center.

divi events compact list text alignment 1

Add A Border Below Each Event

Optionally, you may want to go to the Design tab to the Events toggle and set a border bottom, border width, and border color.

divi events compact list border bottom option

Adjust The Spacing

Along with the previously mentioned border, to make that look good you may also want to go adjust the Event Margin to to a negative value.

divi events compact list margin

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.

divi events compact list example

After all of the adjustment steps and the CSS, this is how it would look! I think it looks pretty nice!

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 Mar 1, 2022 @ 5:54 PM