The Events Shortcodes addon provides multiple layout options to display your events. You can choose between List Layout, Grid Layout, or Carousel Layout depending on how you want events to appear on your website.
Each layout can be easily added using a simple shortcode, and you can further customize its appearance using the Layout Customization settings.
List Layout
The List Layout displays events in a simple vertical list format. Just copy and paste the shortcode below into any page, post, or widget area where you want the events list to appear.
[events-calendar-templates category="all" template="default" style="style-1" date_format="default" start_date="" end_date="" limit="3" order="ASC" hide-venue="no" time="future" featured-only="false" show-description="yes" columns="3" autoplay="true" tags="" venues="" organizers="" socialshare="no" date-lbl="Date" time-lbl="Duration" event-lbl="Event Name" desc-lbl="Description" location-lbl="Location" vm-lbl="View More" category-lbl="Category" filterbar="no" filterbarstyle = "both" ]Output:
Grid Layout
The Grid Layout shows events in a grid (rows and columns). Just copy and paste the shortcode below into any page, post, or widget area where you want the events grid to appear.
[events-calendar-templates template="grid-view" style="style-1" category="all" date_format="sed" start_date="" end_date="" limit="3" order="ASC" show-description="yes" hide-venue="no" time="future" featured-only="false" columns="3"]Output:
Carousel Layout
The Carousel Layout shows events in a sliding format, your visitors can move left or right to see more events. Just copy and paste the shortcode below into any page, post, or widget area where you want the events carousel to appear.
[events-calendar-templates category="all" template="carousel-view" style="style-2" date_format="d.FY" limit="5" order="DESC" hide-venue="yes" time="future" columns="3" autoplay="false" featured-only="false" show-description="yes" socialshare="no"]Output:
Layout Customization
After adding the Events Shortcode, you can customize the events layouts using the following options:
- Select Template: Choose the layout style, such as List, Grid, or Carousel.
- Select Style: Each layout comes with different styles (Style 1, Style 2, Style 3, Style 4). Choose the one according to your requirements.
- Date Formats: Customize the display of dates by choosing from various formats.
- Limit the Events: Set a limit for how many events you want to display.
