Visual Ad Builder (WYSIWYG)

Create professional animated banner ads with a drag-and-drop visual editor. Design once, export for all standard Google Display Network sizes.

Overview

The Visual Ad Builder is a WYSIWYG editor for creating HTML5 animated banner ads. It provides:

• Real-time visual editing - See changes instantly
• Layer-based composition - Text, images, buttons, logos
• Per-size customization - Override layout for horizontal vs vertical banners
• Animation timeline - Entrance effects and looping animations
• One-click export - Generate all 6 sizes as HTML5 + PNG fallbacks

Opening the Editor

From a New Project

1. Go to Advertising → Dashboard
2. Click "Create Banner" in Google Ads tab
3. Complete the project form (headline, CTA, background)
4. Click "Generate Banner"
5. Editor opens automatically

From an Existing Project

1. Go to Advertising → Dashboard
2. Locate project in the Google Ads tab
3. Click "Edit" or project name
4. Editor opens with saved configuration

Interface Layout

Toolbar (Top)

Left section:

• Back button - Return to Advertising Dashboard
• Project name - Editable inline (click to rename)

Center section:

• Size selector - Switch between banner sizes (300x250, 728x90, etc.)
• Add custom size - Create non-standard dimensions

Right section:

• Undo/Redo - Edit history (Ctrl+Z, Ctrl+Y)
• Templates - Browse pre-made designs
• AI Copy - Generate headline/description variations
• Save indicator - Shows "Saved" or "Saving..."
• Manual save - Force save (Ctrl+S)
• Help - Keyboard shortcuts (?)
• Preview - Play animation sequence
• Generate - Export all sizes as ZIP

Layers Panel (Left)

Shows all layers in your banner design from top to bottom (z-order):

Default layers:

1. Logo (image) - Your tenant logo
2. Headline (text) - Main message
3. Description (text) - Supporting text
4. CTA (button) - Call to action button
5. Background (image/color) - Canvas background

Layer controls:

• Eye icon - Toggle visibility (hide/show)
• Lock icon - Prevent accidental moves
• Drag handle - Reorder layers (changes z-index)
• Click layer to select it (highlights in canvas)

Canvas Area (Center)

Live preview of the currently selected size.

Features:

• Zoom controls - Zoom in/out, fit to view
• Drag layers - Click and drag to reposition
• Selection handles - Resize text/image layers
• Grid overlay - Toggle with 'G' key (alignment helper)

Size indicator: Top-left corner shows current dimensions (e.g., "300x250")

Properties Panel (Right)

The properties panel has two tabs at the top:

Element tab - Shows editable properties for the selected layer.

Sections (varies by layer type):

• Content - Text or image source
• Position - X/Y coordinates, anchor point
• Size - Width, height (percentage of canvas)
• Style - Fonts, colors, shadows, borders
• Animation - Entrance effect, delay, duration, loop

Copy tab - Shows the structured creative brief that drives all banner sizes.

The Copy tab presents one input per slot (hook, benefit, proof, CTA, closer, eyebrows) with a character counter for each. Editing a slot here updates the same field on every banner size in the project — change "Marketing, Unstacked." in the Copy tab and it appears in 300×250, 728×90, 320×50, and every other size at once.

Three actions per slot:

• Edit directly - Type in the input. The footer's "Save & Re-render" button persists across all sizes and triggers a fresh render.
• Ask Maya (per slot) - Click the purple sparkles icon next to a slot to have Maya regenerate just that slot, using the other slots as context. The new copy appears in the input but doesn't save until you hit "Save & Re-render."
• Regenerate all - Replaces all slots with fresh Maya output keeping the same direction.

Why use the Copy tab vs. the Element tab vs. inline editing?

| Workflow | Best for |
|----------|----------|
| Copy tab | Reviewing all four scenes' copy together; making structured changes to the underlying brief; per-slot AI regeneration |
| Element tab | Visual properties only (fonts, colors, position, animation). Won't affect the brief. |
| Inline canvas edit | Fast WYSIWYG tweaks — change three words in one headline without opening any panel |

All three write to the same brief and propagate across sizes. Pick whichever fits your task.

Editing Text

There are two ways to edit headline, description, and CTA text:

Inline editing on the canvas

Double-click any text or button layer on the canvas. The text becomes editable in place with a yellow outline. Type your change, then click away (or press Escape) to save. The change immediately appears in the canvas, then propagates to every other banner size in the project within a few seconds.

Tips:

