Tutorial: The Style Designer
Using the Style Designer, you can set the colors, fonts and sizes of your site title, navigation, headings, paragraphs and more. The changes made using Style Designer are done at site-level. This means that you only need to adjust the setting once, and it's automatically applied to all of your pages.
The Style Designer can be accessed by going to Style > Style Settings > Style Designer, and is split up into two sections: Color and Font.
The Color section allows you to change the color of elements such as main heading, navigation and paragraph text. The Font section is where you can customize everything from your header, right down to the spacing between the letters in your header.
Color SectionChanging the color settings of your site enables you to provide a richer experience for your visitors. Here's what you can customize:
This the main navigation displayed on your site. This option allows you to set the color that your visitors will see when they first visit your site.
When visitors navigate to a page, the navigation link will change color to indicate which page is being viewed.
When visitors mouse over a navigation link, the link color will change.
Second Header, Third Header, Fourth Header, Fifth Header, Sixth Header
These refer to the Header tags used in your Text Widget. Depending on which Header tag you’ve selected, the corresponding color chosen will be displayed.
This changes the color of the text within your Text Widgets.
This setting lets you easily change the color of your text links, and is applied to all the text links.
When visitors hover over a text link, the link color will change to one you have specified.
Once a visitor has clicked on a link, the display color will change to the one you've set.
Font sectionEach Font element can be individually edited. To access the font options, click on the element you wish to edit.
- Strikethrough (puts a line through the middle of your text)
- Overline (puts a line above your text)
- Capitalize (The first letter of each word is capitalized)
- Uppercase (All letters are uppercase)
- Lowercase (All letters are lowercase)