Design Editor Overview

The Design Editor is the primary workspace for creating and customizing campaigns in Tango.ad. It provides a visual, drag-and-drop interface where you can design popups, banners, stickers, and other campaign types without writing code.

Using the Design Editor, you can add components, customize layouts, adjust styling, configure responsive views, and preview your campaign before publishing.

For an overview of campaign creation, see Campaigns Overview and Create a Campaign Manually.

Accessing the Design Editor

To open the Design Editor:

Navigate to Campaigns.
Create a new campaign or open an existing one.
The Design Editor will open automatically after selecting or creating the campaign.

For more information about creating campaigns, see Create a Campaign Manually or Create a Campaign with AI.

Design Editor Interface

The Design Editor is divided into several sections that help you build and customize your campaign efficiently.

The interface typically includes:

Toolbar
Components Panel
Design Canvas
Properties Panel
Device Preview Controls
Save and Publish Actions

The toolbar provides quick access to commonly used actions while editing your campaign.

Depending on your workspace, the toolbar may include options such as:

Save
Undo
Redo
Preview
Publish
Zoom Controls

These tools help you manage your editing workflow and prepare your campaign for publishing.

For additional campaign-level options, see Campaign Settings.

Components Panel

The Components Panel contains all the elements you can add to your campaign.

Common components include:

Text
Images
Buttons
Email Input
Coupon Code
Countdown Timer
Containers
Close Button
Icons

Drag and drop components onto the canvas to begin designing your campaign.

For detailed instructions on adding and configuring elements, see Working with Components.

📷 Screenshot: Highlight the Components panel.

Design Canvas

The Design Canvas is the central workspace where you build your campaign.

Here you can:

Arrange components
Resize elements
Move objects
Select components
Preview the overall layout

The canvas provides a real-time representation of how your campaign will appear to visitors.

For more information about arranging and styling campaign elements, see Layout & Styling.

📷 Screenshot: Highlight the campaign canvas.

Properties Panel

When you select a component, its settings appear in the Properties Panel.

Depending on the selected element, you can customize:

Position
Size
Colors
Typography
Borders
Shadows
Animations
Actions
Visibility

The available options vary depending on the selected component.

For detailed component configuration, see Working with Components and Layout & Styling.

📷 Screenshot: Highlight the Properties panel.

Working with Components

Components are the building blocks of your campaign.

You can:

Add new components
Duplicate existing components
Delete components
Rearrange components
Resize elements
Edit content

Each component can be customized independently.

For detailed instructions, see Working with Components.

📷 Screenshot: Highlight multiple components on the canvas.

Layout & Styling

Use the styling controls to customize the appearance of your campaign.

You can modify:

Backgrounds
Colors
Typography
Borders
Corner Radius
Shadows
Padding
Margin
Alignment

These settings help create campaigns that match your brand identity.

For more information, see Layout & Styling.

📷 Screenshot: Highlight the styling controls.

AI Design

The Design Editor also supports AI-powered campaign generation.

Using AI Design, you can generate professional campaign layouts by providing:

A campaign description
Product images
Design references
Brand Kit

You can then edit the generated design like any manually created campaign.

For more information, see AI Design.

📷 Screenshot: Highlight the AI Design option, if available.

Responsive Preview

Before publishing, you can preview your campaign across different screen sizes.

Available preview modes typically include:

Desktop
Tablet
Mobile

Review each layout carefully to ensure the campaign displays correctly on all supported devices.

For additional campaign configuration options, see Campaign Settings.

📷 Screenshot: Highlight the device preview controls.

Saving Your Work

To prevent data loss:

Click Save regularly while editing.
Review your changes.
Continue editing or preview the campaign.

Saving does not automatically publish the campaign.

📷 Screenshot: Highlight the Save button.

Preview and Publish

Before publishing your campaign:

Click Preview.
Verify the campaign on desktop, tablet, and mobile views.
Test buttons, forms, and interactive elements.
Click Publish when you're satisfied with the design.

A thorough review helps ensure a smooth visitor experience.

For more information about managing your campaign before and after publishing, see Campaign Settings.

📷 Screenshot: Highlight the Preview and Publish buttons.

Best Practices

To create effective campaigns:

Keep your layout clean and uncluttered.
Use consistent branding across all campaigns.
Maintain adequate spacing between elements.
Use high-quality images and concise text.
Ensure call-to-action buttons are easy to find.
Preview campaigns on all supported devices before publishing.
Use AI Design when you want to speed up the initial design process.

Tips

Save your work frequently while designing.
Start with a simple layout and refine it as needed.
Use reusable design patterns to maintain consistency.
Take advantage of AI Design to speed up campaign creation.
Test interactive components before publishing.
Review Working with Components for detailed component configuration.

Frequently Asked Questions

Can I edit a published campaign?

Yes. You can reopen a campaign in the Design Editor, make changes, save them, and republish the campaign.