Site Design and Branding

This article shows you how to open the site-wide Design hub in Site Edit to update colors, typography, logos, and related branding options — and how to check the result before you publish.

Before you begin: Design in the top toolbar controls site-wide look and feel. Individual pages also have a Design tab under Settings for page-specific layout (title visibility, content width, background).

Site-wide design vs page design

Site Edit has two design surfaces, and choosing the right one saves a lot of rework:

Where

Scope

Typical use

Design (toolbar)

The whole site

Brand colors, fonts, buttons, forms, logos, cards

Settings → Design (a page)

Only that page

Page title display, content width, background image

Reach for the toolbar Design hub when the change should be consistent everywhere — your palette, your fonts, the way buttons look. Reach for a page's own Design tab when one page needs to sit differently from the rest, such as a full-width landing page.

Open Site Edit

From My Sites, find the site you want to update and select SITE EDIT.

The SITE EDIT button on a site card

Open Design

In the Site Edit toolbar, select Design.

The Design hub Colors tab with brand palettes
  1. Colors: Site-wide color palette, primary/secondary colors, content, gradient, and border colors.
  2. Typography: Fonts and text styles.
  3. General: Site-wide styles such as buttons, forms, logos, and page chrome.
  4. Cards: Card layout and styling options.
  5. Pages: Page-level design defaults that apply across the site.

The palette opens over the live preview rather than replacing it, so you can see your site behind the controls while you work. Pages here sets the defaults every page starts from; an individual page's Design tab under Settings is where you depart from those defaults.

Update brand colors

  1. Open Design → Colors.
  2. Choose Designer colors or Brand colors.
  3. Select a brand palette when using Brand colors, or adjust individual color fields.
  4. Watch the live preview update as you change colors.

Brand colors offers ready-made brokerage palettes — pick the one that matches your affiliation and the site adopts its colors. Designer colors gives you the individual color fields instead, including primary and secondary colors plus content, gradient, and border colors, when you want to build the palette yourself.

Because these colors are site-wide, a single change ripples through headers, buttons, links, and modules on every page. That is what makes it powerful, and also why the review step below is worth doing.

Update typography and logos

  1. Open Typography to change heading and body fonts where available.
  2. Open General for shared chrome options, including logo-related controls such as Typography logos when shown.
  3. Upload or replace logo images using the image picker controls that appear for those fields.

Exact logo placement (header vs footer) depends on the controls available in your theme. Use Search in the Site Edit toolbar and type logo if you need to jump to logo settings quickly.

Search is the fastest route in general when you know the name of a setting but not which tab holds it — it looks across settings, modules, and widgets.

Review your design changes

Site-wide edits affect pages you are not currently looking at, so check a few before publishing:

  1. Watch the preview as you edit — it updates while you change fields, so you can compare options without leaving the palette.
  2. Open Pages and load a few different page types — your homepage, a content page, a listings page, and a blog post. Each uses your colors and fonts differently.
  3. Look at text on colored backgrounds in particular. Buttons, headers, and module backgrounds are where a new palette is most likely to reduce contrast.
  4. If one page now looks wrong while the rest look right, fix it on that page's Settings → Design tab rather than changing the site-wide value back.

Publish your changes

Design edits are saved to the Site Edit draft. Select PUBLISH to apply them to the live site, or DISCARD to remove unpublished changes.

Design changes sit in the same draft as your content edits, so publishing releases both together. If you want a new palette live on its own, publish or discard the other pending edits first.

For more about applying or removing pending changes, see Publishing and Discarding Drafts.

Need more help?

For questions, concerns, or feedback, chat with our team at app.placester.com/chat.

How did we do?

Creating a New Page

Working with Modules
#

Let experts do it for you

Visit our creative services marketplace to get on-demand help, on-time and on-budget.

Browse all Services
#

Are you looking for something different?

Didn't find an answer to your questions? Our support team is ready to help you.

Contact Support