Layout & Styling

The Layout & Styling section of the Design Editor allows you to customize the appearance of your campaign. You can control the layout, spacing, colors, typography, backgrounds, borders, and other visual elements to create campaigns that match your brand identity.

Whether you're building a popup, banner, or sticker, Layout & Styling gives you the flexibility to design campaigns that are both visually appealing and optimized for conversions.

📷 Screenshot: Insert a screenshot of the Layout & Styling panel.

Accessing Layout & Styling

To access the Layout & Styling settings:

Navigate to Campaigns.
Open an existing campaign or create a new one.
In the Design Editor, select the element you want to customize.
The Layout & Styling options will appear in the properties panel.

📷 Screenshot: Highlight the Layout & Styling panel.

Layout Settings

The Layout settings determine how elements are positioned within your campaign.

Depending on the selected element, you may be able to configure:

Width
Height
Position
Alignment
Padding
Margin
Spacing
Layer order (Z-index)

These settings help you organize the content and create a balanced layout.

📷 Screenshot: Highlight the layout controls.

Size and Position

Adjust the size and placement of an element.

Common options include:

Width
Height
X Position
Y Position
Responsive sizing (if available)

Resize elements carefully to ensure they display correctly across different screen sizes.

📷 Screenshot: Highlight the size and position controls.

Alignment

Use the alignment tools to quickly position elements.

Available alignment options may include:

Align Left
Align Center
Align Right
Align Top
Align Middle
Align Bottom

Proper alignment helps create clean and professional-looking designs.

📷 Screenshot: Highlight the alignment controls.

Spacing

Control the spacing around elements using:

Padding
Margin
Gap (for containers, if available)

Consistent spacing improves readability and visual balance.

📷 Screenshot: Highlight the padding and margin controls.

Background Styling

Customize the background of your campaign or selected element.

Available options may include:

Solid Color
Gradient
Background Image
Transparency (Opacity)

Choose backgrounds that complement your content while maintaining readability.

📷 Screenshot: Highlight the background settings.

Colors

Customize the colors used throughout your campaign.

You can modify:

Background color
Text color
Button color
Border color
Icon color

Using your brand colors helps create a consistent experience for visitors.

📷 Screenshot: Highlight the color picker.

Borders and Corners

Adjust the appearance of borders.

Available settings may include:

Border Width
Border Color
Border Style
Corner Radius

Rounded corners can create a modern look, while borders help separate elements.

📷 Screenshot: Highlight the border settings.

Shadows

Apply shadows to create depth and make important elements stand out.

Depending on the selected element, you may be be able to adjust:

Shadow Position
Blur
Spread
Opacity
Shadow Color

Use shadows sparingly to maintain a clean design.

📷 Screenshot: Highlight the shadow settings.

Opacity

Opacity controls the transparency of an element.

Higher opacity makes elements fully visible, while lower values create transparent effects.

This is useful for:

Overlay backgrounds
Decorative elements
Layered designs

📷 Screenshot: Highlight the opacity control.

Responsive Design

As you customize your layout, preview your campaign across multiple devices.

Review the design on:

Desktop
Tablet
Mobile

Adjust spacing and sizing where necessary to ensure a consistent user experience.

📷 Screenshot: Insert screenshots of Desktop, Tablet, and Mobile previews.

Best Practices

To create visually effective campaigns:

Maintain consistent spacing throughout the design.
Use your brand colors and typography.
Avoid overcrowding the layout.
Ensure text has sufficient contrast against the background.
Keep call-to-action buttons prominent.
Test layouts on different screen sizes before publishing.

Tips

Start with a simple layout and refine it as needed.
Use whitespace to improve readability.
Group related elements together.
Keep important content above the fold when possible.
Preview your design frequently while making changes.

Frequently Asked Questions

Can I customize every element?

Yes. Most elements in the Design Editor include Layout & Styling options that allow you to adjust their appearance and positioning.

Will my changes affect all devices?

Some settings apply across all devices, while others can be adjusted separately for desktop, tablet, and mobile views, depending on the editor's capabilities.

Can I undo styling changes?

Yes. If supported by your editor, you can undo recent changes or manually adjust the settings until you're satisfied with the design.

AI Design
Campaign Editor Overview
Components Overview
Typography
Responsive Design
Preview and Publish Campaigns
Campaign Settings