• Hover affordance. Hover any text/button layer — the cursor changes to a text I-beam to signal it's editable.
• Word selection. Double-click selects the word under your cursor (Google Docs style). Triple-click selects the whole text.
• Click-drag inside the editor. Once you're in edit mode, click + drag to highlight a portion of the text. The canvas won't re-render mid-gesture.
• Press Escape to discard. Escape exits without saving.
• Cross-size sync. Changes to a contracted slot (headline, CTA, closer, etc.) propagate automatically to every other size. Decorative text edits stay per-size.

Selection toolbar (per-word styling)

When you have text selected during inline editing, a floating toolbar appears above the selection. It works like Google Docs:

| Button | What it does |
|--------|--------------|
| A Highlight ▼ | Apply a colored marker behind the selected text. Auto-picks readable text color (white or black) based on background brightness. |
| A Color ▼ | Change the text color of just the selection. "Reset to layer color" clears back to the layer default. |
| B | Bold (toggle). On default-bold headlines, the first click un-bolds — same as Google Docs. |
| I | Italic (toggle). |
| U | Underline (toggle). Combines with strikethrough. |
| S | Strikethrough (toggle). |
| O Outline ▼ | Add a stroke around the selected text. Width: 1px / 2px / 3px. Color picker + custom hex available. |
| Aa Font ▼ | Change just the selected text to your brand's heading or body font. Only appears when your BrandSettings has heading/body fonts configured. |

Where the colors come from. The Highlight, Color, and Outline flyouts show your tenant's BrandSettings brand colors first, then a default neutral palette (white / black / navy / yellow), plus a custom hex input.

Cross-size behavior. Per-word styling travels with the slot's text across all 9 IAB sizes. Highlighting "Zero Results" in 300×250 also highlights it in 320×50, 728×90, etc. If a smaller size truncates the headline mid-highlight, the truncated suffix simply drops with the rest of the truncation.

Tips:

• Highlight + outline + bold can stack on the same selection.
• "Reset to layer color" / "Remove outline" / "Reset to layer font" clear that one property without touching others.
• The toolbar disappears when you click outside the contenteditable. Reselect text inside an active edit to bring it back.

Layer Types

Text Layer

Displays text content (headline, description, labels).

Properties:

Content:

• Text content (direct input)
• Maximum lines (truncate with ellipsis)

Style:

• Font family (Poppins default, Google Fonts available)
• Font weight (400, 600, 700)
• Font size (base size in px, responsive scaling)
• Color (hex, rgba)
• Text alignment (left, center, right)
• Text shadow (for readability over images)
• Line height (spacing between lines)

Position:

• X, Y coordinates (percentage of canvas)
• Anchor point (top-left, center, bottom-right, etc.)

Animation:

• Entrance effect (fade, slide, scale)
• Delay (0-2 seconds)
• Duration (0.1-2 seconds)

Button Layer

Displays clickable call-to-action buttons.

Properties:

Content:

• Button text (e.g., "Shop Now")

Style:

• Background color
• Text color
• Font family/weight/size
• Padding (X and Y)
• Border radius (rounded corners)
• Shadow (depth effect)

Position:

• X, Y coordinates
• Anchor point

Animation:

• Entrance effect
• Delay, duration
• Loop animation - Continuous effects (pulse, glow, shake, float, color-pulse)

Loop patterns:

• Start after entrance completes
• Infinite repeat
• Draw attention to CTA

Image Layer

Displays images (logo, product images, icons).

Properties:

Content:

• Source options:
• tenant_logo - Your brand logo from settings
• URL - External image URL (uploaded or external)
• Upload - Browse and upload new image

Style:

• Size (width/height as percentage of canvas)
• Opacity (0-100%)
• Object fit (contain, cover)
• Shadow (optional)

Position:

• X, Y coordinates
• Anchor point

Animation:

• Entrance effect
• Delay, duration

Logo Layer

Pre-configured image layer that auto-loads your tenant logo.

Special behavior:

• Source defaults to tenant_logo
• Positioned top-left by default
• Size set to 15% of canvas width
• Maintains aspect ratio

Background Configuration

The background is configured separately from layers.

Background Sources

1. AI Generated

• AI generates unique backgrounds
• Style presets: Modern, Bold, Minimal, Playful, Elegant, Vibrant, Clean, Dramatic
• Generation takes 20-30 seconds
• Counts toward AI image quota

2. Product Image

