Creating sticky mobile footer or header ads on WordPress involves adding some CSS code to your theme’s stylesheet. Here’s a step-by-step guide:
Step 1: Access your Theme Editor
Login to your WordPress blog and navigate to the Theme Editor. This can usually be found under the “Appearance” or “Customize” section in your WordPress dashboard.
Step 2: Open the Stylesheet.css file
Once you’re in the Theme Editor, locate the stylesheet.css file. This file contains the CSS code that controls the appearance of your theme. Open the stylesheet.css file.
Step 3: Add the CSS Code
Copy and paste the following CSS code into the stylesheet.css file:
@media only screen and (min-width: 310px) and (max-width:500px) {
#adTop {
left:0;
position: fixed;
text-align:center;
top: 0px;
width:100%;
z-index:999;
}
}
Or you can use the below css to place fixed banner in the bottom:
@media only screen and (min-width: 310px) and (max-width:500px) {
#adBottom {
left:;
position: fixed;
text-align:center;
bottom: 0px;
width:100%;
z-index:999;
}
}
Replace the comment with your own CSS code for the sticky mobile ad at the top or header. This code will be specific to your ad unit and its placement on your website.
AD Codes
<div id=”adBottom”> your ads code here </div>
<div id=”adTop”> your ads code here </div>
Step 4: Save and Update
Once you’ve added the CSS code, save the changes to the stylesheet.css file and update your theme. The sticky mobile ad should now be visible on your website.
Repeat the above steps if you want to create a sticky mobile ad at the bottom of your website. Simply add the CSS code for the sticky mobile ad at the bottom below the code for the top/header ad.
Now that you have successfully added sticky mobile footer/header ads to your WordPress website, it’s important to consider some best practices for optimizing their effectiveness. Firstly, make sure that the ads are relevant to your target audience and do not disrupt the user experience. It’s also essential to regularly monitor the performance of your ads and make any necessary adjustments to maximize their impact.
When creating the CSS code for your sticky ads, you can experiment with different styles, colors, and placement options to find what works best for your website. Consider using eye-catching visuals and compelling copy to capture the attention of your visitors and encourage them to click on the ads.
Additionally, it’s crucial to ensure that your ads are mobile-friendly and responsive. With the increasing number of users accessing websites on their mobile devices, it’s essential that your ads adapt to different screen sizes and orientations. Test your ads on various mobile devices to ensure they display correctly and maintain their effectiveness.
Remember to comply with any advertising guidelines or regulations set by your ad network or platform. This may include restrictions on the type of content you can promote or the placement of your ads. Failure to comply with these guidelines could result in penalties or the suspension of your ad account.
By implementing sticky mobile footer/header ads on your WordPress website and following these best practices, you can enhance your advertising strategy and potentially increase your revenue. Continuously monitor the performance of your ads and make adjustments as needed to ensure they continue to deliver the desired results.
Benefits of Creating Sticky Ads on Mobile
We recommend publishers to try sticky 320×50 mobile ad units on their website, as there are several benefits that justify implementing this ad format:
- Promote a website offer or ask visitors to install your app: If you’ve recently launched an app and want your website visitors to try it, a sticky mobile ad can be an effective way to showcase your app and encourage downloads. By placing a sticky ad at the top or bottom of the screen, you can grab the attention of your visitors and provide them with a direct call-to-action. Whether it’s a limited-time offer or an exclusive deal, sticky ads can help drive conversions and increase app installs.
- Show CPM based ads from direct buyers: Sticky mobile ad units have a 100% view rate, which means users have ample time to interact with the ad creative. This makes it an attractive ad format for direct buyers who want to send their message to their target audience, whether it’s for brand awareness or an action-oriented campaign. With sticky ads, advertisers can ensure that their ads are seen by users throughout their browsing session, maximizing the impact and effectiveness of their campaigns.
- Enable auto-refreshing ad units on mobile: Some ad networks, like Google Ad Exchange, allow for auto-refreshing of ad units on mobile. This means you can set a duration for the ad unit before it refreshes, and it has been observed that websites with high time on site experience a marked increase in overall revenue from these ads. By implementing auto-refreshing ad units, publishers can ensure that their mobile ad inventory remains fresh and relevant, leading to higher engagement and increased revenue.
- Improve user experience with non-intrusive ads: Sticky ads, when implemented correctly, can enhance the overall user experience on mobile devices. Unlike pop-up ads or interstitials that disrupt the user’s browsing experience, sticky ads stay fixed in a non-intrusive position, allowing users to continue scrolling and interacting with the content. This ensures that the ads do not interfere with the user’s intent or disrupt the flow of the website, leading to a more positive and seamless user experience.
- Maximize ad visibility and revenue potential: By placing ads in a sticky position, publishers can maximize the visibility of their ad inventory and increase their revenue potential. Sticky ads are always in view, even as users scroll through the page, ensuring that the ads receive maximum exposure. This increased visibility can result in higher click-through rates and engagement, leading to increased revenue for publishers.
Technical Brief of the Ad Code
The ad code used to create sticky mobile footer/header ads on WordPress is similar to page-level ads (anchor ads) format that you may have seen on various publisher websites. It utilizes CSS properties to ensure that the ad remains fixed in its position even when the user scrolls the page.
By adding the CSS code to your theme’s stylesheet, you can customize the appearance and behavior of the sticky mobile ad to align with your website’s design and user experience.
Remember, it’s important to test the placement and performance of your sticky mobile ads to ensure they are not intrusive or negatively impacting your website’s user experience. Monitor their effectiveness and make adjustments as needed to optimize your ad revenue.
We hope this tutorial has provided you with a clear understanding of how to create sticky mobile footer/header ads on WordPress. If you have any questions or need further assistance, feel free to reach out to us.
Now, let’s take a closer look at the CSS code that makes the sticky mobile ad possible. The code utilizes various CSS properties such as position, top, left, and z-index to control the positioning and behavior of the ad.
First, the position property is set to “fixed”, which ensures that the ad remains in a fixed position relative to the viewport, regardless of the user’s scrolling. This is what allows the ad to stay visible at all times, even when the user scrolls down the page.
The top and left properties are then used to specify the exact position of the ad on the screen. You can adjust these values to position the ad wherever you want it to appear on your website. For example, if you want the ad to appear at the bottom of the screen, you can set the top property to “auto” and the left property to “0”.
Lastly, the z-index property is used to control the stacking order of the ad. By default, the ad will have a z-index of 9999, which ensures that it appears on top of other elements on the page. If you have other elements that you want to appear on top of the ad, you can adjust the z-index accordingly.
It’s important to note that the CSS code provided is a starting point, and you can customize it further to meet your specific needs. You can change the colors, font sizes, and other visual aspects of the ad to match your website’s design. Additionally, you can add animations or other effects to make the ad more engaging for your users.
Overall, the ad code used to create sticky mobile footer/header ads on WordPress is a powerful tool that allows you to monetize your website effectively. By understanding how the code works and making the necessary adjustments, you can create ads that seamlessly integrate with your website’s design and provide a positive user experience.