{"id":3182,"date":"2016-06-20T11:35:58","date_gmt":"2016-06-20T06:05:58","guid":{"rendered":"\/?p=3182"},"modified":"2018-06-04T15:35:34","modified_gmt":"2018-06-04T10:05:34","slug":"display-a-module-using-class-name-and-id","status":"publish","type":"docs","link":"https:\/\/convertplug.com\/plus\/docs\/display-a-module-using-class-name-and-id\/","title":{"rendered":"Display Module when User Scrolls to a certain elements on the page \u2013 Using Class name and ID"},"content":{"rendered":"

Available from Version 2.3.1<\/p>\n

ConvertPlus is a WordPress popup plugin that lets you create attractive popups and control their behavior on your website. You can decide how and when they can appear before your audiences.<\/p>\n

Advanced triggers like the exit intent, the after scroll, inactivity, after post and more help you display the right message at the right time.<\/p>\n

Have you ever wondered whether you could display a popup, a slide-in, or an infobar when a user reaches up to a certain element or text on the page; i.e. when a particular element or text is visible in the\u00a0view port?<\/em><\/p>\n

ConvertPlus lets you do that too!<\/strong><\/em><\/p>\n

Suppose you have a page, with a long text, and you wish to display a separate module when a user reaches to a certain level of the content. You can do this by using the ID or class name you set for that particular element (eg: a button) or text.<\/p>\n

Do you wish to display a popup when the user reaches to the button seen in the image below?<\/p>\n

\"Button<\/a>Add a unique class name to the button. Let us say, I have used the class name \u201cdisplay_popup<\/strong>\u201d.<\/p>\n

\"Class<\/a>You can use the ID attribute in a div tag to set an ID for text.<\/p>\n

Let us proceed to ConvertPlus<\/p>\n

1. Select and Customize a Module according to your needs.<\/strong><\/p>\n

2. Open it in the Editor.<\/strong>
\nClick on Behavior -> Smart Launch<\/p>\n

\"Smart<\/a><\/strong><\/p>\n

3. Enable the “After Scroll to Certain ID\/ Class<\/em>” option<\/strong>
\nEnter the class name prefixed with a \u201c.\u201d<\/p>\n

\"Enable<\/a><\/strong><\/p>\n

Note:<\/strong> If you are using an ID, it should be prefixed with a \u201c#\u201d<\/strong><\/em>
\n A class name should be prefixed with a \u201c.\u201d<\/strong><\/em><\/p>\n

4. Save and Publish<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"

Available from Version 2.3.1 ConvertPlus is a WordPress popup plugin that lets you create attractive popups and control their behavior on your website. You can decide how and when they can appear before your audiences. Advanced triggers like the exit intent, the after scroll, inactivity, after post and more help you display the right message […]<\/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":[24],"docs_tag":[],"class_list":["post-3182","docs","type-docs","status-publish","hentry","docs_category-triggers"],"_links":{"self":[{"href":"https:\/\/convertplug.com\/plus\/wp-json\/wp\/v2\/docs\/3182","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":3,"href":"https:\/\/convertplug.com\/plus\/wp-json\/wp\/v2\/docs\/3182\/revisions"}],"predecessor-version":[{"id":22298,"href":"https:\/\/convertplug.com\/plus\/wp-json\/wp\/v2\/docs\/3182\/revisions\/22298"}],"wp:attachment":[{"href":"https:\/\/convertplug.com\/plus\/wp-json\/wp\/v2\/media?parent=3182"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/convertplug.com\/plus\/wp-json\/wp\/v2\/docs_category?post=3182"},{"taxonomy":"docs_tag","embeddable":true,"href":"https:\/\/convertplug.com\/plus\/wp-json\/wp\/v2\/docs_tag?post=3182"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}