Skip to main content

Changing your website's colors, fonts and style

How to use the Style panel in the Stackably Website Builder: logo, brand colors, design language, fonts, text sizes, content width and page transitions.

K
Written by Kelly Shirey

This article shows you how to change your website's colors, fonts and overall style for every page at once, using the Style panel in the Stackably Website Builder.

Where do I change my website's style?

  1. In Business Tools › Website Builder, tick the checkbox next to your website and click Edit.

  2. In the left toolbar, click Style.

When it worked, the Style panel opens with the sections LOGO, COLORS, DESIGN LANGUAGE, FONTS, TEXT STYLES, MAX WIDTH and PAGE TRANSITIONS. Changes in the Style panel apply to the whole website.

How do I change my website's colors?

The COLORS section of the Style panel lists your website's palette: an Accent color (used for buttons and links) and Color 1 to Color 10, each with its hex code, for example #2F6B4F.

  1. Click the color swatch next to the color you want to change.

  2. Pick a new color.

When it worked, the swatch and hex code update and the page shows the new color wherever that color is used.

Tip: Under LOGO, Add or upload your logo lets Stackably pull colors from your logo so the website matches it.

How do I change the overall look of my website (design language)?

A design language sets the fonts, shapes and feel of the whole website. Under DESIGN LANGUAGE, open the Style box and choose one, for example:

  • Editorial: serif headlines, generous white space, a magazine feel.

  • Soft: rounded, cream and calm, soft shadows and pill buttons.

  • Clean: crisp geometric sans, soft cards, confident and clear.

  • Craft: warm paper tones, humanist serif, rounded corners, earthy photos.

  • Minimal: quiet sans, monospace labels, hairlines and air.

The list also includes Electric, Swiss, Poster, Luxury, Playful, Neon, Athletic, Aurora, Heritage and Pop. When you choose one, the fonts and heading sizes in the Style panel change to match, and a preview of the look appears under the box. The four sliders below fine-tune the look between Compact and Airy, Soft and Stark, Cool and Warm, and Serious and Playful.

How do I change my website's fonts and text sizes?

  • FONTS: choose a Family for body text (for example Inter, Poppins, Montserrat, Playfair Display, Roboto, Lora, Work Sans or DM Sans) and set the Headings font.

  • TEXT STYLES: set the size in pixels for Heading 1 to Heading 6 and Paragraph 1 to Paragraph 3. Type the number and press Tab; the page updates straight away.

How do I change the content width and page transitions?

  • MAX WIDTH: Content width sets how wide the content of each page can get, in pixels (for example 1120).

  • PAGE TRANSITIONS: Effect sets the animation when a visitor moves between pages: None, Fade, Slide or Zoom.

Did this answer your question?