{"id":104225,"date":"2023-02-09T17:14:30","date_gmt":"2023-02-09T11:44:30","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&amp;p=104225"},"modified":"2023-02-09T17:14:30","modified_gmt":"2023-02-09T11:44:30","slug":"open-popup-on-button-click-in-elementor","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/open-popup-on-button-click-in-elementor\/","title":{"rendered":"How to open a Popup on button link click in Elementor?"},"content":{"rendered":"\n<p>One of the most common use cases for popups is to open a popup on a button click, this is very handy when you want to show additional information after the user clicks on a button without having them leave the page. Using this method, you can show a menu or newsletter signup form in a popup when the user clicks on a button.<\/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>With the Popup Builder widget from The Plus Addons for Elementor, you can have different types of popup trigger elements one of them is a button, so you don\u2019t have to add a separate button for this.<\/p>\n\n\n\n<p>So to do this, add the widget on the page and go to <strong>Content<\/strong> &gt; <strong>Select Option<\/strong> and choose <strong>Call To Action<\/strong> from the dropdown.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"267\" height=\"971\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/popup-builder-button.png\" alt=\"popup builder button\" class=\"wp-image-104226\"\/><\/figure>\n\n\n\n<p>This will add a button to your page, you\u2019ll also get some customization options as well, from there you can change the button text, add icons, adjust icon position and button alignment etc. From the style tab, you can adjust the button style too.<\/p>\n\n\n\n<p>If you want from the <strong>Extra Options<\/strong> tab, you can adjust the placement of the button as well.<\/p>\n\n\n\n<p>Now if someone clicks on the button it will open the popup.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1920\" height=\"948\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/02\/button-popup-demo.gif\" alt=\"button popup demo\" class=\"wp-image-104227\"\/><\/figure>\n\n\n\n<p><a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/elementor-popup-on-other-element-click\/\" target=\"_blank\" rel=\"noreferrer noopener\">Learn how to open a popup using a custom selector<\/a>.<\/p>\n","protected":false},"author":16,"featured_media":104371,"parent":0,"comment_status":"open","ping_status":"open","template":"","format":"standard","docs":[527,549],"class_list":["post-104225","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\/104225","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=104225"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/104225\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/104371"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=104225"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=104225"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}