1. Cloudbeds
  2. Cloudbeds Digital Marketing
  3. Cloudbeds Websites
  4. Cloudbeds Websites Support
  5. Website Builder Guide

Customize your Cloudbeds Website with Site Theme

Gabriela Garcia
PurposeManage site-wide colors, buttons, typography, image styling, and backgrounds from Site Theme in the Cloudbeds Websites Editor.
Best forManager/GM and Admin users who manage the visual style of a Cloudbeds Website.
Use this whenYou want to apply consistent design settings across the website instead of styling individual widgets or pages one at a time.
RequirementsA Cloudbeds Website and access to open the Cloudbeds Websites Editor.
Expected resultYour site uses consistent global design settings, with individual overrides applied only where needed.

Introduction

Use Site Theme in the Cloudbeds Websites Editor to manage the overall visual style of your website from one place. Site Theme helps you keep colors, buttons, typography, image styling, and backgrounds consistent across pages.

Use Site Theme when you want a design change to apply broadly across the site. Changes made directly to an individual widget or page override the corresponding Site Theme setting.

Table of contents

Access Site Theme

Open Site Theme from the left-side panel of the Cloudbeds Websites Editor when you want to manage global design settings for the site.

  1. Open your Cloudbeds Website in the Cloudbeds Websites Editor.
  2. In the left-side panel, select the Theme icon.
  3. Use the available Site Theme sections to update global design settings.

The Site Theme panel includes global controls for Colors, Buttons, Text, Width & Spacing, Images, and Backgrounds:

The upper part of Site Theme shows the global Colors, Buttons, and Text controls:

Cloudbeds Websites Site Theme panel showing Colors, Buttons, and Text controls with the global color palette and Primary and Secondary button styles

Further down, Site Theme includes heading styles plus Width & Spacing, Images, and Backgrounds:

Cloudbeds Websites Site Theme panel showing DFLT, PAR, and H1 through H6 text styles with Width and Spacing, Images, and Backgrounds sections

Understand global styles and overrides

Changes made in Site Theme apply across the website so you can maintain a consistent visual style without editing the same setting on every page.

 Changes made directly to an individual widget or page override the corresponding Site Theme setting. Set your global theme first, then apply individual overrides only where they are needed.

Customize theme colors

Use the Colors section to create and manage the global color palette used across the site.

  1. In Site Theme, expand Colors.
  2. Select the color swatch you want to update.
  3. Enter a HEX or RGB value, or use the eyedropper tool to select a color.
  4. Repeat for the remaining theme colors as needed.
  5. To rename a theme color, hover over the color name and select the pencil icon, then enter the new name.

Customize button styles

Use the Buttons section to manage the global Primary and Secondary button styles used across the website.

  1. In Site Theme, expand Buttons.
  2. Select the Primary or Secondary button style you want to update.
  3. Adjust the available button settings to match your site design.

Customize theme text

Use the Text section to manage global typography for default text, paragraph text, and heading levels.

  1. In Site Theme, expand Text.
  2. Select the text type you want to update:
    • DFLT: Sets the theme for text in widgets that is not assigned to a paragraph or heading style. Link appearance can also be customized here.
    • PAR: Sets the theme for paragraph or text-widget content.
    • H1-H6: Sets the theme for heading levels 1 through 6.
  3. Adjust the available text settings, which can include font, weight, size, text scaling, color, font format, text direction, line height, letter spacing, all caps, and text shadow.

 Choose font styles that match your brand and remain easy to read. Keep heading sizes and weights consistent, and use text colors that contrast clearly with the background.

Customize image styles

Use the Images section to manage global styling for image widgets. Available controls can include image layout, border style, rounded corners, and shadow effects.

For uploading, organizing, and reusing media assets, see Manage images and media in Cloudbeds Websites.

Customize backgrounds

Use the Backgrounds section to define a default site background or apply a different background to a specific page.

Set the default background

  1. In Site Theme, expand Backgrounds.
  2. Expand Default Background.
  3. Select the Color or Image option.
  4. Choose the background you want to use as the site default.

Set a background for a specific page

  1. In Site Theme, expand Backgrounds.
  2. Expand Background Per Page.
  3. Select the page you want to customize.
  4. Select the Color or Image option.
  5. Choose the background you want to use for that page.

Other Site Theme options

The Site Theme panel also includes Width & Spacing controls. These controls appear with the other global Site Theme categories in the current Editor 2.0 interface.

Now that you know how to manage global Site Theme settings, use these resources for broader Cloudbeds Websites Editor orientation and navigation:

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.