Site-wide colors

Site-wide colors are colors that you can create, name and reuse. You can apply these colors to objects, backgrounds, image tints etc. across all your pages. When you change a Site-wide color that you've saved, the change will automatically be applied everywhere that color is across your site. What a time saver!


A few notes about the beta

This is a beta of Site-wide colors and as such it's possible that bugs or unforeseen situations may arise in testing this new software. Based on your level of comfort, you can try out the beta on your existing website, or you can try the beta by creating a new draft site and using one of our themes.

If you are a member of the Pagecloud beta community you already have access to this feature. Learn how to join our beta program.

If you have team members who collaborate on the site you are going to test on, all team members who edit the site must opt into the beta group to continue to edit your site once it has begun to use Site-wide colors. Your team members can opt into the beta by joining our beta program and then messaging support to enable this feature on their account.

Updates can move quickly during a beta and we will do our best to keep these instructions up to date but there may be times where things have changed or something new has been added.


Creating a Site-wide color

  1. Open the new in-Editor Site Settings at the bottom of the left sidebar.
  2. Click the 'New Color' button.
  3. Create your color with using one of the following methods:
    • Select a color from the available swatches
    • Create and new color using the color selection controls
    • Enter (or paste) your custom color code into the text field below the color controls. You can paste RGB, RGBA, and HEX color code values.
  4. Make the color your own by naming it! In the field that says 'New Color' type the new name. This may be a name that implies how to use that color, for example, Accent, Brand color, Light background etc.
  5. Click 'Update Site-wide color' to save your new Site-wide color.

Tip. If you are creating new Site-wide colors from existing colors we recommend copying the color value first and then pasting that into you the color code text field for your new color.

Applying Site-wide colors

Let's apply one of these new Site-wide colors to your page. 

Applying Site-wide colors to objects

  1. Select an object or add one to the page.
  2. Click to apply a color as you normally would.
  3. Choose one of your new Site-wide colors.

Applying Site-wide colors to text

  1. Select a text-box or add one to the page.
  2. Click to apply a color as you normally would.
  3. Choose one of your new Site-wide colors.

Notice how the Site-wide colors are presented and not the traditional color picker? This is intentional, we want to encourage the reuse of existing colors, especially Site-wide colors.

Applying Site-wide colors to Section or Column background

  1. Select the Section or Column you want to apply a background color to.
  2. Click the 'Section/Column background' depending on what you are applying the color to.
  3. Choose the 'Color' option.
  4. Select the Site-wide color you would like to apply.

Applying Site-wide colors as an image tint

  1. Select an image.
  2. In the Style tab select 'Color Tint'.
  3. Choose one of your Site-wide colors.
  4. Use the opacity slider to control the tint of the color.

You can use the opacity slider whenever you apply a color to an object to.

Change a Site-wide color

Ok, now that we have this new Site-wide color used all over your page let's change it, everywhere, in one step!

  1. Open Site settings. You can open Site settings by clicking on the menu item in the left sidebar or clicking the "Edit site-wide colors" button in the color view in the Editing menu.
  2. Click on the color you would like to change. You can click on the color chip or the Edit button, both will open the color picker popover. 
  3. Change your color, you can see a preview of what the color will look like on your page. 
  4. Once you are satisfied click the button "Update site-wide color" to save your update.
  5. Magic, well not really, but close. And, like everything with Pagecloud, you can undo.

Once you save this page the Site-wide color will be updated accross all pages.


Managing Site-wide colors

Manage your Site-wide colors in Site Settings located in the left sidebar. 

Rename a Site-wide color

  1. Open Site Settings located in the left sidebar.
  2. Move the mouse over the Site-wide color you want to rename and click 'Edit'.
  3. Replace the old name with the new name.
  4. Click 'Update Site-wide color' to save your new Site-wide color's name.

Sort Site-wide colors

The list of Site-wide colors in Site Settings can be organized. By clicking to the left of the color swatches you can drag and drop the colors to reorder the list.

Remove a Site-Wide Color

This is not supported at this time.

User Icon

Thank you for your feedback!

Was this article helpful?
Thank you for your feedback!