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 the site-level. This means that you only need to adjust the setting once, and it's automatically applied to all of your pages.
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 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, and is split up into several sections:
Presets
Color
Font
Layout
Options
Button
Please note: Not all features are available on every template. Depending on the template you are using, some options will not display. 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 that 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.
|
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
|
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:
|
Navigation Spacing |
Determines the amount of space 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:
|
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:
|
| 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:
|
Padding |
Determine the amount of space between your text and the edge of your button. |
| Shape | Select what shape button you wish to have.
|
| Style | You can choose from two options:
|