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 a simple information, a subscription form or other content you want people to see (and react on).

Add to Cart
*Prices excluding tax

Get this add-on together with 7 more plugins included in the Pro Bundle for only €69.

Features

  • display ads as a layer above the content
  • display after a user interaction (e.g. scrolling)
  • display when user wants to leave
  • optional background overlay
  • display effects (show, fade, slide)
  • choose between different positions for the popup
  • support and updates for 1 year, unlimited usage afterwards

Close Button

  • allow users to close an ad (not only layers)
  • add timeout for closed ads
  • choose between different positions for the close button
Add to Cart
*Prices excluding tax

Demo

Scroll to the middle of the page and you will see a demo ad with a background and a close button.

Usage

After you installed and activated the plugin, you find a new placement at Advanced Ads > Placements with the following icon.

layer placement 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)

Settings

General Settings

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.

Placement options

When should the ad show up

right away – the layer is displayed when the page is loaded

when user stops scrolling – display the ad when the user scrolled and stopped anywhere on the page

after user scrolled to second half of the page – when 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 ment 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 background

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.

Effect

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.

Position

You can choose from 9 positions of the layer with the center of the screen being the default option.

Other notes

If you are using an ad network please confirm with them before using layer ads with their ads. Some ad networks see using this technique as a violation to 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).

Additional Options

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.

Then create a link based on the code below just exchanging “trigger” with your link text.

Resources

Add to Cart
*Prices excluding tax

Share for a free add-on

Simply share this page and get the Slider add-on for free.

Similar offers

Built to make money on professional websites. Get everything we have and save up to 70%. This bundle includes Advanced Ads Pro and all the add-ons, including Tracking, Responsive, and…

Add to cart
*Prices excluding tax

Make it easier for visitors to notice your ads. Build sticky and anchor ads which don’t float away with the scrolling content.

Add to cart
*Prices excluding tax