What is the Style Designer and how do I use it?

The Style Designer allows you to easily customize the visual design of your website. You can set the colors, fonts and sizes of your site title, navigation, headings, paragraphs and more. The changes made in the 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:

• PRESETS

• COLOR

• FONT

• LAYOUT

• OPTIONS

• BUTTON

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.

 

PRESETS

Selecting a theme helps to instantly transform your site by coordinating a fully designed color palette and font selection.
 

COLOR

Changing the color settings of your site enables you to provide a richer experience for your visitors. Here's what you can customize:
 

Background	This is where you can add a custom background image or color to your site.
Banner Image	This is where you can add a custom banner to your site.
Logo	This is where you can add a logo to your site.
Navigation Background	This changes the background behind your navigation text.
Navigation	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.
Navigation (Selected)	When visitors navigate to a page, the navigation link will change color to indicate which page is being viewed.
Navigation (Hover)	When visitors mouse over a navigation link, the link color will change.
Main Header	This is the page heading, and is displayed at the top of your pages.
Site Tagline	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.
Content Background	This controls the background color in the content area where your widgets are placed.
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.
Paragraph Text	This changes the color of the text within your Text Widgets.
Blockquote Text	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.
Blockquote Background	This allows you to add a background color behind your blockquote.
Link	This setting lets you easily change the color of your text links, and is applied to all the text links.
Link (Hover)	When visitors hover over a text link, the link color will change to one you have specified.
Link (Visited)	Once a visitor has clicked on a link, the display color will change to the one you've set.
Footer	The footer contains your Business location and phone number. You can change the color of the font used for this area.
Footer Background	This sets the color of the footer bar.

 

FONT

Each Font element can be individually edited. To access the font options, click on the element you wish to edit. These are the options you will see:
 

Font Family	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.
Font Weight	Determines the weight or boldness of your text.
Font Size	Determines the size of your font.
Text Decoration	Defines the style of line to be applied to your text. None Underline Strikethrough (puts a line through the middle of your text) Overline (puts a line above your text)
Letter Spacing	Determines the spacing between each letter.
Line Height	Determines the spacing between each line of text.
Text Transform	Changes the capitalization of your text Default Capitalize (The first letter of each word is capitalized) Uppercase (All letters are uppercase) Lowercase (All letters are lowercase) Inherit

 

LAYOUT

This section allows you to control the vertical and horizontal spacing of the various elements of your site.
 

Body Padding	Determines the amount of spacearound the content width. You can select None which will remove all padding.
Navigation Position	Determines the placement of your navigation menu in relation to the banner: Top Bottom
Navigation Spacing	Determines the amount of space in between each link on your menu.
Navigation Padding	Determines the amount of space around the outside of the navigation links. You can select None which will remove all padding.
Banner Width	Controls the width of your banner. This allows you to determine: Outside width Inside width You can also select Fill, which will stretch your banner to the full width of your page.
Banner Padding	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.
Content Width	Determines how wide or narrow you want your content area to be. The content area is where you place your widgets. You can control: Outside Width Inside Width You can also select Fill, which will stretch your content area to the full width of your page.
Content Padding	Determines the amount of space between your outside with and inside with. You can select None which will remove all padding.
Page Alignment	This anchors your page either at the Top, Middle, or Bottom of your site.
Footer Padding	Determines the amount of space around your footer.

 

OPTIONS

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.
Display Footer	Choose to display or remove the footer area.
Display Social Buttons	You can choose to display the social media buttons on your footer.

 

(SMALL, MEDIUM, LARGE) BUTTON

This allows you customize your Button widget. These options will only display if you have utilized the Button widget.
 

Background Color	Set the desired color for your button background.
Font Color	You can choose the font color of the text displayed on your button.
Font	Set your font style for your text. You can control the following: Font Family Font Weight Font Size Letter Spacing Line Height Text Transform
Padding	Determine the amount of space between your text and the edge of your button
Shape	Select what shape button you wish to have. Square Rounded Pill
Style	You can choose from two options: Solid (This will color in the button with the background color you've selected) Outline (This will outline the button with the background color you've chosen, but the button will be white in the middle. The hover color will be filled in with the background color you've chosen).