Sticky Ads – Documentation

The documentation of the Sticky Ads Add-on offers an overview of its features and functions. You will also find links to additional in-depth articles and tutorials here.

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. Use the Sticky Ads add-on to display ads that don’t scroll with the screen.

You can choose various positions and also shape and style those sticky ads with multiple parameters and effects.

Example sticky AdSense ad
Example for a sticky Google AdSense ad

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.

Placements of the Sticky Ads add-on
With the Sticky Ads add-on 6 new placements are available

Header Bar

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

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

The Left Sidebar and Right Sidebar placements are also a trendy use case for sticky ads. They allow you to attach an ad to your content box. 

This element’s options allow you to select whether this ad should stay put while users scroll down or not and manually select the main content element just in case the plugin does not recognize it automatically.

Left Bar & Right Bar

The Left Bar and Right Bar are 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

You can configure Sticky ads to show up:

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

You can choose from various effects for anchor ads:

  • show right away
  • fade in
  • slide in
  • set duration of the effect in milliseconds
Triggers and effects for sticky ads
Trigger and effect settings

Background

If you define a background color for your sticky banner, the ad will be full-width and filled with the chosen background color.

Background color for sticky ads
Choosing a background color

Close Button

Here you can add a close button to your ads and select its position.

Furthermore, you can activate a timeout function and set for how long a visitor would not see this ad unit again after closing it actively.

Close button settings for the sticky ad
Add a close button to your sticky ad and set a timeout

Please note that if you assign a group to these placements and want to ensure that the close button considers all of them, you need to set the “enable timeout” option to 0 days.

Display Sticky Ads

To display your ads through one of these positions, 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 Advanced Ads > Settings.

Basically, there is currently only one setting related to Sticky Ads:

Check browser capability

Check this field if many users visit your site 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.

Check browser capability option
Check browser capability option for sticky ads

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. Furthermore, you can also choose the Browser Width condition in Advanced Ads Pro to show ads based on the screen’s width.

Additional Options

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

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

The class attribute might be adjusted depending on the prefix option you set up in the general settings of Advanced Ads. PREFIX- is just the sample prefix and needs to be exchanged with the setting found in the ID prefix option in Advanced Ads > Settings > General > ID prefix.

ID prefix settings
ID prefix options in the general settings of Advanced Ads

Please note that the styles you add 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 PREFIX-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

Subscribe to our newsletter and get 2 add-ons for free!

* indicates required

Troubleshooting

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 service terms and ban you if they become aware of it.

Wrong element selector

If your Left or Right Sidebar ad does not show up (or shows up in the page footer) or is placed in a strange position, it might be because of a wrong element selector.

By default, Advanced Ads expects your main content to be wrapped within a container called “main” or similar. If your theme uses another container or this container is not in the center of the page, you need to adjust the element selector.

To do that, go to the Placement page and select “show all options” in the placement settings. Now, add the element selector into the appropriate field.

When using the select position button to get the correct wrapper from the frontend, make sure there are no individual identifiers in it.

Example of a selector with individual settings:

main#main > article#post-379

correct version:

main#main > article

This fix is needed because the “#post-379” selector does only exists in posts with the ID 379. You will notice similar individual selectors by specific numbers or names that indicate that they might not match every page where you want to display the ad.

The ad is only visible for a short time

If you only see an ad using the Left or Right Sidebar placement for a very short time then it is likely caused by a layout shift while loading the site. The solution is the same as under “Wrong element selector”.

If the ad’s element is currently attached to is too wide, then choose one that is closer to the center of your site.

Size not detected

The positioning might not work if the ads loaded from an external domain don’t have sizes given in their code. In that case, you would need to set the size options and enable reserve ad space on the ad edit screen.

Responsive ads

Fully responsive ads might not work in the sticky positions left or right of the content or window. There is no other solution than to give them a fixed size.

If the ad is not fixed in Safari (OSX and iOS) or Chrome, please check, if one of the parent elements has one of the following CSS rules and remove, outcomment or override them.

-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
Code language: CSS (css)

For the floating Sidebar placement to work, the container the ad is attached to must have these CSS settings:

position: relative;
overflow: visible;Code language: HTTP (http)

If the ad is below the container on small devices, then there is probably not enough space to attach the ad beside it. Use the Device or Browser width condition to disable ads on small devices.

You might notice that a sticky ad renders outside the page first and only appears inside when you change the browser width. In this case, we recommend using same-sized ads in the sticky placements. Test also to set a specific width and height for your ads and enable the “reserve this space” option on the ad edit page.

If you are using ad groups on sticky placements, you need to set their width and height on the placements page.

Make it better

Increase your ad management skills without spending more time.
Join over 150,000 publishers and AdOpts increasing their ad revenue.