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 :)

hmmm ok

I have one more question - Let's suppose I installed Ad inserter plugin,and then I created my own banner like this:

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)

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.

that's fine. I knew this.

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.

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.

thanks for your help Elvin. You are awesome

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. :D