Edit your site colors and fonts

How to customize your website's color palette, section spacing, and fonts.

You can control the look of your Wonderly website by adjusting colors, spacing, and fonts. These settings apply site-wide, so a single change updates every page automatically.

How to open your design settings

1. Under My business, click Website from the main sidebar.

2. Click Site navigation bar from the secondary sidebar.

3. Click the Design tab.

4. At the bottom, click Edit site colors and fonts.

From here, you'll see two tabs: Theme and Settings. The sections below walk through the Theme tab.

---

Customize your color palette

When to use: You want to change the colors used across your website.

1. In your Edit site colors & fonts settings, click the Theme tab.

2. Click the Try a present palette dropdown to browse AI-generated color palettes based on your brand colors.

3. To customize individual colors, click the colored circle next to any element in the list and select a new color.

Color reference

• Primary buttons — The color of the main buttons on your site.

• Titles — The color of headings.

• Text — The color of paragraph text.

• Links — The color of hyperlinked text.

• Background — The default background color for text sections.

• Borders — The default color for borders.

---

Adjust section spacing

When to use: You want to increase or reduce the vertical space between sections on your website.

Click and drag the slider to adjust the vertical padding between each section on your page. Drag right for more padding, or drag left for less.

---

Change your fonts

When to use: You want to change the default fonts used for text across your website.

1. Click the text sample next to the font type you want to change.

2. Use the Search font bar to find a font, or select one from the Available Fonts list.

3. Preview your selection in the field below the list.

4. Click Apply to save your changes.

Repeat these steps for each font type you want to update.

Font types

• Header — A section on your page (like the hero section at the top of your website).

• Heading — The largest text on your site, used for main headings.

• Subheading — Secondary headings beneath your main headings.

• Titles — Smaller headings used within sections.

• Text — Paragraph and body text.