Generate display ad banners for retargeting campaigns. Create professional animated HTML5 ads with AI-generated backgrounds and copy.

Supported Banner Sizes

ILLIXIS generates 6 standard Google Display Network banner sizes:

| Size | Name | Layout |
|------|------|--------|
| 300x250 | Medium Rectangle | Vertical (most common) |
| 336x280 | Large Rectangle | Vertical |
| 728x90 | Leaderboard | Horizontal |
| 300x600 | Half Page | Vertical (premium) |
| 320x50 | Mobile Leaderboard | Horizontal (mobile) |
| 160x600 | Wide Skyscraper | Vertical (sidebar) |

All sizes render from the same brand kit + per-frame copy using deterministic Python templates. No AI image generation — results are consistent across every run and every size. Total generation time: under 5 seconds.

Generation Workflow

Step 1: Project Setup

Go to Advertising → Dashboard
Click "Create Banner" in the Google Ads tab
Enter Project Name (e.g., "Summer Collection Campaign")
(Optional) Select Audience for targeted copy generation

Step 2: Ad Content

Headline

Max 90 characters
Main text displayed prominently on banner
Required field

Description

Max 90 characters
Secondary text (optional)
Hidden on small horizontal banners (728x90, 320x100)

Call to Action (CTA)

Preset options: Shop Now, Learn More, Get Started, Sign Up, Buy Now, Explore
Appears as a button with brand color

Destination URL

Required
Where clicks will redirect users
Full URL including https://

Step 3: AI Copy Generation

Click "Generate AI Copy" to auto-generate:

Compelling headline
Supporting description
Best-fit CTA

AI considers:

Selected audience context (if provided)
Brand voice from tenant settings
Ad copy best practices

Step 4: Generate Banner

Click "Generate Banner" → System creates:

BannerProject with your brand kit + copy applied
All 6 IAB sizes rendered in under 5 seconds
Redirects to Visual Editor for refinement

Banners use a consistent editorial design vocabulary: cream background, a yellow highlight plate on the key word of the headline, a neo-brutalist CTA (offset shadow + arrow icon), and a navy CTA anchor zone. Visual identity is driven by your brand kit colors and logo.

Visual Editor

After generation, the Visual Editor opens for refinement.

Editor Features

Layers Panel (Left)

Logo layer (auto-populated from tenant settings)
Headline text layer
Description text layer
CTA button layer
Background layer

Layer controls:

Toggle visibility (eye icon)
Lock position (lock icon)
Drag to reorder (z-index)

Canvas Area (Center)

Live preview of currently selected size
Size selector in toolbar (300x250, 728x90, etc.)
Zoom controls (fit to view, zoom in/out)
Drag layers to reposition

Properties Panel (Right)

Text layers: Font, size, color, alignment, text shadow
Button layers: Background color, padding, border radius, shadow
Image layers: Size, opacity, source
Animations: Entrance effect, delay, duration, loop

Toolbar

Undo/Redo: Full edit history (Ctrl+Z, Ctrl+Y)
Templates: Browse pre-made designs
AI Copy: Regenerate copy variations
Save: Auto-saves every 3 seconds, manual save (Ctrl+S)
Preview: Play animation sequence
Generate: Export all sizes

Size Switching

Click size buttons in toolbar to preview different dimensions. System automatically adjusts:

Font sizes (responsive scaling)
Layer positions (layout shifts)
Description visibility (hidden on small banners)

Master Design Approach: Edit once, system adapts to all sizes.

Exporting Banners

Click "Generate" in toolbar:

System generates all 6 banner sizes
Creates both formats:

HTML5 (animated, ~50KB each)
PNG (static fallback, ~100-200KB each)

Downloads as ZIP file: {project-name}-banners.zip

Generated Files

```
project-name-banners/
├── 300x250/
│ ├── index.html (animated)
│ └── fallback.png (static)
├── 336x280/
├── 728x90/
├── 300x600/
├── 320x100/
└── 160x600/
```

Using Banners in Google Ads

Upload to Google Ads Manager

Go to Google Ads → Display Campaigns → Assets
Upload HTML5 Ads:

Upload each index.html file
Google validates animation (must be < 150KB, ≤ 30s)

Upload PNG Fallbacks:

Required for browsers that block HTML5
Must match HTML5 ad dimensions

Campaign Setup

Create Display Campaign
Select Ad Group
Add Responsive Display Ad
Upload your HTML5 banners
Set destination URL (from banner project)
Target your retargeting audience

Animation System

Banners export with CSS animations:

Default Animation Sequence

Logo: Fade in (0s delay)
Headline: Slide up (0.2s delay)
Description: Fade in (0.4s delay)
CTA: Scale in (0.6s delay)
CTA Loop: Pulse effect every 2 seconds

Editing Animations

In Properties Panel → Animation section:

Entrance Effects:

Fade In
Slide Up
Slide Down
Slide Left
Slide Right
Scale In
Bounce In

Settings:

Delay: When animation starts (0-2 seconds)
Duration: How long animation lasts (0.1-2 seconds)
Loop (CTA only): Repeating effect for attention

Best Practices

Copy Guidelines

Headline: Clear value proposition (e.g., "Save 30% on Summer Styles")
Description: Add urgency or detail (e.g., "Limited time offer")
CTA: Action-oriented, specific (e.g., "Shop Sale" > "Learn More")

Background Selection

AI Generated: Best for brand-consistent, professional look
Product Image: Best for direct response, product focus
Solid Color: Best for text-heavy messages, fast load

Design Tips

High Contrast: Ensure text is readable over background
Logo Placement: Top-left corner (standard position)
CTA Prominence: Use brand color, adequate padding
Mobile Optimization: 320x50 mobile banner uses a simplified horizontal
layout (logo + headline + CTA pill) — review it separately

Technical Requirements

File Size: Keep HTML5 ads under 150KB (Google requirement)
Animation Duration: Max 30 seconds total (Google requirement)
Load Speed: Under 5 seconds initial load
Click Target: CTA button minimum 50x50px

Troubleshooting

"Banners not downloading"

Cause: Browser blocked popup or file download
Fix: Allow popups from app.illixis.io, try again

"Text overlaps on small banners"

Cause: Headline too long for horizontal layouts
Fix: Shorten headline to 40 characters or less

"CTA button cut off"

Cause: Size overrides not applied correctly
Fix: Switch to problematic size in editor, manually reposition CTA

"Google Ads rejected HTML5 ad"

Cause: File size over 150KB or animation over 30s
Fix: Simplify animations, reduce entrance effects

Quota Usage

Banner generation counts toward your plan's Banner Ads quota. Each
generation produces all 6 IAB sizes as a single project. No separate AI image
quota applies — the banner pipeline doesn't call any paid image APIs.

| Plan | Banner projects/month |
|---|---|
| Starter | 20 |
| Professional | 80 |
| Enterprise | 300 |

Related Features

Retargeting Audiences - Create audiences to target with banners
Content Clusters - Auto-generated topic-based audiences
Meta Ads - Create Facebook/Instagram ads from same audiences
LinkedIn Ads - B2B retargeting ad creation

Keyboard Shortcuts

| Shortcut | Action |
|----------|--------|
| Ctrl+S | Save project |
| Ctrl+Z | Undo |
| Ctrl+Y | Redo |
| ? | Show help overlay |
| Delete | Delete selected layer |
| Arrow Keys | Nudge layer position (1px) |
| Shift+Arrow | Nudge layer position (10px) |
| Ctrl+D | Duplicate selected layer |

Banner Ad Generation