{"id":2067,"date":"2019-12-27T12:03:50","date_gmt":"2019-12-27T12:03:50","guid":{"rendered":"https:\/\/webnus.site\/dox\/?p=2067"},"modified":"2026-02-23T11:38:58","modified_gmt":"2026-02-23T11:38:58","slug":"elementor-shortcode-designer-addon","status":"publish","type":"knowledgebase","link":"https:\/\/webnus.net\/dox\/modern-events-calendar\/elementor-shortcode-designer-addon\/","title":{"rendered":"Elementor Shortcode Designer Addon"},"content":{"rendered":"\n<p>The <strong>Elementor Shortcode Designer Addon<\/strong> is a powerful tool for Modern Events Calendar (MEC) that allows you to create fully customized shortcodes. By using Elementor&#8217;s drag-and-drop interface and specialized widgets, you have limitless possibilities for displaying events with your preferred style and positioning.<\/p>\n\n\n<style>\n        .display_infobox_wrap {\n          border: solid 1px #e3e5e7;\n          padding: 24px;\n          border-radius: 11px;\n          display: flex;\n          flex-wrap: wrap;\n          justify-content: space-between;\n          flex-direction: row;\n          box-sizing: border-box;\n        }\n        .display_infobox_wrap .infobox-first-col p:last-child {\n          margin-bottom: 0px !important;\n        }\n\n        @media (max-width: 480px) {\n          .display_infobox_wrap {\n            flex-direction: column;\n          }\n          .display_infobox_wrap .infobox-third-col {\n            flex-direction: row !important;\n            width: 100%;\n            margin-top: 30px;\n            gap: 10px;\n            justify-content: space-between !important;\n          }\n          .display_infobox_wrap .infobox-third-col a {\n            width: 50% !important;\n          }\n        }\n\n        .display_infobox_wrap p {\n          font-size: 16px !important;\n          margin-bottom: 10px !important;\n        }\n\n        .display_infobox_wrap a.changelog-url {\n          font-size: 16px;\n          font-weight: bold;\n          color: #43494f;\n          text-decoration: underline;\n        }\n        .display_infobox_wrap a.changelog-url:hover {\n          color: #02b9ff;\n        }\n\n        .display_infobox_wrap .infobox-third-col {\n          display: flex;\n          flex-direction: column;\n          justify-content: center;\n          align-items: center;\n          row-gap: 10px;\n        }\n\n        .display_infobox_wrap .infobox-third-col a {\n          width: 130px;\n          font-size: 15px;\n          font-weight: 300;\n          border: solid 1px;\n          border-radius: 5px;\n          text-align: center;\n          padding: 5px;\n        }\n\n        .display_infobox_wrap .infobox-third-col a:hover {\n          color: #02b9ff;\n          box-shadow: 0 0 0 1px #b9e5f5;\n          border-color: transparent;\n          background-color: #ecfaff;\n        }\n\n        .display_infobox_wrap .infobox-third-col a.demo-button {\n          border-color: transparent;\n          background-color: #ecfaff;\n        }\n\n        .display_infobox_wrap .infobox-third-col a.demo-button:hover {\n          color: #02b9ff;\n          box-shadow: 0 0 0 1px #b9e5f5;\n        }\n    <\/style><div class=\"display_infobox_wrap\"><div class=\"infobox-first-col\"><p><strong>Requirements<\/strong><br>MEC Lite\/Pro<\/p><p><strong>Latest Version<\/strong><br>1.5.0<\/p><\/div><div class=\"infobox-second-col\"><p><strong>Last Updated<\/strong><br>2025-12-16 15:28:13<\/p><a href=\"https:\/\/www.webnus.net\/modern-events-calendar\/addons\/elementor-shortcode-designer\/#changelog\" class=\"changelog-url\" target=\"_blank\">Changelog<\/a><\/div><div class=\"infobox-third-col\"><a href=\"https:\/\/my.webnus.net\/checkout?edd_action=add_to_cart&#038;download_id=34430537&#038;edd_options%5Bprice_id%5D=1\" class=\"buy-now-button\" target=\"_blank\">Buy Now<\/a><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Initial_Setup_Requirements\"><\/span>Initial Setup &amp; Requirements<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Before you begin, ensure your environment meets the following requirements:<\/p>\n\n\n\n<p>\u2022 <strong>MEC Lite or Pro:<\/strong> This addon works with both versions (version 6.0 or higher).<\/p>\n\n\n\n<p>\u2022 <strong>Elementor:<\/strong> You must have Elementor installed and active (version 3.0 or higher).<\/p>\n\n\n\n<p>\u2022 <strong>System Requirements:<\/strong> Your server should run at least <strong>PHP 7.4<\/strong> and <strong>WordPress 5.0<\/strong>. Additionally, the <strong>&#8216;allow_url_fopen&#8217;<\/strong> property must be enabled on your server for the addon to function correctly.<\/p>\n\n\n\n<p>\u2022 <strong>Enable Post Type:<\/strong> Navigate to <strong>Elementor &gt; Settings &gt; General<\/strong> and check the box for <strong>MEC Designer<\/strong>. This enables the post type required to create designs.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/12\/shortcode-designer-01.png\" data-rel=\"lightbox-image-0\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" width=\"2634\" height=\"1134\" src=\"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/12\/shortcode-designer-01.png\" alt=\"Shortcode Designer\" class=\"wp-image-10953\" title=\"\" srcset=\"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/12\/shortcode-designer-01.png 2634w, https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/12\/shortcode-designer-01-300x129.png 300w, https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/12\/shortcode-designer-01-1024x441.png 1024w, https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/12\/shortcode-designer-01-768x331.png 768w, https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/12\/shortcode-designer-01-1536x661.png 1536w, https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/12\/shortcode-designer-01-2048x882.png 2048w\" sizes=\"auto, (max-width: 2634px) 100vw, 2634px\" \/><\/a><\/figure>\n\n\n\n<p><strong>Pro Tip:<\/strong> If you encounter an error before entering the Elementor editor, go to <strong>WordPress Settings &gt; Permalinks<\/strong> and click <strong>Save Changes<\/strong> to refresh your site&#8217;s links.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/12\/elementor-form-builder-07.png\" data-rel=\"lightbox-image-1\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" width=\"896\" height=\"458\" src=\"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/12\/elementor-form-builder-07.png\" alt=\"Form Builder Addon\" class=\"wp-image-10941\" title=\"\" srcset=\"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/12\/elementor-form-builder-07.png 896w, https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/12\/elementor-form-builder-07-300x153.png 300w, https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/12\/elementor-form-builder-07-768x393.png 768w\" sizes=\"auto, (max-width: 896px) 100vw, 896px\" \/><\/a><\/figure>\n\n\n\n<div class=\"wp-block-mec-inline-post-mec-inline-post-block mec-inline-post-container\"><span class=\"mec-inline-icon-before\"><\/span><p class=\"mec-inline-post-text\">Read Also: <\/p><a href=\"https:\/\/webnus.net\/dox\/modern-events-calendar\/installation\/\" class=\"mec-inline-post-link\">How to install MEC and Addons?<\/a><span class=\"mec-inline-icon-after\"><\/span><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Creating_Your_Custom_Design\"><\/span>Creating Your Custom Design<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>To build a new layout, you first need to create the design template within the MEC Designer hub.<\/p>\n\n\n\n<p>1. Navigate to <strong>WordPress Dashboard &gt; MEC Designer<\/strong> and click <strong>Add New<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/11\/shortcode-designer-addon-03.jpeg\" data-rel=\"lightbox-image-2\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" width=\"679\" height=\"595\" src=\"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/11\/shortcode-designer-addon-03.jpeg\" alt=\"Elementor Shortcode Designer Addon\" class=\"wp-image-10692\" title=\"\" srcset=\"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/11\/shortcode-designer-addon-03.jpeg 679w, https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/11\/shortcode-designer-addon-03-300x263.jpeg 300w\" sizes=\"auto, (max-width: 679px) 100vw, 679px\" \/><\/a><\/figure>\n\n\n\n<p>2. Enter a <strong>Title<\/strong> for your design and save the page.<\/p>\n\n\n\n<p>3. Click the <strong>Edit with Elementor<\/strong> button to open the visual builder.<\/p>\n\n\n\n<p>4. Use the specialized <strong>Elementor Shortcode Designer widgets<\/strong>, the standard <strong>MEC widget<\/strong>, or the <strong>Inner Section Widget<\/strong> from the sidebar to build your layout.<\/p>\n\n\n\n<p>If you have difficulty finding a distinguishing layout for your target, check out the\u00a0<a href=\"https:\/\/www.awwwards.com\/websites\/events\/\" target=\"_blank\" rel=\"noreferrer noopener\">Best Selection of Events Website<\/a>. Get\u00a0some\u00a0ideas on fully taking\u00a0advantage of the <strong>Modern Events Calendar\u00a0Elementor Shortcode Designer Addon<\/strong>.\u00a0<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d11a2be6d4f&quot;}\" data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1344\" height=\"1230\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2019\/12\/shortcode-designer-02.png\" alt=\"Shortcode Designer\" class=\"wp-image-10954\" title=\"\" srcset=\"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2019\/12\/shortcode-designer-02.png 1344w, https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2019\/12\/shortcode-designer-02-300x275.png 300w, https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2019\/12\/shortcode-designer-02-1024x937.png 1024w, https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2019\/12\/shortcode-designer-02-768x703.png 768w\" sizes=\"auto, (max-width: 1344px) 100vw, 1344px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on-async--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p>5. Customize typography, colors, and spacing for every widget to match your brand.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/12\/shortcode-designer-03.png\" data-rel=\"lightbox-image-3\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1085\" src=\"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/12\/shortcode-designer-03.png\" alt=\"Shortcode Designer\" class=\"wp-image-10955\" title=\"\" srcset=\"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/12\/shortcode-designer-03.png 1920w, https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/12\/shortcode-designer-03-300x170.png 300w, https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/12\/shortcode-designer-03-1024x579.png 1024w, https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/12\/shortcode-designer-03-768x434.png 768w, https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/12\/shortcode-designer-03-1536x868.png 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/12\/shortcode-designer-04.png\" data-rel=\"lightbox-image-4\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1085\" src=\"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/12\/shortcode-designer-04.png\" alt=\"Shortcode Designer\" class=\"wp-image-10956\" title=\"\" srcset=\"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/12\/shortcode-designer-04.png 1920w, https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/12\/shortcode-designer-04-300x170.png 300w, https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/12\/shortcode-designer-04-1024x579.png 1024w, https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/12\/shortcode-designer-04-768x434.png 768w, https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/12\/shortcode-designer-04-1536x868.png 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/a><\/figure>\n\n\n\n<p>6. Once satisfied, click <strong>Publish<\/strong> or <strong>Update<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-mec-inline-post-mec-inline-post-block mec-inline-post-container\"><span class=\"mec-inline-icon-before\"><\/span><p class=\"mec-inline-post-text\">Read Also: <\/p><a href=\"https:\/\/webnus.net\/dox\/modern-events-calendar\/elementor-shortcode-builder-addon\/\" class=\"mec-inline-post-link\">How to work with Shortcode Builder Addon?<\/a><span class=\"mec-inline-icon-after\"><\/span><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Assigning_and_Displaying_Shortcodes\"><\/span>Assigning and Displaying Shortcodes<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>After creating a design, you must assign it to a functional MEC shortcode to display it on your website.<\/p>\n\n\n\n<p>1. Go to <strong>WP Dashboard &gt; M.E. Calendar &gt; Shortcodes<\/strong> and click <strong>Add Shortcode<\/strong>.<\/p>\n\n\n\n<p>2. In the <strong>Skins<\/strong> section, select <strong>Shortcode Designer<\/strong> from the dropdown.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2019\/12\/Elementor-Shortcode-Designer-Shortcode-page.png\" data-rel=\"lightbox-image-5\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" width=\"1728\" height=\"2466\" src=\"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2019\/12\/Elementor-Shortcode-Designer-Shortcode-page.png\" alt=\"\" class=\"wp-image-12098\" title=\"\" srcset=\"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2019\/12\/Elementor-Shortcode-Designer-Shortcode-page.png 1728w, https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2019\/12\/Elementor-Shortcode-Designer-Shortcode-page-210x300.png 210w, https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2019\/12\/Elementor-Shortcode-Designer-Shortcode-page-718x1024.png 718w, https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2019\/12\/Elementor-Shortcode-Designer-Shortcode-page-768x1096.png 768w, https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2019\/12\/Elementor-Shortcode-Designer-Shortcode-page-1076x1536.png 1076w, https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2019\/12\/Elementor-Shortcode-Designer-Shortcode-page-1435x2048.png 1435w\" sizes=\"auto, (max-width: 1728px) 100vw, 1728px\" \/><\/a><\/figure>\n\n\n\n<p>3. In the <strong>Style<\/strong> section, choose the specific design template you created in the previous step.<\/p>\n\n\n\n<p>4. <strong>Configure Display Options:<\/strong><\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;\u25e6 <strong>Event Limits:<\/strong> Set the maximum number of events to be shown.<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;\u25e6 <strong>Search Form:<\/strong> Activate the <strong>MEC Search Form<\/strong> and its filtering features within the shortcode.<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;\u25e6 <strong>Event Display Mode:<\/strong> Choose between <strong>Modal<\/strong> or <strong>Separate Window<\/strong> for how event details open.<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;\u25e6 <strong>Map Integration:<\/strong> Select <strong>Show Map on Top<\/strong> if you wish to display a map above your event list.<\/p>\n\n\n\n<p>5. <strong>Deploy:<\/strong> Copy the generated shortcode and place it on any page or post.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/12\/shortcode-designer-06.png\" data-rel=\"lightbox-image-6\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"624\" src=\"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/12\/shortcode-designer-06.png\" alt=\"Shortcode Designer\" class=\"wp-image-10958\" title=\"\" srcset=\"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/12\/shortcode-designer-06.png 1920w, https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/12\/shortcode-designer-06-300x98.png 300w, https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/12\/shortcode-designer-06-1024x333.png 1024w, https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/12\/shortcode-designer-06-768x250.png 768w, https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/12\/shortcode-designer-06-1536x499.png 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/12\/shortcode-designer-09.png\" data-rel=\"lightbox-image-7\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1240\" src=\"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/12\/shortcode-designer-09.png\" alt=\"Shortcode Designer\" class=\"wp-image-10959\" style=\"object-fit:cover\" title=\"\" srcset=\"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/12\/shortcode-designer-09.png 1920w, https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/12\/shortcode-designer-09-300x194.png 300w, https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/12\/shortcode-designer-09-1024x661.png 1024w, https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/12\/shortcode-designer-09-768x496.png 768w, https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-content\/uploads\/2023\/12\/shortcode-designer-09-1536x992.png 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/a><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-palette-color-5-color has-alpha-channel-opacity has-palette-color-5-background-color has-background\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Customization_Advanced_Features\"><\/span>Customization &amp; Advanced Features<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The addon provides extensive control over how your event data is presented:<\/p>\n\n\n\n<p>\u2022 <strong>Unlimited Layouts:<\/strong> Create as many unique shortcode designs as needed for different areas of your site.<\/p>\n\n\n\n<p>\u2022 <strong>Widget-Based Design:<\/strong> Unlike the <strong>Shortcode Builder Addon<\/strong>, which focuses on live placement, the <strong>Shortcode Designer Addon<\/strong> focuses on the granular styling of elements within the shortcode items themselves.<\/p>\n\n\n\n<p>\u2022 <strong>Search Functionality:<\/strong> You can add exclusive search and filtering functions directly into your custom layouts to enhance user experience.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Use_Cases_When_This_Addon_is_Useful\"><\/span>Use Cases (When This Addon is Useful)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u2022 <strong>Unique Branding Requirements:<\/strong> Perfect for users who need event lists to match a highly specific website aesthetic that standard skins cannot provide.<\/p>\n\n\n\n<p>\u2022 <strong>Complex Layout Needs:<\/strong> Ideal when you need to position specific event details (like date, location, or custom fields) in non-standard locations using Elementor\u2019s grid system.<\/p>\n\n\n\n<p>\u2022 <strong>Feature-Rich Event Displays:<\/strong> Useful for adding custom search filters and maps directly into a tailored event gallery.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Situations_This_Addon_May_Not_Be_Ideal\"><\/span>Situations This Addon May Not Be Ideal<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u2022 <strong>Non-Elementor Sites:<\/strong> This addon is specifically designed for Elementor and will not provide a drag-and-drop experience for other page builders like Divi or WPBakery (though those can still be used for other parts of the site).<\/p>\n\n\n\n<p>\u2022 <strong>Simple Setup Needs:<\/strong> If you are happy with the default MEC skins, this addon may add unnecessary complexity to your workflow.<\/p>\n\n\n\n<p>\u2022 <strong>Live Previewing during Placement:<\/strong> For users who want to see live previews of events while embedding shortcodes into pages, the <strong><a href=\"https:\/\/webnus.net\/dox\/modern-events-calendar\/elementor-shortcode-builder-addon\/\">MEC Elementor Shortcode Builder Addon<\/a><\/strong> is a more appropriate tool.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Troubleshooting_for_Beginners\"><\/span>Troubleshooting for Beginners<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u2022 <strong>Error 500 in Elementor:<\/strong> This usually indicates a server configuration issue. Ensure you are using the latest version of the addon, and increase your <strong>PHP memory limit to 512MB<\/strong> in your <code>wp-config.php<\/code> file.<\/p>\n\n\n\n<p>\u2022 <strong>Widgets Not Loading:<\/strong> Double-check that <strong>&#8216;allow_url_fopen&#8217;<\/strong> is enabled on your server. If it is disabled, contact your hosting provider to enable it.<\/p>\n\n\n\n<p>\u2022 <strong>Missing &#8220;MEC Designer&#8221; Option:<\/strong> Ensure you have enabled the post type under <strong>Elementor &gt; Settings &gt; General<\/strong>.<\/p>\n\n\n\n<p>\u2022 <strong>Addon Not Updating:<\/strong> If you don&#8217;t see an update option in <strong>Plugins &gt; Installed Plugins<\/strong>, verify that your license is correctly activated or manually download the latest version from the Webnus dashboard.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Elementor Shortcode Designer - Customize Archive Page with Elementor in Modern Events Calendar\" width=\"980\" height=\"551\" src=\"https:\/\/www.youtube.com\/embed\/lgQvDTKroOU?start=30&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"FAQ\"><\/span>FAQ<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-1746521636904\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><span class=\"ez-toc-section\" id=\"How_do_I_install_and_activate_the_Elementor_Shortcode_Designer_Addon\"><\/span>How do I install and activate the Elementor Shortcode Designer Addon?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>To install the <strong>MEC Elementor Shortcode Designer Addon<\/strong>, 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.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1746521660959\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><span class=\"ez-toc-section\" id=\"How_can_I_enable_the_MEC_Designer_post_type_in_Elementor\"><\/span>How can I enable the MEC Designer post type in Elementor?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>To integrate MEC with Elementor, go to your WordPress dashboard, navigate to <strong>Elementor &gt; Settings &gt; General<\/strong>, and check the box labeled &#8216;MEC Designer&#8217;. This will allow you to create and edit MEC shortcodes using Elementor&#8217;s interface.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1746521783009\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><span class=\"ez-toc-section\" id=\"What_should_I_do_if_I_encounter_an_error_before_entering_the_Elementor_editor\"><\/span>What should I do if I encounter an error before entering the Elementor editor?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>If you face an error before accessing the Elementor editor, try refreshing your WordPress permalinks. Navigate to <strong>&#8216;Settings&#8217; &gt; &#8216;Permalinks&#8217;<\/strong> in your WordPress dashboard and click the &#8216;<strong>Save Changes&#8217;<\/strong> button without making any modifications. This action often resolves such issues.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1746521793025\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><span class=\"ez-toc-section\" id=\"Can_I_use_other_page_builders_alongside_Elementor_with_this_addon\"><\/span>Can I use other page builders alongside Elementor with this addon?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Yes, the Elementor Shortcode Designer Addon is designed to work primarily with Elementor. However, you can use other page builders like Divi, WPBakery, or KingComposer for other parts of your site. There are no inherent limitations in this regard.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1746521816521\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><span class=\"ez-toc-section\" id=\"How_do_I_design_a_new_shortcode_using_Elementor\"><\/span>How do I design a new shortcode using Elementor?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>After activating the addon, navigate to &#8216;<strong>MEC Designer<\/strong>&#8216; in your WordPress dashboard and click &#8216;<strong>Add New<\/strong>&#8216;. Enter a title for your shortcode and save the page. Then, click &#8216;Edit with Elementor&#8217; to open the Elementor editor. From there, you can drag and drop MEC widgets to design your shortcode as desired.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1746521835540\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><span class=\"ez-toc-section\" id=\"Is_it_possible_to_limit_the_number_of_events_displayed_in_a_shortcode\"><\/span>Is it possible to limit the number of events displayed in a shortcode?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Yes, the addon allows you to set limits on the number of events displayed within a shortcode. After the shortcode design process, you can specify the maximum number of events to be shown in the <strong>M.E. Calendar &gt; Shortcodes<\/strong>.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1746521901458\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><span class=\"ez-toc-section\" id=\"What_customization_options_are_available_with_the_Elementor_Shortcode_Designer_Addon\"><\/span>What customization options are available with the Elementor Shortcode Designer Addon?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>The addon offers extensive customization options, including: Creating unlimited custom shortcodes using Elementor&#8217;s drag-and-drop interface, designing event displays by selecting and styling specific elements, adding exclusive search functionalities to enhance user experience.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1746521975292\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><span class=\"ez-toc-section\" id=\"Is_it_possible_to_add_a_search_function_to_my_custom_shortcode\"><\/span>Is it possible to add a search function to my custom shortcode?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Yes, the addon allows you to use search functionality in your custom shortcodes. After designing your shortcode in Elementor, in the Assigning the Shortcode Designer templates to the shortcodes, you can activate the <strong>MEC Search Form<\/strong> and its filtering features.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1746521998775\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><span class=\"ez-toc-section\" id=\"How_do_I_assign_the_designed_custom_template_shortcode_to_a_shortcode_and_display_it_on_the_website\"><\/span>How do I assign the designed custom template shortcode to a shortcode and display it on the website?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>After designing your shortcode, publish or update the page and return to your WordPress dashboard. To assign your designed shortcode template to a shortcode for display on your website, follow these steps:<br \/>1. Navigate to WP Dashboard &gt; M.E. Calendar &gt; Shortcodes.<br \/>2. Click on Add Shortcode.<br \/>3. Enter a title.<br \/>4. In the skins section, select \u201cShortcode Designer.\u201d<br \/>5. In the Style section, choose the desired shortcode design (you can have multiple designs).<br \/>6. Configure the settings and place the shortcode on your chosen page.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1746522019726\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><span class=\"ez-toc-section\" id=\"Can_I_display_a_map_above_my_custom_shortcode\"><\/span>Can I display a map above my custom shortcode?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Yes, when configuring your shortcode settings, select the <strong>&#8216;Show Map on Top&#8217; <\/strong>option.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1746522049975\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><span class=\"ez-toc-section\" id=\"What_should_I_do_if_my_server_has_the_%E2%80%98allow_url_fopen_property_disabled\"><\/span>What should I do if my server has the &#8216;allow_url_fopen&#8217; property disabled?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>The addon requires the <strong>&#8216;allow_url_fopen&#8217;<\/strong> property to be enabled on your server. If it&#8217;s disabled, please contact your hosting provider and request them to enable this property to ensure the addon functions correctly.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1746522069776\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><span class=\"ez-toc-section\" id=\"What_are_the_system_requirements_to_use_the_MEC_Elementor_Shortcode_Builder_Addon\"><\/span>What are the system requirements to use the MEC Elementor Shortcode Builder Addon?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>The MEC <strong>Elementor Shortcode Designer Addon<\/strong> 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.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1746522097225\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><span class=\"ez-toc-section\" id=\"How_do_I_update_the_MEC_Elementor_Shortcode_Designer_Addon\"><\/span>How do I update the MEC Elementor Shortcode Designer Addon?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>To update the MEC Elementor Shortcode Designer Addon, go to your WordPress dashboard and navigate to<strong> Plugins &gt; Installed Plugins<\/strong>. If an update is available, you will see an option to update the plugin. Click the Update Now button to ensure you are using the latest version with bug fixes and improvements. If a plugin update is unavailable, you may not have activated the addon license correctly, or you might be using an outdated version and need to manually download this addon through the Webnus dashboard and reinstall it.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1746522120193\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><span class=\"ez-toc-section\" id=\"What_is_the_difference_between_MEC_Elementor_Shortcode_Designer_and_MEC_Elementor_Shortcode_Builder_addons\"><\/span>What is the difference between MEC Elementor Shortcode Designer and MEC Elementor Shortcode Builder addons?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>The Elementor Shortcode Designer Addon enables you to create custom shortcodes using specialized widgets in Elementor. This provides you with limitless options for displaying events in your preferred style and position. With this addon, you can design elements.<br \/>The Elementor Shortcode Builder Addon allows you to freely customize your shortcodes and place them anywhere on your website. It enables you to create shortcodes in the Elementor Live Editor. Adding this widget to your pages allows you to preview events and embed shortcodes effortlessly.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1746522147912\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><span class=\"ez-toc-section\" id=\"What_should_I_do_if_I_encounter_an_Error_500_screen_while_editing_with_Elementor\"><\/span>What should I do if I encounter an Error 500 screen while editing with Elementor?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>An Error 500 typically indicates server configuration issues. Ensure you&#8217;re using the latest version of the Elementor Shortcode Designer Addon. If the problem persists, increase the PHP memory limit to 512MB in the config.php file. If the problem still persists, review your server settings or contact your hosting provider for assistance. If needed, reach out to MEC support for further help.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you want to create fully customized event websites, then the shortcode designer feature of the Modern Events Calendar gives you great versatility. By a simple drag and drop, add as many visual elements as you want to maximize the potential of your website.  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","template":"","knowledgebase_cat":[15],"class_list":["post-2067","knowledgebase","type-knowledgebase","status-publish","hentry","knowledgebase_cat-addons"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-json\/wp\/v2\/knowledgebase\/2067","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-json\/wp\/v2\/knowledgebase"}],"about":[{"href":"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-json\/wp\/v2\/types\/knowledgebase"}],"author":[{"embeddable":true,"href":"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-json\/wp\/v2\/comments?post=2067"}],"version-history":[{"count":13,"href":"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-json\/wp\/v2\/knowledgebase\/2067\/revisions"}],"predecessor-version":[{"id":12612,"href":"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-json\/wp\/v2\/knowledgebase\/2067\/revisions\/12612"}],"wp:attachment":[{"href":"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-json\/wp\/v2\/media?parent=2067"}],"wp:term":[{"taxonomy":"knowledgebase_cat","embeddable":true,"href":"https:\/\/webnus.net\/dox\/modern-events-calendar\/wp-json\/wp\/v2\/knowledgebase_cat?post=2067"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}