HTML Banners
HTML banners allow you to use custom HTML, rich text, or embed third-party ad code directly. This is ideal for embedding ad network scripts, iframes, video players, or any custom creative that goes beyond a simple image.
Creating an HTML Banner
- Navigate to Bannerize > Add New in your WordPress admin
- Enter a title for your banner
- Set the Banner Type to Text/HTML
- Use the WordPress visual editor (wp_editor) to compose your banner content
- Configure the remaining fields and click Publish
Using the Rich Text Editor
When you select the Text/HTML banner type, a full WordPress editor (wp_editor) appears. This editor supports:
- Visual mode — Use the WYSIWYG toolbar to format text, insert images, and create links
- Text/HTML mode — Switch to the “Text” tab to write raw HTML, paste embed codes, or insert JavaScript
<!-- Example: Simple HTML banner with styled text -->
<div style="background: #1a1a2e; color: #fff; padding: 20px; text-align: center; border-radius: 8px;">
<h3 style="margin: 0 0 10px;">Summer Sale - 50% Off</h3>
<p style="margin: 0;">Use code <strong>SUMMER50</strong> at checkout</p>
</div>Embedding Shortcodes
The HTML editor supports WordPress shortcodes. This allows you to embed dynamic content from other plugins inside your banners.
[contact-form-7 id="123" title="Newsletter Signup"][video src="https://example.com/promo.mp4" width="300" height="250"]Shortcodes are processed when the banner is rendered on the front end. Preview the banner on your site to verify that embedded shortcodes display correctly.
Embedding Third-Party Ad Code
You can paste ad network code (such as Google AdSense or other ad providers) directly into the HTML editor using the “Text” tab:
<!-- Example: Third-party ad embed -->
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>When embedding JavaScript from third-party ad networks, be aware that Bannerize’s click tracking may not work for clicks handled by the external script. Impression tracking will still function normally.
Embedding Iframes
Iframes are useful for embedding external content or rich media ads:
<iframe
src="https://example.com/ad-unit"
width="728"
height="90"
frameborder="0"
scrolling="no"
style="border: none;">
</iframe>Banner Fields for HTML Type
HTML banners share the same configuration fields as image banners, with a few differences:
| Field | Behavior for HTML Banners |
|---|---|
| Banner URL | Not used — the content comes from the editor |
| External URL | Not used |
| Width / Height | Optional — set these if you want to constrain the banner container size |
| Description | Used as a tooltip or internal note (not displayed as alt text) |
| Link | Optional — if set, the entire banner content is wrapped in a clickable link |
| Target | Applied to the wrapping link if a Link URL is set |
| No Follow | Applied to the wrapping link if a Link URL is set |
All other fields work identically to image banners:
- Scheduling (Date From, Date Expiry) — control when the HTML banner is active
- Performance Limits (Max Impressions, Max Clicks) — auto-disable after thresholds
- Tracking Toggles (Impressions Enabled, Clicks Enabled) — per-banner tracking control
If you set a Link on an HTML banner, the entire content area becomes clickable. If your HTML already contains its own links, you may want to leave the Link field empty to avoid nested anchor tags.
Use Cases
Promotional Text Banner
<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white; padding: 24px; border-radius: 12px; text-align: center;">
<h2 style="margin: 0 0 8px; font-size: 24px;">Free Shipping This Weekend</h2>
<p style="margin: 0; opacity: 0.9;">On all orders over $50. No code needed.</p>
</div>Newsletter Signup Form
<div style="background: #f8f9fa; padding: 20px; border: 1px solid #dee2e6; border-radius: 8px;">
<h4 style="margin: 0 0 12px;">Subscribe to Our Newsletter</h4>
[mc4wp_form id="456"]
</div>Video Banner
<video autoplay muted loop playsinline width="300" height="250">
<source src="https://example.com/banner-video.mp4" type="video/mp4">
</video>Tips
- Use inline styles for banner HTML to avoid conflicts with your theme’s CSS
- Test HTML banners across different screen sizes
- Keep JavaScript to a minimum for better page performance
- Use the Preview button to check your banner before publishing
