Visual Editor Guide

Introduction to the Visual Editor

The EarlyCRO Visual Editor lets you create experiment variations by pointing and clicking directly on your live website. No coding required—perfect for marketers, designers, and product managers.

Opening the Visual Editor

1. Navigate to your experiment
2. Click "Edit Variation" on any variant
3. The editor will load your website in an iframe
4. Click any element to select it

Making Text Changes

To edit text content:

1. Click on any text element (headings, paragraphs, buttons)
2. The element will be highlighted with a blue border
3. In the sidebar, find the "Text" section
4. Edit the text directly in the input field
5. Changes appear instantly on the preview

Styling Changes

Modify colors, fonts, sizes, and more:

• Background Color: Change element backgrounds
• Text Color: Modify font colors
• Font Size: Adjust text sizing
• Padding/Margin: Control spacing
• Border: Add or modify borders
• Visibility: Hide or show elements

Adding & Removing Elements

You can add new content or hide existing elements:

Hiding Elements

1. Select the element you want to hide
2. Click the "Hide Element" button in the toolbar
3. The element will be hidden in this variant only

Adding Elements

1. Click "+ Add Element" in the toolbar
2. Choose element type (text, image, button, HTML)
3. Click where you want to insert it
4. Configure the new element in the sidebar

Advanced: CSS Selectors

For more precise control, you can target elements using CSS selectors:

1. Click the "Selector" tab in the sidebar
2. View or edit the auto-generated CSS selector
3. Use custom selectors for dynamic content

// Example selectors
#hero-title              // ID selector
.cta-button              // Class selector
button[data-action="buy"] // Attribute selector

Saving & Publishing

When you're happy with your changes:

1. Click "Save" to save your draft
2. Preview all variations to compare
3. Click "Publish" to make changes live