• Pulls from your connected CMS (Shopify, WooCommerce)
• Best for product-focused campaigns

3. Upload

• Upload your own image (JPG, PNG)
• Recommended minimum: 1200x1200px
• Supports focal point selection

4. Content Hub

• Use images from your ILLIXIS content library
• Feature images from published articles

5. Solid Color

• Single color background
• Choose from brand colors or custom hex
• Fast, clean look

Background Controls

When background image is selected, properties panel shows:

Pan & Scale:

• Pan X - Horizontal shift (-100 to 100)
• Pan Y - Vertical shift (-100 to 100)
• Scale - Zoom level (50% to 200%)
• Positive X pans right, positive Y pans down

Focal Point Picker:

• Click image to set focal point
• System centers crop around this point
• Preview shows how different sizes will crop
• Manual input: X/Y coordinates (0-100%)
• Reset to center button

Background Color:

• Fill color behind image
• Visible if image doesn't cover canvas

Multi-Size Support

ILLIXIS generates 6 standard Google Display Network sizes:

| Size | Name | Aspect Ratio |
|------|------|--------------|
| 300x250 | Medium Rectangle | Square-ish |
| 336x280 | Large Rectangle | Square-ish |
| 728x90 | Leaderboard | Wide horizontal |
| 300x600 | Half Page | Tall vertical |
| 320x100 | Large Mobile Banner | Wide horizontal |
| 160x600 | Wide Skyscraper | Tall vertical |

Master Design Approach

1. Design for 300x250 first (most common size)
2. System automatically adapts to other sizes
3. Review each size and add overrides as needed

Per-Size Customization

Click size buttons in toolbar to switch preview. Changes you make are size-specific overrides.

Common overrides:

Horizontal banners (728x90, 320x100):

• Hide description (too small to read)
• Adjust headline position (left-align, reduce size)
• Move CTA to right side
• Single-line headline only

Vertical banners (300x600, 160x600):

• Increase headline size
• Add more lines to description
• Vertical layout (top to bottom)

How overrides work:

• Base layer properties are shared across all sizes
• Size-specific overrides replace base properties
• Overrides are stored per size, per layer
• Switching sizes shows current overrides in properties panel

Animation System

Banners export with CSS animations for engagement.

Entrance Animations

Plays once when banner loads.

Available effects:

• Fade In - Opacity 0 → 1
• Slide Up - From below
• Slide Down - From above
• Slide Left - From right side
• Slide Right - From left side
• Scale In - Zoom from small
• Bounce In - Spring effect
• Zoom In - Fast scale from center

Settings:

• Delay - When to start (0-2 seconds)
• Duration - How long animation lasts (0.1-2 seconds)

Default sequence:

1. Logo: Fade in at 0s
2. Headline: Slide up at 0.2s
3. Description: Fade in at 0.4s
4. CTA: Scale in at 0.6s

Loop Animations

Repeats continuously for attention (typically on CTA).

Available effects:

• Pulse - Scale 100% → 103% → 100%
• Glow - Shadow intensity pulse
• Shake - Horizontal wiggle
• Float - Vertical bob
• Color Pulse - Brightness pulse

Settings:

• Delay - When to start after entrance (0-3 seconds)
• Duration - Speed of one loop cycle (0.5-3 seconds)
• Infinite - Repeats forever

Best practices:

• Use loop on CTA button only
• Start after entrance animations complete (2-3s delay)
• Subtle effect (1.5-2s duration)

Animation Timeline (Bottom Panel)

Shows all animations on a timeline.

Features:

• Visual bars for each layer's animation
• Drag to adjust timing
• Preview button plays full sequence
• Pause/resume preview

Templates

Pre-made designs you can start from.

Access: Click Templates button in toolbar

Template categories:

• E-commerce - Product showcase designs
• SaaS - Software/service promotion
• Content - Article/blog promotion
• Lead Gen - Form submission focus

Using templates:

1. Click template thumbnail
2. System replaces current layers with template layers
3. Edit content (headline, CTA, images)
4. Generate background or upload your own

Note: Applying a template overwrites your current design. Save first if needed.

AI Copy Generation

Let ILLIXIS generate headline and description variations.

Access: Click AI Copy button in toolbar

What it generates:

• 3 headline options (optimized for length)
• 3 description options (supports horizontal banners)
• Recommended CTA

Inputs considered:

• Selected audience (if linked)
• Brand voice from tenant settings
• Current project context
• Ad copy best practices

Using AI copy:

