Design

The design section of the settings page provides a set of options that allow you to control various design elements and styling choices to create a consistent and appealing user interface.

Palette

The palette consists of predefined background colors that add contrast and visual interest when designing content using blocks.

Background Types

• Default Background: The neutral background used throughout the website.

• Primary Background: A distinctive color for key sections, drawing user focus.

• Secondary Background: Complements the primary background, used for dropdown and mobile menu backgrounds.

• Muted Background: A subtle, softer color for a subdued look.

Steps to Change Your Color Palette

1. Click on the Palette field to open the drawer.

2. Choose a new palette.

3. Save the drawer page and settings page.

4. Refresh your website.

Using these background options helps highlight important information and improve visual appeal.

Changing your color palette

Font Options

Customize text presentation with the following options:

Heading and Body Font Combinations

Select different font styles for headings and body text to enhance readability and aesthetics.

Steps

1. Click on the Fonts field.

2. Select a font pairing from the drawer.

3. Save the drawer and settings pages.

4. Refresh your website to view changes.

Changing your fonts

Global Font Size

Set a consistent font size across the website with two options: Default and Large.

Steps

1. Select Default or Large from the Font Size dropdown.

2. Save the page.

3. Refresh your website to view changes.

Heading Options

Choose Default, Italic, or Uppercase styles for headings.

Steps

1. Select the heading style from the Headings Options dropdown.

2. Save the page.

3. Refresh your website to view changes.

Change Font Size and Heading Options using the dropdown fields

Button Options

When selecting button styles, consider your website's overall feel, color palette, and marketing goals to reflect your brand's identity.

Button Styles

• Default: Sharp corners for a clean, modern look.

• Round: Rounded corners for a softer, inviting appearance.

• Pill: Elongated with rounded edges, ideal for calls-to-action.

Steps

1. Click on the Button Styles field.

2. Select Default, Round, or Pill.

3. Save the page.

4. Refresh your website to view changes.

Button Sizes

• Small: For less critical or secondary actions.

• Medium: Balanced size for standard actions.

• Large: Draws attention for primary actions or CTAs.

Steps

1. Click on the Button Sizes field.

2. Select Small, Medium, or Large.

3. Save the page.

4. Refresh your website to view changes.

Background or Border

Buttons can have a solid background or a border, depending on your design preference and color scheme.

Steps

1. Click on the Button Background or Border field.

2. Select Solid Background or Border.

3. Save the page.

4. Refresh your website to view changes.

Change buttons, button size and styles.