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.
It will now look something like this, with the remaining items stacked on the left and a lot of empty space on the right:
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.
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.
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.
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.
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.
