How to Change Theme Settings

Customize your website’s design through Theme settings.

Accessing Theme Settings

1. Open your website in the editor
2. Go to Settings tab
3. Click Theme section

Or click the Theme icon in the preview toolbar.

Theme Options

Typography

Heading Font

• Select font family for headings (h1-h6)
• Options: Google Fonts library

Body Font

• Select font family for body text
• Options: Google Fonts library

Colors

Primary Color

• Main brand color
• Used for buttons, links, accents

Secondary Color

• Supporting accent color
• Used for highlights, badges

Background Color

• Page background
• Section backgrounds

Text Color

• Default text color
• Headings and body text

Buttons

Roundness

• Corner radius
• Options: None, Small, Medium, Large, Full

Button Color

• Background color of buttons

Button Hover Color

• Color when hovering

Button Text Color

• Text inside buttons

Border Thickness

• Button border width
• Options: None, Thin, Medium, Thick

Border Color

• Button border color

Links

Link Color

• Color of text links

Link Hover Color

• Color when hovering over links

Applying Changes

1. Adjust settings
2. Preview updates in real-time
3. Click Save to apply

Tips

Color Harmony

• Use complementary colors
• Maintain contrast for readability
• Test in both light and dark modes

Font Pairing

Good combinations:

• Heading: Playfair Display / Body: Open Sans
• Heading: Montserrat / Body: Lato
• Heading: Poppins / Body: Inter

Button Consistency

• Use same style throughout
• Ensure hover states are visible
• Test on all backgrounds

Quick Changes via AI

Instead of manual settings:

Change the primary color to purple

Make all buttons rounded with a hover animation

Use Montserrat for headings and Inter for body text

• Editor Overview Learn more

• AI Chat Guide Learn more