Design Settings » Main Design
This article explains how to edit settings available in the "Main Design" section of the "Design Settings"
To get to this area, please go to
- Settings
- Design Settings
- General tab
- Click on the "Main Design" module to toggle it open
Body Font Family
The typography is generated by Google Fonts, see their collection https://fonts.google.com/.
For this example we are going to use Open Sans.
Heading Font Family
This font setting will change the headings on the site.
Body Font Size
Increase or decrease the size of the Body Font. 14 pixels is our recommended Body Font size.
Website Body Width
- Standard (Default)
- Extra Wide: Recommended for large screens.
Google Map Theme
Style the Google Map View, please see: Styled Google Maps
Body Background
We are going to cover the basics on how to use the color picker and its possibilities.
Use sites like Adobe Colors, Paletton to generate new color ideas for the website.
Use the Color Picker to select the color or enter the RGB color code. This is the color that we are going to use for the Body Background: rgb(255, 255, 255).
On the website Color Picker window select the color or enter the RGB code:
Once entered click on Save Changes, then refresh the website homepage, and see the color applied:
Body Font Color
The color will apply to the color of the major fonts of the website.
Breadcrumb Link Color
Breadcrumbs offer users a way to trace the path back to their original landing point.
Hyperlink Color
If there is an area on the Body of the site with a link, this is the color that the visitors will see:
Hyperlink Hover Color
If visitors hover the mouse on top of the link they will see the color changing. The hover effect appears when the user positions the computer cursor over an element without activating it. Hover effects make a website more interactive.
