Visual Editing

Click any element to select and edit it. Visual editing gives you direct control over typography, spacing, colors, and effects.

Selecting Elements

Click on any element in the preview to select it. A blue outline indicates the selection, and the properties panel appears.

What you can select:

• Text elements (headings, paragraphs, links)
• Buttons and CTAs
• Images and media
• Containers and sections
• Cards and components

Direct Manipulation

Adjust properties through intuitive controls:

Typography:

• Font family
• Font size and line height
• Font weight
• Letter spacing
• Text alignment
• Text color

Spacing:

• Margin (outside spacing)
• Padding (inside spacing)
• Gap (between child elements)

Visual Effects:

• Background color
• Border radius (rounded corners)
• Border width and color
• Box shadow
• Opacity

Context-Aware Editing

The properties panel adapts to what you’ve selected:

• Text selected → Typography controls prominent
• Button selected → Background, padding, border controls
• Image selected → Size, border radius, shadow, alt text controls
• Container selected → Layout, spacing, background controls

Editing Image Alt Text

Select any image to edit its alt text for accessibility. The visual editor shows:

• Live preview of the selected image
• Alt text field to update the description
• Save to apply your changes

Why alt text matters:

• Accessibility – Screen readers use alt text to describe images to visually impaired users
• SEO – Search engines use alt text to understand image content
• Fallback – Alt text displays when images fail to load

Writing good alt text:

• Be descriptive but concise (aim for under 125 characters)
• Describe what’s in the image, not just “image of…”
• Include relevant context for your content
• For decorative images, leave alt text empty

Multi-Select Editing

Hold Shift and click to select multiple elements. Changes apply to all selected items simultaneously.

Useful for:

• Standardizing button styles
• Adjusting multiple headings at once
• Consistent card styling

Semantic Values

The editor uses semantic values that maintain relationships:

• Spacing uses consistent scale (4px, 8px, 16px, 24px, etc.)
• Font sizes follow typographic hierarchy
• Colors reference your brand kit

Global vs. Local Scope

Local changes (default): Affect only the selected element.

Global changes: Ask in chat to affect all similar elements:

“Apply this button style to all buttons”

The Fingerprint Rule

Manual adjustments are protected. When you fine-tune an element visually, Sticklight remembers that choice. Future AI updates respect your customizations.

This means you can:

• Perfect spacing without fear of reset
• Dial in exact colors that persist
• Adjust typography with confidence

When to Use Visual Editing vs. Chat

Use visual editing for:

• Precise spacing adjustments
• Individual element styling
• Quick color tweaks
• Typography fine-tuning

Use chat for:

• Adding new sections
• Structural changes
• Site-wide style updates
• Adding functionality

Combine both for the fastest workflow. Learn more about refining with chat and setting up brand kits for consistent styling.