{"id":1558,"date":"2016-01-05T18:37:19","date_gmt":"2016-01-05T18:37:19","guid":{"rendered":"\/?p=1558"},"modified":"2018-06-22T17:40:34","modified_gmt":"2018-06-22T12:10:34","slug":"two-step-modal-using-css-class","status":"publish","type":"docs","link":"https:\/\/convertplug.com\/plus\/docs\/two-step-modal-using-css-class\/","title":{"rendered":"How to trigger a Two Step Modal using CSS Class? (Trigger Module through Button)"},"content":{"rendered":"<p>You can trigger a Convert Plus module using CSS class applied to any element on the page. Let us take a look at how it can be done using a button. In this article, we&#8217;ll be seeing two ways out of many others.<\/p>\n<ul>\n<li><a href=\"#button\">Trigger a Module through an HTML Button<\/a><\/li>\n<li><a href=\"#wpbakery\">Trigger a Module through a WPBakery Page Builder button.<\/a><\/li>\n<\/ul>\n<div id=\"button\"><strong>Trigger a Module through an HTML button.<\/strong><\/div>\n<p>I am just showing you an example by creating a button with HTML. You can use this method and add a class to any element you create using HTML tags.<\/p>\n<p>Let us say, I use the following code to insert a button on my page. I have assigned a class named, &#8220;<strong>my-custom-class-here<\/strong>&#8221; that I&#8217;ll use to trigger a module.<\/p>\n<pre>&lt;button name\"sample\" class=\"my-custom-class-here\"&gt;<\/pre>\n<p>We now proceed adding this class to our Convert Plus module.<\/p>\n<p>Open a module in the editor.<\/p>\n<p>Click on <strong>Behavior -&gt; Manual Launch -&gt; Launch with CSS Class<\/strong>.<\/p>\n<p>Enter the Class name.<\/p>\n<p><a href=\"http:\/\/convertplug.com\/plus\/wp-content\/uploads\/sites\/4\/2016\/01\/Launch-Module-with-CSS-Class.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-10243 size-full\" src=\"http:\/\/convertplug.com\/plus\/wp-content\/uploads\/sites\/4\/2016\/01\/Launch-Module-with-CSS-Class.jpg\" alt=\"Launch Module With CSS Class\" width=\"2048\" height=\"1061\" title=\"How to trigger a Two Step Modal using CSS Class? (Trigger Module through Button)\" srcset=\"https:\/\/convertplug.com\/plus\/wp-content\/uploads\/sites\/4\/2016\/01\/Launch-Module-with-CSS-Class.jpg 2048w, https:\/\/convertplug.com\/plus\/wp-content\/uploads\/sites\/4\/2016\/01\/Launch-Module-with-CSS-Class-300x155.jpg 300w, https:\/\/convertplug.com\/plus\/wp-content\/uploads\/sites\/4\/2016\/01\/Launch-Module-with-CSS-Class-768x398.jpg 768w, https:\/\/convertplug.com\/plus\/wp-content\/uploads\/sites\/4\/2016\/01\/Launch-Module-with-CSS-Class-1024x531.jpg 1024w\" sizes=\"auto, (max-width: 2048px) 100vw, 2048px\" \/><\/a><\/p>\n<p>Edit the modal, tweak things. Once you&#8217;re satisfied, save &amp; activate it.<\/p>\n<hr \/>\n<div id=\"wpbakery\"><strong>Trigger a Module through a WPBakery Page Builder button.<\/strong><\/div>\n<p><span style=\"font-size: 16px;\">In this example, we are showing you how you can trigger a module through a WPBakery Page Builder button. You can do this through any element that allows you to add an extra CSS class. You can follow a similar method for other page builders too. Most of the page builders provide a way to add an extra custom class to their elements.<\/span><\/p>\n<p>Just for an example, <a href=\"http:\/\/convertplug.com\/plus\/demos\/\">WPBakery Page Builder<\/a> provides it here:<\/p>\n<p><a href=\"http:\/\/convertplug.com\/plus\/wp-content\/uploads\/sites\/4\/2016\/01\/my-custom-class-1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-10241 size-full\" src=\"http:\/\/convertplug.com\/plus\/wp-content\/uploads\/sites\/4\/2016\/01\/my-custom-class-1.jpg\" alt=\"My Custom Class 1\" width=\"749\" height=\"544\" title=\"How to trigger a Two Step Modal using CSS Class? (Trigger Module through Button)\" srcset=\"https:\/\/convertplug.com\/plus\/wp-content\/uploads\/sites\/4\/2016\/01\/my-custom-class-1.jpg 749w, https:\/\/convertplug.com\/plus\/wp-content\/uploads\/sites\/4\/2016\/01\/my-custom-class-1-300x218.jpg 300w\" sizes=\"auto, (max-width: 749px) 100vw, 749px\" \/><\/a>However &#8211; this depends on page builders. The process might be a bit different for Avada, WPBakery Page Builder and Cornerstone that comes with X theme. For more information, you can check the documentation of that respective page builder, or ask their developers.<\/p>\n<p><strong>You can check if the given class is successfully applied like this<\/strong> &#8211;<\/p>\n<p>Once you verify that the class is successfully applied, you can use the same class in the Convert Plus editor.<\/p>\n<p>Click on <strong>Behavior -&gt; Manual Launch -&gt; Launch with CSS Class<\/strong>.<\/p>\n<p>Enter the Class name.<\/p>\n<p><a href=\"http:\/\/convertplug.com\/plus\/wp-content\/uploads\/sites\/4\/2016\/01\/Launch-Module-with-CSS-Class.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-10243 size-full\" src=\"http:\/\/convertplug.com\/plus\/wp-content\/uploads\/sites\/4\/2016\/01\/Launch-Module-with-CSS-Class.jpg\" alt=\"Launch Module With CSS Class\" width=\"2048\" height=\"1061\" title=\"How to trigger a Two Step Modal using CSS Class? (Trigger Module through Button)\" srcset=\"https:\/\/convertplug.com\/plus\/wp-content\/uploads\/sites\/4\/2016\/01\/Launch-Module-with-CSS-Class.jpg 2048w, https:\/\/convertplug.com\/plus\/wp-content\/uploads\/sites\/4\/2016\/01\/Launch-Module-with-CSS-Class-300x155.jpg 300w, https:\/\/convertplug.com\/plus\/wp-content\/uploads\/sites\/4\/2016\/01\/Launch-Module-with-CSS-Class-768x398.jpg 768w, https:\/\/convertplug.com\/plus\/wp-content\/uploads\/sites\/4\/2016\/01\/Launch-Module-with-CSS-Class-1024x531.jpg 1024w\" sizes=\"auto, (max-width: 2048px) 100vw, 2048px\" \/><\/a><\/p>\n<p>Edit the modal, tweak things. Once you&#8217;re satisfied, save &amp; activate it.<\/p>\n<p>And you should be done!<\/p>\n<pre><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>You can trigger a Convert Plus module using CSS class applied to any element on the page. Let us take a look at how it can be done using a button. In this article, we&#8217;ll be seeing two ways out of many others. Trigger a Module through an HTML Button Trigger a Module through a [&hellip;]<\/p>\n","protected":false},"author":23,"featured_media":0,"template":"","meta":{"inline_featured_image":false,"site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"docs_category":[19,20],"docs_tag":[],"class_list":["post-1558","docs","type-docs","status-publish","hentry","docs_category-faqs","docs_category-general"],"_links":{"self":[{"href":"https:\/\/convertplug.com\/plus\/wp-json\/wp\/v2\/docs\/1558","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/convertplug.com\/plus\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/convertplug.com\/plus\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/convertplug.com\/plus\/wp-json\/wp\/v2\/users\/23"}],"version-history":[{"count":4,"href":"https:\/\/convertplug.com\/plus\/wp-json\/wp\/v2\/docs\/1558\/revisions"}],"predecessor-version":[{"id":22428,"href":"https:\/\/convertplug.com\/plus\/wp-json\/wp\/v2\/docs\/1558\/revisions\/22428"}],"wp:attachment":[{"href":"https:\/\/convertplug.com\/plus\/wp-json\/wp\/v2\/media?parent=1558"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/convertplug.com\/plus\/wp-json\/wp\/v2\/docs_category?post=1558"},{"taxonomy":"docs_tag","embeddable":true,"href":"https:\/\/convertplug.com\/plus\/wp-json\/wp\/v2\/docs_tag?post=1558"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}