Site-wide colors

Step 1. Open or create a new site

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.

Once you have your site selected open a page in the editor to get started.

Step 2. Open Site settings

Site settings is a new left sidebar menu item that is located above Page settings. This is the place where you will manage your Site-wide colors. Open Site settings.

Add your first Site-wide color

Follow the in-app guidance and add your first Site-wide color.

You can also give colors a friendly name. This may be a name that implies how to use that color, for example, Accent, Brand color, Light background etc.

Add some additional colors

May as well add a couple extra colors to try out. You can add more anytime.

The list of Site-wide colors can be sorted. Try to dragging a color up and down to sort it in the list.

Deleting colors is not supported at this time.

Step 3. Apply your new colors

Let's apply one of these new Site-wide colors to some objects and backgrounds on your page. If your page doesn't what you need, add it temporarily to get a sense for how things work.

Color text

Select a text object and click to apply a color as you normally would.

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.

Select one of your new Site-wide colors.

Color an object

Select a shape, or add one from the left sidebar. Click to apply a colour as you normally would and select one of your new Site-wide colors. Easy eh.

Apply a color tint on an image

Ok, getting a little more complicated now.

• Select an image
• In the Style tab select Color tint.
• Choose one of your Site-wide colors
• Use the opacity slider to apply a tint of the color

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

Apply a color background to a section or column

Select a Section or Column and apply a background color. Works just as you would expect. Try applying the opacity on this one as well.

Apply the Site-wide color to a few more objects

Try this out on a few more objects. While you are at it explore borders and shadows as well!

Next we are going to change the color you've been applying in the previous steps.

Step 4. Let's change that color

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

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.

Click on the color you would like to change

Clicking on the color chip or the Edit button will open the color picker popover. Go ahead and change your color, you can see a preview of what the color will look like on your page. Once you are satisfied click the button "Update Site-wide color".

Magic, well not really, but close. And, like everything with Pagecloud, you can undo.

If you used this color on other pages they would be updated as well once you save this page.

But what if I want a custom color?

No problem, whenever you are applying a color there is a "Custom color" button which will allow you to apply any color you want. This won't be a Site-wide color but great for one off instances where you need something a little different.

Looking for more information

See Pagecloud Answers for a support article on Site-wide colors.