How to customize event listings with Elementor

First check which plugin owns your events. Elementor only displays the output; the event plugin controls the event data, filters, dates, links and listing shortcode. Modern Events Calendar, for example, creates shortcodes from M.E. Calendar > Shortcodes.

Decide whether you need a basic list, grid, calendar view, search form or event popups. A basic listing can usually be handled without an extra layout tool.

Open your event plugin’s shortcode builder and choose the listing view, number of events, categories or tags, date range and other display options. In Modern Events Calendar, the shortcode settings include options such as event limits, search, display mode and map placement. Copy the generated shortcode rather than retyping it.

Keep the first version simple. Confirm that upcoming events, recurring events and event links are correct before spending time on styling.

Edit the page with Elementor, add the Shortcode widget, and paste the event shortcode into its content field. Elementor renders shortcodes through this widget and lets you apply styling through the widget’s Advanced settings where available.

If the listing is blank in the editor, preview the page in a new tab. Some shortcode output does not appear reliably inside the editor canvas, even though it works on the published page.

Use Elementor containers to set the listing width, columns, spacing, background, border and responsive behaviour. Add a heading, category filter or call-to-action outside the shortcode if the event plugin does not provide those elements.

For small changes, use the widget’s Custom CSS or site CSS to adjust colours, typography and spacing. Scope selectors to the containing Elementor section so you do not accidentally alter another calendar on the site.

Check the page at desktop, tablet and mobile widths. Test an event link, recurring event, past event, category filter, search form, map and popup if you enabled them. Also check that long titles, missing images and events with no venue do not break the card height.

A common Friday-afternoon failure is styling the editor preview while the live shortcode uses different markup or scripts. Test the published or preview URL in a logged-out browser, clear any page cache, and regenerate Elementor files if the front end still shows old CSS.

Choose the manual route when a native list or grid already meets your needs. If you need to rearrange event fields, create reusable event cards, or control modal and map elements in Elementor, use Elementor Shortcode Designer for MEC with Modern Events Calendar.

With the addon, enable its designer post type in Elementor settings, create a design in the MEC Designer area, edit it with Elementor, then select that design when creating the MEC shortcode. Copy the resulting shortcode into the page. Do not place the addon’s design widget where the normal Elementor Shortcode widget is required, and save permalinks if the editor fails to open.