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 > Designer, and is split up into several sections:
Please note: Depending on the template you are using, not all features are available. To have the most flexibility and control, we suggest using Super Flat or Skyline, or any of the Responsive templates.
Changing the color settings of your site enables you to provide a richer experience for your visitors. Here's what you can customize:
|This is where you can add a custom background image or color to your site.|
|This is where you can add a custom banner to your site.|
|This is where you can add a logo to your site.|
|This changes the background behind your navigation text.|
|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.|
|This is the page heading, and is displayed at the top of your pages.|
|This allows you to add a few words to sum up your company or business. It's usually located below your logo. This sets the color of your font.|
Site Tagline Background
|You can add a color behind your Site Tagline to make this more distinctive.|
|This controls the background color in the content area where your widgets are placed.|
Second Header, Third 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 is used when quoting a specific piece of text and you want to set it apart from the rest of the text. You can control the font color for this.|
|This allows you to add a background color behind your blockquote.|
|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.|
|The footer contains your Business location and phone number. You can change the color of the font used for this area.|
|This sets the color of the footer bar.|
|This allows you to change the typeface of your font from the default font to any of the listed fonts. The fonts provided are "Google web fonts" which means they're open source and supported in all modern browsers.|
|Determines the weight or boldness of your text.|
Determines the size of your font.
Defines the style of line to be applied to your text.
|Determines the spacing between each letter.|
|Determines the spacing between each line of text.|
Changes the capitalization of your text
This section allows you to control the vertical and horizontal spacing of the various elements of your site.
|Determines the amount of spacearound the content width. You can select None|
which will remove all padding.
Determines the placement of your navigation menu in relation to the banner:
Determines the amount of space in between each link on your menu.
|Determines the amount of space around the outside of the navigation links. You can select None which will remove all padding.|
Controls the width of your banner. This allows you to determine:
|Determines the amount of space around your banner image. You can select None which will remove all padding.|
Site Tagline Padding
|Determines the amount of space around your Site Tagline. You can select None which will remove all padding.|
Site Tagline Spacing
|Determines the amount of space between each letter of your word(s) in your Site Tagline.|
Determines how wide or narrow you want your content area to be. The content area is where you place your widgets. You can control:
Determines the amount of space between your outside with and inside with. You can select None which will remove all padding.
This anchors your page either at the Top, Middle, or Bottom of your site.
|Determines the amount of space around your footer.|
These are elements that you can opt to display or not.
Display Banner *
|Choose if you wish to have your banner area displayed or removed. * Please note: This is not available on all styles.|
|Choose to display or remove the footer area.|
Display Social Buttons
|You can choose to display the social media buttons on your footer.|
This allows you customize your Button widget. These options will only display if you have utilized the Button widget.
|Set the desired color for your button background.|
|You can choose the font color of the text displayed on your button.|
Set your font style for your text. You can control the following:
|Determine the amount of space between your text and the edge of your button.|
Select what shape button you wish to have.
You can choose from two options: