Welcome to the Layout Options documentation for the Events Feed Module. In this guide, you will learn everything you need to know about layout settings and how they work.

Be sure to reference the Events Feed Module Settings List which includes a summary of every setting that is available and what it does. You should also check out the Events Feed Module Demos to see how the module works and get some inspiration.

Layout

You can see the main layout settings by going to the Events Feed Module settings and clicking on the Design tab. There you will see a toggle at the top called Layout, which is where most of the layout related settings are located.

The first setting called Layout is a dropdown with three options:

• Grid
• List
• Cover

These choices will each be discussed in the next section, but for now just know that it is important to first make this choice. The layout is set to Grid by default.

Grid

As the name suggests, the Grid layout presents a classic grid view similar to the Divi Blog module. This option stacks each event featured image at the top followed by the title and other event details.

Keep in min dyou can also change the number of columns.

List

The List layout displays the events with a horizontal display. You will notice as soon as you choose the List option that a new setting appears called List Type.

You will also have the setting to change the number of columns with this option.

List Type

The List Type setting appears after choosing the List layout option. This dropdown selector gives you full control over the display, allowing you to choose which items you want to show and in which order you want to be displayed in the feed.

Below is a list of the available options. The items are displayed from left to right.

Image, Details

This option places each the event featured image on the left and all the other event details stacked on the right. The Callout is not shown with this option.

Callout, Image, Details

This option places the callout box on the left, then the featured image in the middle, then the rest of the details on the right.

Callout, Image, Details, Button

This option places the callout box on the left, the featured image next, then the details, then the button on the right.

Details, Image

This option is just the opposite version of the Image, Details option. This option places event details stacked on the left with each the event featured image on the right. The Callout is not shown with this option.

Callout, Details, Image

This option places the callout box on the left, then the details in the middle, then the featured image on the right.

Callout, Details, Image, Button

This option places the callout box on the left, the details next, then the featured image, then the button on the right.

Cover

The Cover layout displays the events in a grid, but the featured image is located in the background behind all the other event details. Be sure to check the image overlay and adjust your text colors as needed for visibility.

You will also have the setting to change the number of columns with this option.

Image Overlay

When the Cover layout is used, new settings appears inside the Image toggle. The Show Image Overlay automatically turns on when Cover layout is selected. The Image Overlay Color is set to black at 50% opacity by default, but of course you can adjust that as needed.

Number Of Columns

This option allows you to define in how many columns of events in the feed you want to display for any of the layout options.

Responsive

This setting is applicable for Grid, List, and Cover layouts. This setting is also responsive, which means you have full control over the number of columns that you want to use for different screen sizes. It works just like other Divi responsive options by clicking the little phone icon beside the setting label. You can set a different number of columns for each device, Desktop, Tablet, and Phone.