How to Use Elementor to Create Custom Single Event Templates

Create fully custom single event pages for WordPress using Elementor Pro, the Hello Elementor theme, and Event Genius. This guide shows you how to build your own event layout with Elementor while still displaying dynamic event information like dates, locations, registration forms, attendee lists, organizers, and more using Event Genius shortcodes.

This setup is ideal if you want more control over the design and layout of your event pages without editing theme files or custom templates manually.

What you need

• Event Genius installed and activated.
• Elementor and Elementor Pro installed (Theme Builder requires Pro).
• The Hello Elementor theme recommended for best compatibility.
• At least one published event to preview while designing your template.

Step 1: Enable Elementor Theme Builder support

1. Go to Event Genius → Settings → Events.
2. Locate the Event Template setting.
3. Select Elementor Theme Builder.
4. Click Save Changes.

When enabled, Event Genius allows Elementor Pro Theme Builder to control the full single event page layout while Event Genius handles the event functionality and dynamic event data.

Step 2: Enable Events in Elementor

1. Go to Elementor → Settings.
2. Under Post Types, confirm that Events is enabled.
3. Save your settings if needed.

This allows Elementor to work with Event Genius events and lets you preview real event content while building templates.

Step 3: Create a Single Event template in Elementor

1. Go to Templates → Theme Builder.
2. Click Add New.
3. Choose Single as the template type.
4. Select the Events post type.
5. Create your layout using Elementor widgets and sections.
6. Publish the template and set the display condition to All Events.

Most users create layouts that include:

• Featured image
• Event title
• Date and location
• Event description
• Registration button or registration form
• Organizer information
• Attendee list

Step 4: Add Event Genius shortcodes

Use Elementor’s Shortcode widget anywhere in your template to display dynamic event information. These shortcodes are available when Elementor Pro is active. Use them in Elementor Shortcode widgets inside Theme Builder templates for events (evge_event).

Most shortcodes automatically use the current event when placed inside a single event template.

Use Elementor’s Post Title and Post Content widgets for the event title and body — there are no shortcodes for those.

Recommended layout structure

• Featured image and event title
• Date and location
• Event description
• Registration area
• Organizer details
• Attendee list
• Calendar export links

Event Genius shortcodes

Global attribute (all shortcodes):

• event — Event post ID. Default: 0 (uses the current post). In Theme Builder single-event templates you can usually omit this. In loops or on other pages, pass the event ID, e.g. event="123".

Event content shortcodes

These shortcodes display core event information like dates, locations, organizers, and event details.

Registration and CTA shortcodes

These shortcodes control registration buttons, registration forms, pricing, and registration status messaging.

Attendee list shortcode

Use this shortcode to display a public attendee list for an event.

Examples

• Organizer name as a link: [event_genius_event_organizers part="link"]
• Map only: [event_genius_event_location part="map"]
• Plain start date for styling in Elementor: [event_genius_event_date part="start_date"]
• Separate columns for CTA pieces: [event_genius_event_cost], [event_genius_event_capacity], [event_genius_event_register], [event_genius_already_registered]

Custom Elementor Register Button

1. Add or select your Button widget and style it as you like.
2. Open the Advanced tab → CSS Classes.
3. Add: evge-register-button
4. Update or publish the template.

Event Genius will use your Elementor button styling when registration is open. It also handles registration status automatically — if registration is closed, full, not yet open, or requires login, the button area will show the appropriate message instead.

You can combine Elementor widgets and Event Genius shortcodes however you like to create fully custom event layouts.

Step 5: Assign Template to Single Events

When you have finished setting up your template, click on the Publish button found in the top right corner. You will then be prompted to configure where you want this template to display. Choose “Events” under the “Event” sub-heading as shown below.

All single event pages should now use your custom Elementor template.

Recommended Elementor settings

• Use the Hello Elementor theme for minimal styling conflicts.
• Use the Elementor Full Width page layout for modern event pages.
• Use Elementor Global Fonts and Colors for consistent branding.
• Preview a real event while designing so dynamic event data appears correctly.

Troubleshooting

• Events missing in Theme Builder: Confirm Elementor Pro is active and Events are enabled in Elementor settings.
• Registration form not showing: Confirm registrations are enabled for the event.
• Duplicate registration buttons: Avoid using both the full CTA shortcode and standalone registration shortcodes together unless intended.

Next steps

Once your single event template is complete, you can continue customizing your event pages using Elementor widgets, custom CSS, Event Genius shortcodes, and Elementor Theme Builder conditions.