Tango.ad Editor Overview

The Tango.ad Editor is a visual drag-and-drop builder used to create and customize popup campaigns, forms, and interactive website elements without coding. The updated interface provides a cleaner workspace, improved layout controls, and faster access to design settings for desktop and mobile experiences.

With the editor, you can build campaigns visually by dragging components into the canvas, adjusting styles in real time, and configuring popup behavior from the settings panel.

Overview of the Tango.ad Editor

The editor workspace is divided into four main sections:

Top Navigation Bar
Left Sidebar (Content Library)
Main Canvas Area
Right Settings Panel

These areas work together to help you design, preview, and configure your campaigns efficiently.

The top navigation bar contains the primary controls for your campaign.

Available Controls

Located in the upper-left corner, this section displays:

Campaign/project name
Current step
Current editor mode (Design)

This helps identify which campaign and step you are currently editing.

Preview Mode Toggle

Located in the upper-right area.

Allows you to:

Enable or disable preview mode
Test how the popup behaves before publishing

Save Campaign

The Save Campaign button stores your latest changes.

Use this frequently while editing.

Device Visibility Controls

The popup can be configured separately for:

Desktop
Mobile

You can enable or disable popup visibility per device directly in the settings panel.

2. Left Sidebar – Content Library

The left panel contains draggable elements that can be added to the popup canvas.

Tabs

Content

Displays all available components.

Rows

Used for structural layout and section organization.

Available Elements

Image

Add banners, logos, or promotional graphics.

Form Field

Insert text inputs or data collection fields.

Email Input

Specialized email collection field with validation support.

Counter

Add countdown timers or urgency elements.

Text

Insert headings, descriptions, labels, or notices.

Close Button

Adds a popup close icon/button.

Button

Used for submission, navigation, or CTA actions.

Dismiss

Allows visitors to close or skip the popup.

Coupon Code

Display promotional or discount codes.

Spacer

Adds spacing between elements.

HTML

Insert custom HTML code for advanced customization.

3. Main Canvas Area

The center workspace is where the popup is visually designed.

Canvas Features

Drag-and-Drop Editing

Simply drag elements from the sidebar into the canvas.

Real-Time Design Preview

Changes appear instantly while editing.

Element Selection

Click any component to edit its settings.

Arrange:

Text
Forms
Buttons
Images
Validation messages
Consent checkboxes

directly inside the popup.

The sample popup shown includes:

Headline
Description text
Email input field
GDPR consent checkbox
Submit button
Validation message area
“Not Interested” dismissal link
Close icon

This structure is commonly used for:

Newsletter signups
Discount offers
Lead generation campaigns

4. Right Settings Panel

The right panel contains all configuration and styling options for the selected popup or element.

The updated interface organizes settings into clear sections.

Visibility

Control where the popup appears:

Desktop
Mobile

You can enable both or restrict the popup to specific devices.

Delay (sec)

Determines how long the popup waits before appearing.

Example:

20 seconds

Useful for:

Exit intent timing
Delayed engagement
Reducing immediate interruptions

Border Settings

Customize popup borders:

Radius
Width
Style
Color

Use these to create:

Rounded popups
Minimal flat designs
Framed layouts

Drop Shadow

Add depth and separation to the popup.

Options include:

Shadow style
Shadow visibility

Size Controls

Adjust popup dimensions:

Width (W)
Height (H)

Additional sizing options:

Fill Width
Fill Height
Hug Width
Hug Height
Fit Content

These controls help optimize responsiveness across devices.

Padding & Positioning

Padding

Adjust internal spacing:

Vertical (V)
Horizontal (H)

Position

Choose popup placement:

Top-left
Top-center
Top-right
Center
Bottom-left
Bottom-center
Bottom-right

Advanced Settings

Rotation

Rotate popup elements if needed.

Offset Controls

Fine-tune popup positioning:

Horizontal Offset
Vertical Offset

Opening Effect

Configure popup animations.

Example:

Fade In Scale

Z-Index

Controls popup layer priority over website content.

Higher values place the popup above other page elements.

The editor supports multi-step campaign flows.

Example flow:

Step 1 — Offer
Step 2 — Form
Step 3 — Thank You

This allows you to create guided user experiences inside a single campaign.

Additional Features

Zoom Controls

Located in the bottom-left corner.

Allows precise editing by zooming in or out of the canvas.

Design with AI

The updated editor includes a Design with AI option for faster popup creation and layout suggestions.

Advanced Mode Toggle

Enables additional editing and configuration options for advanced users.

Best Practices

Keep Forms Simple

Use minimal fields to improve conversion rates.

Use Mobile Visibility Carefully

Always test popup responsiveness on mobile devices.

Add Clear Call-to-Actions

Use concise and action-oriented button text.

Examples:

Subscribe
Claim Offer
Get Discount

Use Delays Strategically

Avoid showing popups immediately after page load.

Test Multi-Step Flows

Multi-step campaigns can improve engagement and reduce friction.

Recommended Workflow

Create or open a campaign
Drag elements into the canvas
Customize styles and layout
Configure popup behavior
Preview on desktop and mobile
Save changes
Publish campaign

Continue Learning

Learn how to create your first popup campaign, configure triggers, and optimize conversions using the Tango.ad platform.