Page Building Basics: Choosing Base Colors | BOWWE Tutorial

BOWWE University

How to simply choose and edit website’s colors?

The graphic layer of every website is extremely important. One of its most essential ingredients are colors. They have a significant impact on the reception of your website by visitors.

 

If you want to create beautiful websites, you should define your website's UI Kit as soon as possible. This will greatly speed up your work on completing the page and help you achieve visual consistency on the website. 

 

We'll show you how to do it below!

How to use Main Colors (Color Styles)?

website template preview

Website template for a personal trainer or gym.

Just a quick peek is enough to know the base colors are: black, white and orange.

Color styles work very simply. Within them, you define which Main Colors your website consists of. To understand it better, click on STYLES in the side pane on the left:

Website UI Kit

This panel will show what Main Colors are assigned to your website. This is crucial information - when adding subsequent subpages or sections to your website, you should color them with precisely the same colors as specified in the Main Colors. This way, your website will look beautiful, consistent, and therefore professional.


When you choose base colors on your website, they are saved as a variable. A variable is a value that can be easily and quickly assigned to multiple widgets on your website. Thanks to this, you can give each Widget added to the page the same color and a shade (compatible with the Main Colors). 

How to change widget’s color with the Main Colors?

Editing widget's colors

1

Click on any widget and select Widget Styles.
Widget's Color Picker

2

Choose one of the Color Pickers (e.g.: Font Color or Decoration Color).

3

In the Color Picker, you will see the Template Colors.
These are the same colors you defined earlier in the STYLE > Main Colors settings.

4

Choose one of the template colors.
You can be sure that the widget design will fit well with the rest of the website.

5

Click SAVE.
In the same way, you can easily give the same colors to many different widgets.

Watch out!

If you:

  1. Assign a specific color to widgets as a variable 
  2. And next change that color (variable) in the color styles to a different one

Then you will change the color of all widgets where that was assigned as a variable! Be aware of that!

Instruction: How to change the website’s Main Colors?

1

Go to STYLES.

2

Choose one of the Main Colors.

3

Select a new color in the Color Picker.

4

Click SAVE.

How to put on the widget a color other than the Main Colors?

If you decide to give several widgets a color different from the assigned variable, just go to Widget Styles and set the color in the Color Picker. Then you will change the color of only one widget.

Congratulations!

You already know how to determine color styles for your website!

Remember about:

Jeśli przypiszesz dany kolor do widżetów jako zmienna, po czym zmienisz ten kolor w stylach kolorów na inny, to zmienisz kolor wszystkich widżetów, w których był on przypisany jako zmienna!
Use only high-quality photos in the Portfolio. Find out where to get them here!
Update Portfolio min. 1 a week. You will achieve higher rankings in search engines!

Didn't find the answer?

No matter what your problem is. We are here to help you find a solution.

LET'S TALK

Banner of the European Union donation

The support of small and medium enterprises in the promotion of product brands - Go to Brand from the Intelligent Development Operational Program 2014-2020,

co-financed by the European Regional Development Fund.