How to Change the Colors of a Digital Product in Pagewheel

It’s easy to change the colors of a digital product in Pagewheel so your users recognize your brand in every product! 

A graphic with "Change the Colors of my Digital Product". Underneath are an array of color swatches.

Opening the Page-by-Page Builder

When using the Page-by-Page Product Builder, you can choose the colors in the first step of creating your digital product.

Begin by opening up the product builder. You can do this by clicking ‘Create my Digital Product’ in the topbar.

Then in the next screen, click ‘Page-By-Page Product Builder’.

A mockup of how to access the Page-by-Page Builder from Pagewheel's dashboard.
Open the product builder

You can also change the colors of existing digital products.

For more information, see How to Edit and Existing Product.

Choosing Text and Accent Colors

Pagewheel offers some practical base color schemes to kickstart your project:

  1. Pick Your Base Text Color: This color will be used for most of the text. Choose between black, blue, and gray
  2. Choose Your Accent Colors: Browse through a variety of pre-made color sets. Use the small arrows to scroll left and right
A mockup of how to use the digital product branding screen.
Choose the base text color and accent color set

Creating Your Own Custom Color Set

Pagewheel lets you customize colors to better suit your branding. 

To begin, click the ‘+ Add Custom Colors’ text to open the color customize box.

Drag and drop the colors to rearrange them. 

The first three colors are used the most, so make sure they best represent your brand.

A mockup of how to change the order of a custom color set in the page builder.
Drag and drop the colors to rearrange them

If you prefer, you can click a color block to choose a specific color.

This will open the color picker box. Here you can:

  1. Use the color box and slider to choose a color, or
  2. Input the HEX code of your desired color

Simply click outside the color picker box to apply the color.

A mockup of how to use the color-picker box.
Choose a color or input a HEX code

Useful Color Customization Features

The change colors screen has special tools to help you choose your color scheme.

In the top-right corner, you’ll find three buttons:

  1. Display HEX Codes: Reveals an input box for each color, letting you easily modify HEX codes
  2. Rotate Color Palette: Switches to a new color palette, allowing you to quickly test different color schemes
  3. Undo Button: Revert a change – useful if you need to correct a mistake
A mockup of the special tools for choosing a color scheme.
The special tools and HEX display

After completing your color customization, click the ‘Looks GREAT!! Next’ button to save your changes.

Your new color palette will be applied, and the sample screen on the right will refresh to show the updated color scheme. 

Keep in mind, this is only a preview sample and will not be part of your final product unless added later.

Additional Resources

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *