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