Editing styles

Want to change colors, fonts, spacing, or other visual properties? The Style editor in the Edit Tool lets you fine-tune the appearance of any element on your website.

Accessing Style Editing

1. Enable Edit Mode
2. Click on the element you want to style
3. Select the Style tab in the editing panel

Available Style Options

Colors

Change colors for:

• Background color - Element's background
• Text color - Font color
• Border color - Border/outline color

How to Change Colors

1. Click on the color property
2. Use the color picker or
3. Enter a hex code (#FF5733)
4. See the change instantly

Typography

Modify text appearance:

• Font size - Make text larger or smaller
• Font weight - Bold, normal, light
• Text alignment - Left, center, right
• Line height - Space between lines

Spacing

Adjust whitespace:

• Padding - Space inside the element
• Margin - Space outside the element
• Gap - Space between child elements

Borders

Customize borders:

• Border width - Thickness
• Border style - Solid, dashed, dotted
• Border color - Color of the border
• Border radius - Rounded corners

Size

Control dimensions:

• Width - Element width
• Height - Element height
• Max/Min - Constraints

Using the Style Editor

Making Changes

1. Find the property you want to change
2. Adjust the value using:

• Sliders
• Input fields
• Color pickers
• Dropdown menus

1. Changes apply in real-time

Previewing Changes

As you adjust styles:

• See changes immediately in the preview
• Toggle between before/after
• Test on different device sizes

Saving Changes

Style changes are saved automatically when you:

• Select a different element
• Close Edit Mode
• Click outside the panel

Common Style Edits

Changing Button Colors

1. Select the button
2. Go to Style tab
3. Change Background color for button color
4. Change Text color for label color
5. Optionally adjust Border radius for roundedness

Adjusting Section Backgrounds

1. Select the section container
2. Go to Style tab
3. Change Background color
4. Or set a Background image

Modifying Text Styles

1. Select the text element
2. Go to Style tab
3. Adjust:

• Font size
• Font weight
• Text color
• Line height

Adding Rounded Corners

1. Select the element
2. Go to Style tab
3. Find Border radius
4. Increase value for more roundness

Style Tips

Consistency is Key

• Use the same colors throughout your site
• Keep font sizes consistent for similar elements
• Maintain uniform spacing

Test Responsiveness

After making style changes:

• Check desktop view
• Check tablet view
• Check mobile view

Some styles may need adjustment for different screens.

Don't Overdo It

• Subtle changes often work better
• Avoid too many different colors
• Keep spacing consistent

Use Your Brand Colors

If you have brand guidelines:

• Use your primary brand color for CTAs
• Use secondary colors for accents
• Keep backgrounds neutral

Advanced Style Options

Shadows

Add depth with shadows:

• Box shadows for containers
• Text shadows for headings

Opacity

Control transparency:

• Make elements semi-transparent
• Create overlay effects

Transitions

Some elements may have:

• Hover effects
• Animation properties

When to Use Chat Instead

For complex styling needs, use the AI chat:

• Global style changes - "Make all buttons blue"
• Responsive adjustments - "Make the text larger on mobile"
• New style elements - "Add a gradient background"
• Complex effects - "Add a parallax scrolling effect"

Undoing Style Changes

Made a change you don't like?

Immediate Undo

• Click the reset/undo button in the style panel
• Some properties have a "Reset" option

Using Version History

• Go to Version History
• Restore a previous version

Ask AI

• "Revert the button colors to what they were before"