Articles in this section

See more

What is Style Designer and how to use it

  • Updated
Follow
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 the 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.

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 about 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 in 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 space around 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 to 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).