How to Place Anchor Ads using GeneratePress

In this lesson I will tell you how to place anchors ads using GeneratePress and GP Premium Elements and a little bit of CSS.

I use Adsense and Ezoic with my blogs. If you are using Ezoic ads, you don’t have to learn how to place Anchor ads because their technology does it for you.

If you are using Adsense, you will see anchor ads at the top but being honest with you, I don’t like the size and how they look at the top of the screen.

So let’s check how to place anchor adsense ads using GeneratePress

How to Place Anchor Ads in GeneratePress

My recommendation is to place anchor ads if you wanna increase your earnings, It is one of the top performing units according to my tests.

Follow these steps and make sure to test t

First Step: Activate Elements on GeneratePress

The first thing that you have to do is activate GP Premium and activate the elements sections.

You can use the elements section to customize how your site looks.

Now that you have that ready, go to elements

Second Step: Create Ad Units

Go to your adsense dashboard and create two separate units or create one and modify it.

Both units have to be fixed units.

The fixed ad unit for mobile must be 300 x 250 and this is what the code looks like

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- WPSurfer -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

The fixed ad unit for desktop must be 728 x 90 and this is what the code looks like:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- WPSurfer -->
<ins class="adsbygoogle"
     style="display:inline-block;width:728px;height:90px"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

It is important that you don’t recycle an existing ad units so you can see how well these ad units perform on your site.

Third Step: Add Elements on GeneratePress

If you wanna do this for desktop, choose the right code

  • Add new element
  • Choose hook among the available options
  • Click on “Create”
  • Name the element
  • Use the codes below

Code for Desktop Anchor Ad

<div class="grid-container custom-ad-container">


</div>

Code for Mobile Anchor Ad

<div class="hide-on-mobile hide-on-tablet">
<div class="grid-container custom-ad-container">


</div>
</div>

Place the right adsense code that you got in step #2 in the space you see.

If I am doing this process for the Desktop anchor ads, this is how the code looks:

<div class="grid-container custom-ad-container">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- WPSurfer -->
<ins class="adsbygoogle"
     style="display:inline-block;width:728px;height:90px"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

</div>

Fourth Step: Choose Where to Show ads

Now choose where to show the ads, go to setting and choose generate after footer

after that go to display rules and choose where you want the ads to show. You can choose entire site or all posts.

You can also exclude posts and pages.

Now you can publish the element

CSS: Customize the Elements

To make sure the ads look exactly as the results, add this CSS snippets in your theme customizer

This is the CSS that you have to apply if you are using the anchor mobile ad


/* CSS For the sticky ad on Mobile */

.mobile-ad-container {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: fit-content;
    height: fit-content;
}

.mobile-ad-container ins.adsbygoogle {
    display: block !important;
}

This is the CSS that you have to apply if you are using the anchor desktop ad

/* CSS For the sticky ad on Desktop */

.custom-ad-container {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: fit-content;
    height: fit-content;
}

.custom-ad-container ins.adsbygoogle {
    display: block !important;
}

Clear cache and see the results

Results: Anchor Ads on Mobile and Desktop

This is what you are gonna get on desktop when you follow these steps:

And this is what you get on mobile.

Thanks to GP Support Team

I am really grateful with the GeneratePress support team for the instructions on how to do this.

Consider buying GP Premium and GenerateBlocks Pro.

Information about Using Sticky Ads

I think this is a good use of sticky ads. I recommend watching this video.

Make sure that the sticky ads don’t cover the content of your site

More Posts about Monetization

These are some posts that I have written about monetization in case you wanna learn some more about how I monetize my sites using Adsense and Ezoic

  1. Best Ad Placements on your WordPress Site
  2. Ezoic vs Adsense: The Final Battle
  3. How to Place Ezoic Ads with Ad Inserter

Sobre Jose manuel

Soy José Manuel, empecé un blog en el 2011 como un pasatiempo y para hacerlo en mis clases y poco a poco, me enamoré de WordPress. Espero que algo de todo lo que he escrito te sirva de ayuda.

RevistaWP

RevistaWP es un sitio donde registro mis pensamientos y descubrimientos sobre todo lo que sucede dentro del mundo WordPress.

Puedes encontrar contenido en Inglés y Español

Contacto

Puedes contactarme por medio de los siguientes canales