1. Click AI Copy button
2. Review 3 variations
3. Click option to apply
4. Edit further if needed

Note: AI copy generation counts toward your plan quota.

Exporting Banners

Generate All Sizes

Click Generate button in toolbar:

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

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

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

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

HTML5 Banners

Self-contained HTML files compliant with Google Ads requirements.

Features:

• Base64-encoded images (no external requests)
• Inline CSS (no external stylesheets)
• CSS animations (no JavaScript)
• Click-through tracking
• Under 150KB file size (Google requirement)

Technical specs:

• DOCTYPE: HTML5
• Meta tag: ad.size content
• Google Fonts loaded via CDN
• onclick handler on banner div

PNG Fallbacks

Static image exports for browsers that block HTML5.

Features:

• Rendered from HTML automatically
• Matches HTML5 design exactly
• First frame of animation (all layers visible)
• Standard banner dimensions

Required by Google Ads:

• Must upload both HTML5 and PNG
• PNG serves as fallback if HTML5 blocked
• Must match dimensions exactly

Using Banners in Google Ads

Upload Process

1. Go to Google Ads → Display Campaigns → Assets
2. Click "Uploaded ads" → "+ New ad"
3. Select "Upload display ads"
4. Upload HTML5 files:

• Drag index.html from each size folder
• Upload all 6 sizes at once

5. Upload PNG fallbacks:

• Match each HTML5 ad with corresponding PNG
• Google validates file size and animation

Campaign Setup

1. Create or select Display Campaign
2. Choose Ad Group
3. Link uploaded ads to ad group
4. Set destination URL (from banner project)
5. Target your retargeting audience
6. Set budget and bidding strategy
7. Launch campaign

Best practices:

• Test multiple ad variations per audience
• Use responsive display ads alongside custom HTML5
• Set frequency caps (3-5 impressions/day)
• Monitor performance by size

Keyboard Shortcuts

| Shortcut | Action |
|----------|--------|
| Ctrl+S | Save project manually |
| Ctrl+Z | Undo last change |
| Ctrl+Y | Redo last undone change |
| Delete | Delete selected layer |
| Arrow Keys | Nudge layer position (1px) |
| Shift+Arrow | Nudge layer position (10px) |
| Ctrl+D | Duplicate selected layer |
| G | Toggle grid overlay |
| ? | Show keyboard shortcuts help |
| Esc | Deselect layer |
| Space | Toggle preview animation |

Best Practices

Design Guidelines

Visual hierarchy:

1. Logo (top-left, small)
2. Headline (center/large, high contrast)
3. Description (center, medium)
4. CTA (bottom/center, prominent button)

Contrast:

• Ensure text readable over background
• Use text shadows for legibility
• Test with different backgrounds

Simplicity:

• Maximum 4 layers (logo, headline, description, CTA)
• Single clear message
• One primary CTA

Brand consistency:

• Use tenant logo
• Match brand colors
• Consistent font (Poppins recommended)

Copy Guidelines

Headline:

• Clear value proposition (30-50 characters)
• Front-load benefit
• Examples: "Save 30% Today", "Free Shipping on All Orders"

Description:

• Add urgency or detail (40-60 characters)
• Complement headline, don't repeat
• Examples: "Limited time offer", "Ships in 24 hours"

CTA:

• Action-oriented (Shop Now, Get Started, Learn More)
• Specific to offer (Shop Sale, Try Free, Download Guide)
• Short (1-2 words ideal)

Technical Best Practices

File size:

• Keep HTML5 under 150KB (Google requirement)
• Optimize images before upload
• Avoid overly complex animations

Animation duration:

• Total animation under 30 seconds (Google requirement)
• Entrance sequence: 1-2 seconds total
• Loop effects: subtle, 1.5-2s duration
• Don't distract from message

Mobile optimization:

• Test 320x100 mobile banner separately
• Ensure CTA button minimum 50x50px
• Simplify text for small screens

Load speed:

• Under 5 seconds initial load
• Base64 images should be optimized
• Avoid large background images

Troubleshooting

"Text overlaps on small banners"

Cause: Headline too long for horizontal layouts (728x90, 320x100)

Fix:

1. Switch to 728x90 size in editor
2. Shorten headline to 40 characters or less
3. Set max_lines to 1
4. Adjust font size if needed
5. Repeat for 320x100

"CTA button cut off"

Cause: Size overrides not applied correctly for vertical banners

Fix:

