[Resolved] Ad inserter

Hi there,

Unfortunately there are no hooks between paragraphs.

A plugin like Ad Inserter would be the way to go.

Hope this helps 🙂

and I want to insert it in every post between paragraphs. Could you help me how can I insert this because it is an image and inserter plugin we need code, how can I generate code for that image (also I’d like to insert affiliate link)

The theme doesn’t control how ad inserter inserts its blocks but to help you out:

That plugin has this option – https://share.getcloudapp.com/X6uArxxv

You simply have to check where you want the banner to show up.

I only want to know how could we generate code for that image because I have an image but not script or code. I am aware that it is not directly related to GP but if you could help me out. I’ll appreciate! Let me know.

Yeah this is a bit out of scope but a simple and quick writeup would be:

<div class="ad-container">
    <div class="special-hosting-header-wrap">
        <span class="ad-icon"> <svg> your svg here </svg> </span>
        <h2 class="special-hosting-header"> Special Hosting Offer </h2> 
    </div>
    <div class="grey-wrap"> 
        <span> Free Domain / 1-click install </span>
    </div>
    <div class="offer-container">
        <div style="width:100%; padding-top:100%; background-color: blue; border-radius: 100%;">
            <p style="position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%);">2% / month </p>
        </div>
        <div>
            <p> Get your own self-hosted WordPress blog</p>
        </div>
    </div>
    <div class="offer-expiry">
        <div class="expiry-date">
            <p>offer expires on</p>
            <h6> June 30th, 2021 </h6>
        </div>
        <div class="offer-button">
            <button class="get-started"> Get Started</div>
        </div>
    </div>
</div>

.ad-container {
    display: flex;
    flex-direction: column;
}

.ad-container > * {
    padding: 20px;
}

.offer-expiry {
    display: flex;
    flex-direction: row;
}

.offer-expiry > * {
    width: 50%;
}

But this is just the skeletal structure. It’s up to you how to style it further.

The code I’ve provided is still pretty raw but that’ll most likely need a few more CSS to match the image.

Once you’ve applied it to your site, you can link us to it and help further if it is still needed.

No problem. 😀