Site Design and Branding

This article shows you how to open the site-wide Design hub in Site Edit to update colors, typography, and related branding options, how to change your logo, 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, 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

  1. Select Dashboard in the top menu.
  2. On the site card, select EDIT SITE. Site Edit opens with your homepage.

The EDIT SITE button on a site card

Open Design

In the Site Edit toolbar, select Design.

The Edit Design panel with its seven tabs

  1. Theme: The site template. Changing it reloads the preview.
  2. Colors: Site-wide color palette, primary/secondary colors, content, gradient, and border colors.
  3. Typography: Fonts and text styles.
  4. Layout: Content width and the site-wide spacing scale.
  5. General: Site-wide styles such as buttons, forms, and page chrome.
  6. Cards: Card layout and styling options.
  7. Pages: Page layout and hero settings for the page in the preview, and site-wide settings for index page types.

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

To change fonts, open Design → Typography. See Adjusting Heading Typography.

You change your logo on the preview, not in Design:

  1. Close the Edit Design panel.
  2. Move the pointer over the logo at the top of your site. A small toolbar named Logos appears.
  3. Select Customize Logos. The Edit Logos panel opens.

In Edit Logos you can:

  • Pick a new Desktop logo image, or Remove the current one.
  • Choose a Text logo or an Image logo for Primary Logo.
  • Type the Alternative text and a Tagline.
  • Set the Desktop logo height and the Mobile logo height.
  • Turn on Use different primary logo on mobile, then pick a Mobile logo.

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?

Uploading, Cropping and Sizing Images

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