{"id":104234,"date":"2023-02-09T17:27:13","date_gmt":"2023-02-09T11:57:13","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&amp;p=104234"},"modified":"2023-02-09T17:27:13","modified_gmt":"2023-02-09T11:57:13","slug":"off-canvas-popup-menu-in-elementor","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/off-canvas-popup-menu-in-elementor\/","title":{"rendered":"How to create an Off Canvas Popup Side Menu in Elementor?"},"content":{"rendered":"\n<p>The Elementor page builder allows you to create amazing websites with its easy drag and drop interface and adding an off canvas popup menu option can add an extra dimension to your website.<\/p>\n\n\n\n<p>With the Popup Builder widget from The Plus Addons for Elementor, you can easily add an off canvas menu to your website.<\/p>\n\n\n\n<p><em>To check the complete feature overview documentation of The Plus Addons for Elementor Popup Builder widget, <a href=\"\/docs\/popup-builder-elementor-widget-settings-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">click here<\/a>.<\/em><\/p>\n\n\n\n<p><strong><em>Requirement&nbsp; &#8211; This widget is a part of The Plus Addons for Elementor, make sure its installed &amp; activated to enjoy all its powers.<\/em><\/strong><\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-75 is-style-fill\"><a class=\"wp-block-button__link has-nxt-global-color-8-color has-nxt-global-color-1-background-color has-text-color has-background wp-element-button\" href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/widgets\/popup-builder?utm_source=tpae&amp;utm_medium=docs&amp;utm_campaign=text\" style=\"border-radius:5px\" target=\"_blank\" rel=\"noreferrer noopener\">LIVE WIDGET LINK<\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>To do this, first you have to create an Elementor template with a menu, for this, you can use normal links or if you want, you can use the Navigation Menu widget of The Plus Addons for Elementor.<\/p>\n\n\n\n<p>Let\u2019s say we named the template Popup Menu.<\/p>\n\n\n\n<p>Since this will be the menu of your website, you should place the Popup Builder widget in the header template.<\/p>\n\n\n\n<p>So once you have created your template, add the widget on the page\/template and go to <strong>Content<\/strong> > <strong>Popup Type<\/strong> choose either <strong>Reveal Content<\/strong> or <strong>Slide<\/strong> both will allow you to create off canvas menu effect.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"300\" height=\"952\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/popup-builder-off-canvas.png\" alt=\"popup builder off canvas\" class=\"wp-image-104235\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/popup-builder-off-canvas.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/popup-builder-off-canvas-95x300.png 95w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/figure>\n\n\n\n<p>With the <strong>Reveal Content<\/strong> option, it will push the entire website content while opening the popup, but with the <strong>Slide<\/strong> option the popup will just slide and open.<\/p>\n\n\n\n<p>So it is up to your preference which option you choose. For the popup direction, you should choose <strong>Left<\/strong> or <strong>Right<\/strong> from the <strong>Open Direction<\/strong> dropdown.<\/p>\n\n\n\n<p>After this, simply choose the <strong>Template<\/strong> option from the <strong>Content Type<\/strong> dropdown and from the <strong>Select Content<\/strong> dropdown, choose your Elementor template with the menu.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"449\" height=\"899\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/popup-builder-menu-template.png\" alt=\"popup builder menu template\" class=\"wp-image-104236\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/popup-builder-menu-template.png 449w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/popup-builder-menu-template-150x300.png 150w\" sizes=\"(max-width: 449px) 100vw, 449px\" \/><\/figure>\n\n\n\n<p>Finally, for the popup trigger from the Select Option dropdown choose the <strong>Icon<\/strong> option and select the appropriate style for the icon or you can choose a custom image as well.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"300\" height=\"898\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/popup-builder-icon-trigger.png\" alt=\"popup builder icon trigger\" class=\"wp-image-104237\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/popup-builder-icon-trigger.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/popup-builder-icon-trigger-100x300.png 100w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/figure>\n\n\n\n<p>Since this is a menu popup make sure to disable both <strong>Esc Button Close Content<\/strong> and <strong>Outer Click Close Content<\/strong> options from the <strong>Extra Options<\/strong> tab.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"299\" height=\"508\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/popup-builder-esc-outer-disable.png\" alt=\"popup builder esc outer disable\" class=\"wp-image-104238\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/popup-builder-esc-outer-disable.png 299w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/02\/popup-builder-esc-outer-disable-177x300.png 177w\" sizes=\"(max-width: 299px) 100vw, 299px\" \/><\/figure>\n\n\n\n<p>So your menu will not close if someone clicks outside the popup or presses the Esc key.<\/p>\n\n\n\n<p>From the <strong>Style<\/strong> tab, you should make the <strong>Popup Background Overlay<\/strong> transparent to remove the popup overlay effect.<\/p>\n\n\n\n<p>That is it! Now if you click on the icon, the menu popup will open, creating an off canvas effect.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"948\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/off-canvas-demo.gif\" alt=\"elementor off canvas popupdemo\" class=\"wp-image-104239\"\/><\/figure>\n","protected":false},"author":16,"featured_media":104368,"parent":0,"comment_status":"open","ping_status":"open","template":"","format":"standard","docs":[527,549],"class_list":["post-104234","documents","type-documents","status-publish","format-standard","has-post-thumbnail","hentry","docs-plus-widgets","docs-popup"],"acf":[],"_links":{"self":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/104234","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents"}],"about":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/types\/documents"}],"author":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/comments?post=104234"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/104234\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/104368"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=104234"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=104234"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}