Banner Ad Generation

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:

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

1. Go to Advertising → Dashboard
2. Click "Create Banner" in the Google Ads tab
3. Enter Project Name (e.g., "Summer Collection Campaign")
4. (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:

1. System generates all 6 banner sizes
2. Creates both formats:

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

3. 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

1. Go to Google Ads → Display Campaigns → Assets
2. Upload HTML5 Ads:

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

3. Upload PNG Fallbacks:

• Required for browsers that block HTML5
• Must match HTML5 ad dimensions

Campaign Setup

1. Create Display Campaign
2. Select Ad Group
3. Add Responsive Display Ad
4. Upload your HTML5 banners
5. Set destination URL (from banner project)
6. Target your retargeting audience

Animation System

Banners export with CSS animations:

Default Animation Sequence

1. Logo: Fade in (0s delay)
2. Headline: Slide up (0.2s delay)
3. Description: Fade in (0.4s delay)
4. CTA: Scale in (0.6s delay)
5. 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.

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