Elementor Shortcode Designer Addon

Welcome to the documentation for the Modern Events Calendar (MEC) Elementor Shortcode Designer Addon. This addon allows you to create customized shortcodes by combining specialized widgets in Elementor, providing limitless possibilities for displaying events with your preferred style and positioning.

Elementor Shortcode Designer Features

  • Unlimited Shortcodes: Create unlimited custom shortcodes using Elementor’s drag-and-drop interface.
  • Event Display Control: Design the display of events by including specific elements with your desired style.
  • Limit Event Display: Set limits on the number of events displayed.
  • Search Functionality: Add exclusive search functionality to your shortcodes.

Elementor Shortcode Designer Preparation


In the first step, Ensure that both MEC (Modern Events Calendar) and the Elementor Shortcode Designer Addon are installed and activated.

Read Also:

How to install MEC and Addons?

Adjusting Shortcode Designer Post Type

To configure Elementor with the MEC Shortcode Designer post type, please head over to Elementor > Settings > General and enable the MEC Designer post type.

Shortcode Designer

Now, you can set different templates for the Shortcode Designer Page and then set them for all the Shortcode Pages or only for a certain one.

Read Also:

How to work with Shortcode Builder Addon?

Create a New Shortcode Design

After activating the Shortcode Designer Addon, you can go to your WordPress Dashboard > MEC Designer and access all your shortcode designs, but to add a design, you need to click on Add New.

Elementor Shortcode Designer Addon

Then, enter your shortcode’s title and save the page. Afterward, click on Edit with Elementor to use Elementor’s editing section.

Note: You might face an error like the one below before entering Elementor. In order to solve this, go to WordPress settings and refresh the permalink by clicking on the save settings button.

Form Builder Addon

Note: Other page builders can be used alongside Elementor (such as Divi, VC, KC, etc.), and there is no limitation in this regard. You can use whichever you feel comfortable with.  Elementor will only be used in the Shortcode Designer Addon.

After entering Elementor’s editing section, add the rows and sections you have in mind and create your own shortcodes by dragging and dropping the Elementor Shortcode Designer widgets. Afterward, you can use MEC’s widget or the Inner Section Widget from the sidebar.

Shortcode Designer

Add your preferred widget to the section and style it how you want. If you have difficulty finding a distinguishing layout for your target, check out the Best selection of Events Website. Get some ideas on fully taking advantage of the Modern Events Calendar Elementor Shortcode Designer Addon. 

As you can see, the styling can become limitless, and your ideas will be limitless with MEC features. These styling options include typographycolors, and spacing and are part of every widget.

Shortcode Designer

Shortcode Designer

Assigning Shortcode Designer templates

After you’ve designed your own shortcode, click on publish or update the page and return to your WordPress dashboard. To complete your shortcode and to be able to display it on your website, do the following:

1- Go to WP Dashboard > M.E. Calendar > Shortcodes

2- Click on Add Shortcode.

3- Choose a title.

Shortcode Designer

4- In the skins section, choose “Shortcode Designer.”

5- In the Style section, choose the designed shortcode. (You can have multiple shortcode designs, and here, you need to choose the one you want to display.)

Read Also:

How to create an advaced shortcode?

6- Configure the settings and place the shortcode within your desired page.

The style you want to display should be something you’ve already designed.

In addition, filter options are also available. This allows you to implement the function within your shortcode. There is also a search form available for use. We’ve got two ways of displaying events, one Modal and the other Separate Window. Additionally, if you need a map above your shortcode, select Show Map on Top.

Add your shortcode to the desired page

Shortcode Designer

Shortcode Designer

Note: Your server must have the allow_url_fopen property set to true. Please get in touch with your host so they can enable it for you.


1. I can’t enter the Elementor environment after installing the addon. What should I do?

This issue can be fixed easily by saving Permalinks in the WordPress Settings > General > Permalinks.

2. How can I resolve Content errors?

Please follow this instruction for more information about this issue.

3. How can I use Elementor and other page builders in this addon?

Regardless of what page builder you use, it can be used together with Elementor. You can keep both Elementor and your preferred builder active at the same time. Use the Shortcode Designer document to start building your first custom shortcode.

Once you’ve created your shortcode, copy the shortcode ID for it and paste it into the main page builder you use.

4. Does this addon also work with MEC Lite?

Yes, you can use this addon with MEC Lite as well.

Report Out Dated Content

If you think the content of this page does not reflect updated information, please let us know.

Report Now
perranperrancosti.com January 1, 2021
| |

Hello, Happy New Year
How do you display the cost with shortcode designer

muzikohrani.cz May 21, 2020
| |

Hi, how can I change the color of the search form. I bought a Modern Event Calendar Shortcode Designer Addon and a there is not a possibility how to do it.