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.
Table of Contents
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.
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.
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.
Footer Bar
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.
Left Sidebar & Right Sidebar Ad
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
Background
If you define a background color for your sticky banner, the ad will be full-width and filled with the chosen 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.
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.
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.
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
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.