Tutorials

loading...

Tutorial: The Style Designer

The Style Designer allows you to easily customize the visual design of your website, and make it truly stand out.

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 > Settings > Style Designer, and is split up into several sections:
 

Presets

Color

Font

Layout

Options

Button


Please note: Depending on the style you are using, not all features are available. To have the most flexibility and control, we suggest using Super Flat or Skyline.
 

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).