This is the documentation of Sticky Ads. It offers an overview of the features and functions of the plug-in. You will also find links to additional in-depth articles and tutorials here.

About Sticky Ads

Sticky Ads lets you place and emphasize your ads inside and outside of your website’s layout. With Sticky Ads you can create anchor ads, that are always visible in a browser window. With the Sticky Ads add-on, you can display ads that don’t scroll with the screen. You can choose various positions and also shape and style those sticky ads with various parameters and effects.

Features

New Placements

The Sticky add-on adds 6 new placements that will allow you to display ads on your website without coding or manipulating your content.

New ad placements

Header Bar

The Header Bar placement is fixed at the top of your page and not moving away when users scroll down. It is not only interesting for ads but for navigations, internal promotions or any content you want to have fixed on top.

Footer Bar

The Footer Bar placement is practically the same as the Header Bar. It is a very common use case for the Sticky Ads add-on and can perform very well.

Left Sidebar & Right Sidebar Ad

The Left Sidebar and Right Sidebar placements are also a very popular use case for sticky ads. They allow you to attach an ad to your content box. The options of this element allow you to select whether this ad should stay put while users are scrolling down or not and to manually select the main content element just in case it is not recognized by the plugin automatically.

Left Bar & Right Bar

The Left Bar and Right Bar is similar to the Sidebar Ads. The difference is that they are not attached to the main content box, but the browser window. You can also select whether to fix the ad to the screen or let it be scrolled away.

Triggers and Effects

Sticky ads can be set up to show up:

  • right away
  • right away and using an effect (see below)
  • after X seconds

You can choose from various effects:

  • show right away
  • fade in
  • slide in
  • set duration of the effect in milliseconds

Usage

To display any of your ads through one of these positions, simply go to Advanced Ads > Placements and create a new placement choosing the according placement type. After saving the placement, the ad should already be visible.

To ensure that sticky ads are working:

  • set up the width and height in the ad parameters box of the ad
  • make sure that there are no JavaScript errors on your site

Global Settings

You can reach the settings screen in your WordPress dashboard through Ads > Settings.

There is currently only one setting related to Sticky Ads:

Check browser capability

Check this field in case your site is visited by many users with older (mobile) browsers and sticky ads don’t scroll and block some content. This test is as lightweight as possible, but only activate it when you need it.

Displaying sticky ads only on specific browser sizes

Some of the sticky placements seem a good fit for specific devices or browser sizes.

  • Showing an anchor ad on mobile devices, only
  • Disabling the sticky ads left and right of the content when the screen becomes too small

You can either use the Device visitor condition to show ads on mobile or desktop devices, or Browser Width condition in Responsive Ads to show ads based on the width of the screen.

Other notes

Troubleshooting (possible issues and solutions)

If you are using an ad network, please confirm with them before using sticky ads with their ads. Some ad networks might see sticky positions as a violation of their terms of service and ban you in case they become aware of it.

Additional Options

Adjust close 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.

.advads-close-button{
   transform: scale(1.5);
}

Please note that the styles added to this class will also be applied to the close button of the PopUp and Layer Ads plugin.

Custom close button

To add your own close button to the ad content just give the clickable element the class advads-close-button.

Transparent background with opacity

With some custom CSS, you can also make the background color of your sticky ad semi-transparent. The example below defines a custom CSS style for a class titled “mystickyad”. To make it work, assign “mystickyad” as a Container Class in the Layout/Output parameters of your ad.

.mystickyad {
   background-color: rgba(165, 165, 165, 0.5) !important;
}

The rgba function consists of the values for red, blue, green and the alpha channel (opacity). This example generates a 50% transparent grey background.

Push content down when using a sticky header bar

By default, the Header Bar placement is added as a layer above the content. You can also push the content down by adding the following line to your page’s CSS or the Custom Code option (requires Advanced Ads Pro) on the ad edit screen so that it is only applied when a particular ad is used. The value 90px in the example needs to be replaced by the height of your ad.

<style>body{ margin-top: 90px; }</style>

Resources