How to make ads with a text overlay
Advertisers often promote their services on client ads using a text or hyperlink overlay. You can easily create this in AdButler using native ad templates and native ad items.
In this guide, we're going to create a simple image ad with a hyperlink overlay. You're free to add other variables in your template and customize your overlay in your code.
How to create a text overlay native ad template
- Click Native Ad Templates on the left navigation menu to go to the Templates section.
- Click Add Native Ad Template in the Native Ad Templates table. The New Native Template window will appear.
- Select the type of native template that you want to create. The New Native Ad Template page will appear.
Templates for native (custom rendering/API) ad items are not compatible with native (styled) ad items, and vice-versa.
- Name the template and add the variables as needed. In our sample code, we have an Image Tag variable called Image and a Tracking Link variable called Tracking Link.
- Enter the code in the HTML/Script field, then click Save template.
Here's the code we used in our example:
<style>
.parent {
position:relative;
}
.bottom-left {
position: absolute;
bottom: 8px;
left: 8px;
}
a {
color: black;
font-size: 12px;
}
</style>
<div class="parent">
<div class="bottom-left">
<a href="http://www.your-domain.com" target="_blank">Ads By Company!</a>
</div>
<div>
<a href="[%Tracking Link%]" target="_blank">[%Image%]</a>
</div>
</div>
How to create a native ad item with text overlay
- Go to the section of the relevant zone (Your AdButler > Publishers > Your Publisher > Your Zone) or campaign (Your AdButler > Advertisers > Your Advertiser > Your Campaign).
We recommend assigning native ad items to dynamic zones.
- Click Add Ad Items in the Ad Items table. The Add Ad Item window will appear.
- Click Native. The New Ad Item page will appear.
- Select your native ad template in the Template dropdown menu.
- Fill in the rest of the fields as needed. If you entered a destination URL, you can test it by clicking Open Destination URL to the right of the field.
- Click Save Ad Item.
Read About ad items for more on AdButler's ad item types and their parameters.
This is what our ad item will look like when it's served: