Website design
Open design modeChoose where to apply the designSet presets and color palettesSet styles for individual elementsSet the header styleSet page colorsSet button styleSet card styleSet channel styleSet image styleSet video styleSet fontsChoose title and body fontsUpload fonts directlyAdjust text size and line spacingPreview the design
Set the colors, fonts, and appearance of elements for the entire site or a specific page. Combine style presets and color palettes, and adjust individual elements as needed.
Open design mode
In the top-right corner of the site editor, click More menu (…) → Design.
Choose where to apply the design
To change the design for the entire site, select Site settings. To apply a different design only to the current page or channel, open Design from that page or channel and select Page settings.
Set presets and color palettes
Click Preview at the top of the design panel and select the style preset you want. You can preview the appearance of headers, buttons, cards, and more for each preset.
Click the ▶️ icon on a preset to preview it before applying it to your site.
Click the color palette selection menu below the preview and choose the palette you want.
Turn on System color matching to the right of the palette, then select Light or Dark to set the colors for each mode.
When System color matching is on, colors are displayed according to the visitor’s system settings. When it’s off, a single color setting is used for both Light and Dark modes.
In the color palette, click the color you want to change: Text, Background, Primary, Secondary, or Accent. Choose a color in the color picker or enter a color code.
Set styles for individual elements
Set the header style
In Site settings, go to Style → Header, choose the appearance and color you want, then adjust the options below.
•
Layout: Choose between the default style, where the header spans the width at the top of the page, and the floating style, where the header floats above the content as you scroll down.
•
Top menu alignment: Align the menu to the left, center, or right.
•
Header size: Adjust the height of the header.
If you select the floating layout, you can adjust the following options.
•
Keep at top: When this option is on, the header remains floating even when you’re at the top of the page.
•
Background effect: Choose between a solid color, a translucent effect that shows what is behind the header, or liquid glass that makes what is behind the header look like it's seen through glass.
•
Header size: Set the width and height of the header.
•
Header corner radius: Set the corner radius of the header.
•
Shadow: Set the shadow's position and blur.
Set page colors
Change the colors of the background, title, and body text under Style → Page.
Set button style
Choose the shape you want under Style → Button. Change the colors of the background, text, and other elements under Color, then adjust the padding, corner radius, border, and shadow under Shape.
Set card style
The card style is applied to background blocks. Choose a shape under Style → Card, then adjust the colors of the background, title, and text, as well as the corner radius, border thickness, and shadow under Color and Shape below.
Set channel style
The channel style is applied to channel preview blocks added to a page. Choose a shape under Style → Channel, then adjust the background and text colors, corner radius, border thickness, and shadow under Color and Shape below.
You can see the style changes when the channel preview is displayed as a card.
Set image style
Choose a shape under Style → Media → Image, then set the corner radius, border, and shadow.
Set video style
Choose a shape under Video in Media, then set the corner radius, border, and shadow.
Set fonts
Choose title and body fonts
Under Fonts, click Title and Body Font to choose the fonts you want to use. You can find a font using the search box or language filter.
Upload fonts directly
Direct font uploads are available on Plus plans and above. WOFF2, TTF, and OTF formats are supported, and you can upload files up to 20 MB each.
Click the heading or body font, then select Upload. Read and check the notice about your rights and responsibilities for using the font, then click Upload font and select the file you want.
Adjust text size and line spacing
Click the values to the right of Page title, Page body, and Button to adjust font weight, size, and line spacing. Expand Headings to configure the styles for Heading 1–3.
Preview the design
Close the design panel and switch between the desktop and mobile previews at the top of the screen to check colors, text size, and line breaks.
