The PopUp and Layer Ads add-on allows you to display content in layers and popups. This content doesn’t have to be an actual ad but can be simple information, a subscription form or other content you want people to see (and react on).
This plugin is only available in the All Access offer.
- display ads as a layer above the content
- display after a user interaction (e.g., scrolling)
- display when the user wants to leave
- display ads with a delay
- optional background overlay
- display effects (show, fade, slide)
- hide the ad after a specific time
- choose between different positions for the popup
- support and updates for 1 year, unlimited usage afterward
- allow users to close an ad (not only layers)
- add timeout for closed ads
- choose between different positions for the close button
Scroll to the middle of the page, and you will see a demo ad with a background and a close button.
After you installed and activated the plugin, you find a new placement at Advanced Ads > Placements with the following icon.
Choose this placement and create it like any other placements with the (internal) title and the ad you would like to display.
After the placement is created you find a few settings under advanced options in the placement options (see Placement options below)
Go to Advanced Ads > Settings > General > PopUp and Layer Ads to choose whether to use the Fancybox plugin to display the ads or not. Fancyboxes are more beautiful and work better especially on mobile devices than the default script, but it might break if you are already using this script for another purpose on your site. Hence, it is not the default option.
When should the ad show up
right away – the layer is displayed when the page is loaded
when a user stops scrolling – display the ad when the user scrolled and stopped anywhere on the page
after user scrolled to the second half of the page – when the user stopped scrolling on the second half of the page (half down the possible scrolling distance)
after user scrolled … px – Choose this option to set a custom scroll offset. The offset is meant as the distance from the top of the page. In case the page is already loaded with this position, the ad is displayed right away.
when user wants to leave the page – when the user scrolls to the top of the page – mostly to close the page or enter a new address.
Enable this option to put an overlay on the content and only display the ad above this. The overlay will be removed if the ad is removed, so be sure to use the close button together with this option.
Different effects for the ad to appear. Effects might look different for the default js or the fancybox method.
You can also select a delay for the effect.
Add Close button
Enable this option to allow visitors to remove an ad with a close button. You can also choose where to display the button (only for non-fancybox).
Enable the timeout, so a closed ad is not displayed to the user again within the time frame (in days). Choose “0” to disable the ad only for the current session.
You can choose from 9 positions of the layer with the center of the screen being the default option.
If you are using an ad network, please confirm with them before using layer ads with their ads. Some ad networks (e.g., AdSense) see any positioning of their ads in a popup as a violation of their terms of service and might ban you in case they become aware of it.
Try to not use multiple layer placements or at least use the display conditions of the ad to only deliver one placement to the frontend.
Some of the above options that only display an ad under specific conditions and still load the ad, but hide it at first. If you have an ad statistic, the impression might still show up. Confirm with your ad network or ad vendor before using those options. I am using those mostly to display banners and popups with my own, internal ads, affiliate links or static banners (images).
Adjusting the button layout
You may adjust the size of the close button by applying some custom CSS attributes to it. You can find a tutorial on how to do that here.
Please note that the styles added to this class will also be applied to the close button of the Sticky Ads plugin.
Trigger the PopUp with a click
Use the following information to open a PopUp with a click in addition to another trigger.
This simple code works best with the basic mode, not with the Fancybox and if you have only one PopUp configured. Put this code either in the head or footer section of your page, e.g., by putting it into a plain code ad and using the Head placement to inject it into the header.
Replace [prefix] with your site’s prefix set in Advanced Ads > Settings > General > ID prefix.
var popup_id = jQuery('.[prefix]layer').attr( 'id' ); // replace [prefix] with your site’s prefix
advads_display_effect_show( popup_id );
Then create a link based on the code below just exchanging “trigger” with your link text.
Custom close button
To add your own close button to the ad content just give the clickable element the class advads-close-button.
Get everything we have and save up to 70%. The Unlimited Access Pass includes Advanced Ads Pro and all add-ons & priority email support for 1 year.
Make it easier for visitors to notice your ads. Build sticky and anchor ads which don’t float away with the scrolling content.