On this article you are going to understand how to use the Main Website Design settings.

Before jumping into each setting, we are going to cover the basics on how to use the color picker and its possibilities.

On this example we are going to change the color palette for the site. You can use sites like Adobe Colors, Paletton to generate new color ideas for your site.

Body Background

You can use the Color Picker to select the color that you need or you can enter the RGB color code.

This is the color that we are going to use for the Body Background: rgb(192, 230, 153)

On your website Color Picker window you can select the color or enter the RGB code:

Once entered you will need to click on Save Changes, then refresh your website homepage, and you'll see the color applied:

Body Font Color

With the new color applied, the Titles and the body content will change:

Body Font Family

The typography is generated by Google Fonts, you can take a look in their collection https://fonts.google.com/

For this example we are going to use Source Sans Pro the font looks fresh, and modern.

Heading Font Family

This font setting will change the headings on the site.

Take a look at Signika

Body Font Size

Here you can increase or decrease the size of the Body Font. 14 pixels is our recommended Body Font size.

Body Link Color

If there is an area on the Body of your site with a link, this is the color that you'll visitors will see:

Body Link Hover

If your visitors hover the mouse on top of the link they will see the color changing. The hover effect appears when the user positions computer cursor over an element without activating it. Hover effects make a website more interactive.

Breadcrumb Link Color

The breadcrumbs offer users a way to trace the path back to their original landing point.

Google Map Theme

This setting will style the Google Map View, please read: (Bootstrap) Styled Google Maps