1. Switch to problematic size (300x600 or 160x600)
2. Select CTA layer
3. Adjust Y position in properties panel
4. Save and regenerate

"Background image looks cropped"

Cause: Focal point not centered on subject

Fix:

1. Click Background section in properties
2. Click "Set Focal Point"
3. Click on the main subject in image
4. Preview shows how different sizes crop
5. Adjust until all previews look good

"AI background generation failed"

Cause: Temporary service issue or rate limit.

Fix:

• Use Upload or Solid Color background instead
• Contact support if AI generation is required

"Banners not downloading"

Cause: Browser blocked popup or file download

Fix:

1. Check browser address bar for blocked popup icon
2. Allow popups from app.illixis.io
3. Try Generate button again
4. If still fails, check browser download settings

"Google Ads rejected HTML5 ad"

Cause: File size over 150KB or animation over 30 seconds

Fix:

1. Simplify animations (remove loop effects)
2. Reduce entrance animation count
3. Compress background image
4. Switch to solid color background
5. Regenerate and check file size

"Text not visible over background"

Cause: Low contrast between text and background

Fix:

1. Select text layer
2. Add text shadow in Style section
3. Example: 0 2px 4px rgba(0,0,0,0.8)
4. Or change text color to higher contrast
5. Or adjust background color/opacity

"Logo appears too large"

Cause: Logo size percentage too high

Fix:

1. Select Logo layer
2. In Size section, reduce width percentage
3. Recommended: 10-15% for most banners
4. Height: set to 'auto' to maintain aspect ratio

Quota Usage

Banner generation counts toward these quotas:

AI Image Generation (if AI background selected):

• Starter Plan: 20 images/month → ~20 banner projects
• Professional Plan: 100 images/month → ~100 banner projects
• Enterprise Plan: 300 images/month → ~300 banner projects

Note: Each project generates ONE AI background, then reuses for all 6 sizes. Upload, solid color, product, and content hub backgrounds do NOT count toward quota.

Related Features

• Banner Ad Generation — Initial project creation flow
• Retargeting Audiences - Create audiences to target with banners
• Topic Clusters - Auto-generated topic-based audiences
• Meta Ads - Create Facebook/Instagram ads from same audiences
• LinkedIn Ads - B2B retargeting ad creation

Advanced Features

Custom Sizes

Add non-standard banner dimensions:

1. Click + (Add Custom Size) in toolbar
2. Enter size name (e.g., "Newsletter Header")
3. Enter width and height in pixels
4. Or select from presets (1200x628, 1080x1080, etc.)
5. Click Add Size
6. New size appears in size selector

Use cases:

• Social media ads (1200x628 Facebook)
• Email headers (600x200)
• Website banners (custom dimensions)

Layer Duplication

Duplicate layers to create variations:

1. Select layer
2. Press Ctrl+D or right-click → Duplicate
3. New layer appears above original
4. Rename and modify content/position

Use cases:

• Multiple headlines (A/B test)
• Stacked text effects
• Repeated design elements

Background Layer Position

Fine-tune background image positioning:

Pan controls:

• Shift image horizontally (Pan X)
• Shift image vertically (Pan Y)
• Percentage of canvas (-100 to 100)
• Positive X pans right, positive Y pans down

Scale control:

• Zoom in/out (50% to 200%)
• 100% = cover (fills canvas)
• >100% = zoom in (crop more)
• <100% = zoom out (may show background color)

Size-specific overrides:

• Set different pan/scale per size
• Horizontal banners often need Y adjustment
• Vertical banners often need X adjustment

Saving as Template

Convert your banner project into a reusable template:

1. Complete your design
2. Click "Save as Template" (in project menu)
3. Enter template name and description
4. Template saved to your account
5. Available in Templates picker for future projects

Note: Templates save layer structure, not specific content. Headline/CTA text can be updated when using template.

Performance Tips

Fast Iteration

1. Use auto-save (every 3 seconds) - no need to manually save
2. Undo/redo for quick experimentation
3. Duplicate layers instead of recreating
4. Use templates as starting points

Efficient Workflow

1. Design 300x250 first (most common)
2. Generate/preview to see all sizes
3. Only override problematic sizes
4. Test animation timing before exporting
5. Generate once, use across all campaigns

Optimization

1. Compress images before upload (use tinypng.com)
2. Limit animations to 3-4 layers max
3. Use solid backgrounds when possible (faster load)
4. Test HTML5 file size before uploading to Google Ads
5. Remove unused layers before generating