Elementor Shortcode Builder Addon

The Elementor Shortcode Builder Addon is a powerful design tool that allows you to customize your event shortcodes and place them anywhere on your website using a live, drag-and-drop interface. It eliminates the need for manual code by enabling the Elementor Live Editor to preview events and style layouts in real-time.

Initial Setup & Requirements

Before you begin, ensure your environment meets the following requirements:

• MEC Version: Modern Events Calendar (Lite or Pro) version 6.0 or higher.

• Elementor Version: Elementor version 3.0 or higher.

• System Requirements: WordPress 5.0+ and PHP 7.4 or higher.

Adjusting Shortcode Builder Post Type

To allow Elementor to recognize MEC shortcodes, you must enable the correct post type:

1. Navigate to Elementor > Settings > General.

2. Locate the Post Types section and check the box for Shortcodes.

3. Click Save Changes.

Pro Tip: If you encounter errors accessing the Elementor editor, go to WordPress Dashboard > Settings > Permalinks and click Save Changes (using the Post name setting) to regenerate your site’s URLs.

Creating Your Custom Shortcode

To design a shortcode using the Elementor Shortcode Builder addon, you must first create a dedicated page to host the builder.

1. Go to Pages > Add New in your WordPress dashboard.

2. Provide a title (e.g., “Custom Event Display”) and click Save/Publish.

3. Click the Edit with Elementor button to enter the live builder.

4. In the Elementor widget panel, search for the MEC Shortcode Builder widget.

5. Drag the MEC Shortcode Builder widget into your layout. Do not use the standard Elementor “Shortcode” widget.

Configuring the Shortcode Widget

Once the widget is placed, you can use the left-hand panel to customize how your events appear.

Display Options

This section allows you to toggle specific elements on or off, giving you full control over the information displayed to your users. You can personalize every option typically found on the standard shortcode edit page.

Search Form

Enable the Search Form to allow visitors to filter events directly on the page. You can add search fields for:

• Categories, Organizers, and Speakers.

• Tags and Labels.

• Event Costs and Locations, etc.

Filter Options

Use these settings to narrow down which events are shown:

• Taxonomy Filtering: Include or exclude specific categories or tags.

• Occurrence Filtering: Filter events that have expired, are currently ongoing, or are upcoming.

Customization & Styling

The Elementor Shortcode Builder addon provides deep integration with Elementor’s styling tools to ensure your events match your brand identity.

• Style Tab: Navigate to the Style tab within the widget settings to edit the typography, colors, and spacing of each individual element separately.

• Layout Selection: Choose between various layout formats, such as Grid, List, or Calendar views, etc, directly within the editor.

• Real-time Preview: All changes made in the sidebar will appear instantly in the editor area, allowing you to see exactly how the final shortcode will look.

---

Use Cases (When This Addon is Useful)

• Designing Custom Brand Layouts: Ideal for users who want their event lists to match a specific website color palette and typography without writing CSS.

• Fast Front-End Editing: Perfect for designers who prefer building layouts visually on the front end rather than navigating back-end menus.

• Advanced Event Filtering: Useful for sites with hundreds of events where users need specific search bars (e.g., searching by Speaker or Cost).

Situations This Addon May Not Be Ideal

• Non-Elementor Sites: This addon is specifically designed for Elementor and will not function with other page builders like Divi or Beaver Builder.

• Basic Layout Needs: If you are satisfied with the default MEC shortcode templates, the extra layer of the builder may not be necessary.

• Strict System Limitations: Sites running on outdated versions of PHP (lower than 7.4) or WordPress (lower than 5.0) will not support this addon

Troubleshooting for Beginners

• Widget Not Appearing? Ensure you have enabled the Shortcodes post type in Elementor > Settings > General.

• Changes Not Saving? Always click the Update button in the Elementor sidebar before exiting to ensure your configurations are applied.

• Editor Loading Error? This is often a permalink issue. Navigate to Settings > Permalinks and click Save Changes to refresh your site’s link structure.

• Wrong Widget? Double-check that you are using the MEC Shortcode Builder widget and not the default Elementor shortcode tool, as the latter will not show the custom MEC settings.

FAQ

1: How do I install and activate the Elementor Shortcode Builder Addon?

To install the MEC Elementor Shortcode Builder Addon, first ensure that both the Modern Events Calendar (MEC) plugin and the Elementor plugin are installed and active. Afterward, install the addon by uploading the plugin ZIP file. Once installed, activate the addon from the WordPress dashboard under the Plugins section.

2: How can I enable the Shortcodes post type in Elementor?

Navigate to Elementor > Settings > General in your WordPress dashboard. Here, enable the ‘Shortcodes’ post type to allow Elementor to work seamlessly with MEC shortcodes.

3: What steps should I follow to create a customized event shortcode using the addon?

After ensuring the addon is activated and the ‘Shortcodes’ post type is enabled, create a new page or post and click on ‘Edit with Elementor.’ In the Elementor editor, drag the MEC Shortcode Builder widget into your layout. From there, you can customize the shortcode settings and design to fit your needs.

4: Can I preview my event shortcodes while customizing them in Elementor?

Yes, this addon allows you to view changes live within the Elementor editor, providing a real-time preview of how your events will appear on the site.

5: Is it possible to add a search bar to my event shortcodes?

Absolutely. You can activate the search bar in different shortcodes and add search fields to enhance user navigation. This can be achieved through the search form section. 

6: How do I manage the typography and styles of my event shortcodes?

The addon provides options to manage typography and apply custom styles to shortcode elements, through the elementor style tab.

7: Are there limitations on the number of shortcodes I can create with this addon?

No, you can create and use an unlimited number of shortcodes without any limitations.

8: What should I do if I encounter errors accessing Elementor’s editor after installing the addon?

To solve this issue, please go to the WordPress Permalink Settings page and click on the “Save Changes” button without making any other modifications. This helps resolve the issue you’re experiencing. The problem occurs because Elementor needs to reassign the permalinks, and saving it again will regenerate the URLs correctly.

9: Can I control which elements appear in my event shortcodes?

Yes, the addon allows you to turn on or off various shortcode elements, giving you control over what information is displayed to your users.

10: What are the system requirements to use the MEC Elementor Shortcode Builder Addon?

The MEC Elementor Shortcode Builder Addon requires the Modern Events Calendar plugin (version 6.0 or higher) and Elementor (version 3.0 or higher). You also need a WordPress site running at least PHP 7.4 and WordPress 5.0.

11: Can I use the Elementor Shortcode Builder Addon with the free version of MEC?
Yes, you can use this addon with the free version of MEC, called MEC Lite.

12: How can I display events from specific categories using the addon?
In the Elementor Shortcode Builder widget, you can select specific event categories to display. Use the category filter settings to include or exclude events based on their assigned categories.

13: How can I customize the layout of my event shortcodes?
The addon provides multiple layout options for event shortcodes, such as grid, list, and calendar views. You can choose and customize these layouts directly in the Elementor editor to match your website design.