[Resolved] Ads on the Side (Logical Placement) Ezoic

[Oscar]

Hi GP team and whoever’s reading.
I recently tried putting ads on my site and wasn’t very pleased with where I could put them.
The places that make the most sense, are simply not doable ATM.

This image shows where I want them.

Image

I’m using Ezoic at the moment, and to place ads there. I think there needs to be something to anchor on to. Maybe you guys even know of a solution. I’d really appreciate any help.

It’s a pretty common setup, though, I know zero code. I’m actually going to bed now at 07:35, cause this has been troubling me all night! I’ll check in later!

[David]

Hi there,

‘fire surround’ adverts like those are quite complex and are generally something set up by the advert provider, generally proxy injected using javascript.

If you want to, you could insert some Containers using a Hook Element:

https://docs.generatepress.com/article/hooks-element-overview/

Select the generate_after_header hook
Add this as the HTML:

<div class="advert-surround">
    <div class="advert-grid">
        <div class="advert-column left"> left advert here </div>
        <div class="spacer"><!-- ad spacer --></div>
        <div class="advert-column right"> right advert here </div>
    </div>
</div>

placing your HTML or adcodes in the appropriate containers.

Then we need some CSS:

.advert-surround {
    --c-width: 1200px;
    --ad-width: 200px;
    --max-width: calc(var(--c-width) + var(--ad-width) + var(--ad-width));
    position: relative;
    margin: auto;
    width: var(--max-width);
    max-width: 100vw;
}

.advert-grid {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
}

.advert-column {
    flex: 0 1 var(--ad-width);
    padding: 5px;
    background-color: #f00;
}

.advert-surround .spacer {
    flex: 1 0 var(--c-width);
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
}

@media(max-width: 1599px) {
    .advert-surround {
        display: none !important;
    }
}

To explain – there are two CSS variables at the start:

--c-width: 1200px;
--ad-width: 200px;

the --c-width needs to match the Container Width set in the Customizer.
the --ad-width sets how wide EACH advert column is.

then at the very end is the media query:

@media(max-width: 1599px)

this is the total width of the container and the to adverts minus one pixel – 1200 + 200 + 200 – 1 = 1599px
Adjust that inline with your CSS variables.
At sizes below that the adverts are removed.

[Oscar]

David… that’s an elegant solution.
It works so well.

If anyone else is reading this and wondering about implementation.
Don’t forget to add the <style> + </style> tags around the CSS in the hook.

This is so good, maybe it should even be a feature included in the theme o.O
It would make ads look gorgeous for more people than just me.

[David]

Awesome – glad to be of help!

[Author]

Posts