In your MySite settings, you can control the base style settings for some of your components. Keeping a consistent style between the different headers can help organize content on your web pages. Rest assured that the components you've previously changed will not be affected. See Cascading Style Rules to learn more.
Prerequisites: This feature requires a MySite subscription and the web, tablet, or Pay Desk version of Vagaro. To set up your first website, see Getting Started with Vagaro MySite.
To set to global site styles:
-
Select the Marketing tab, then select View Site to go to the MySite editor.
-
In the left design panel, select the Settings
tab.
-
Select Site Styling.
-
Customize your site stylings.
-
Preview and publish the changes to your live website:
-
To Preview: In the top-right corner, open the Publish menu, then select Preview.
-
To Publish: In the same Publish menu, select Publish.
-
Customize and make changes to your fonts, colors, headers, and more.
The style you selected has a preset font pair for your headings and paragraphs. Font pairs with good synergy can create a visual hierarchy for your website in order to distinguish between headers and body paragraphs. Under Custom Font Pair, you can customize the fonts you want for your website's Headings and Body. If you aren't sure what fonts you want to use, you can also select a preset pair, like Oswald and Source Sans Pro.
Note
Selecting Auto sets the font pair to Proxima Nova, the font Vagaro uses.
Depending on the style you select, the system will auto-populate one background color, one font color, and ten color shades in your palette. Components on your website use colors from the color palettes, so changes to the palette will affect all components in your entire website that use that color.
The colors you add to the color palette can be applied to components whenever you need to change a component's color. This allows you to keep a consistent color scheme across your website instead of selecting a new color for each component you add.
Tip
Vagaro recommends writing down the name and hex code of each color before changing colors, in case you want to change them back.
To change color styles:
You can change the styling for each header type in the hierarchical structure.
You can change the following heading style settings:
-
Select the H1, H2, H3, or H4 tabs to switch between the different header types.
-
Font Size: Set the size of your headers to Auto, S (small), M (medium), L (large), or select a custom font size by selecting the Gear
Note
1.0 em converts to 16-point font.
-
Font Color: Set the font color for the header in the color picker, or select one of your pre-configured colors from the color palette.
-
Text Align: Set where your heading will be displayed on the webpage, or select Auto to align the header based on the container it's in.
-
Advanced Settings: For advanced users, fine-tune how your headers look.
-
Select Reset to Default to revert all changes made back to their original settings.
You can change the styling for each paragraph type in the hierarchical structure. Vagaro recommends that you style your paragraphs similarly to your headings.
To change paragraph styles:
-
Select the P1, P2, or P3 tabs to switch between the different paragraph types.
-
Font Size: Set the size of your paragraphs to Auto, S (small), M (medium), L (large), or select a custom font size by selecting the Gear
Note
1.0 em converts to 16-point font.
-
Text Align: Set where your heading will be displayed on the webpage, or select Auto to align the paragraph based on the container it's in.
-
Font Color: Set the font color for the paragraph in the color picker, or select one of your pre-configured colors from the color palette.
-
Advanced Settings: For advanced users, fine-tune how your paragraph looks.
You can change the styling of three buttons: Primary, Secondary, and Tertiary. These three button types can each have a different styling. We recommend that you style your buttons to fit the rest of your website's design.
To change button styles:
-
Select the Primary, Secondary, or Tertiary tabs to switch between the button types.
-
Font Color: Set the font color for the text inside a button. Open the color picker and select a color from your palette. You can also select a new color from the color picker as well.
-
Background Color: Set the background color for your button in the color palette, or choose a new color.
-
Advanced Settings: For advanced users, fine-tune how your buttons look.
You can change the styling of how hyperlinks look on your website.
To change link styles:
-
Font Size: Set the size of your hyperlinks. You have the options of Auto, S (small), M (medium), L (large), or select a custom font size by selecting the Gear
Note
1.0 em converts to 16-point font.
-
Text Align: Set how your links will display on the webpage. Set this setting to Auto to align the link based on the paragraph element it's in.
-
Font Color: Set the font color for the linked text in the color picker, or select one of your preconfigured colors from the color palette.
-
Advanced Settings: For advanced users, fine-tune how your links look.
Comments
0 comments
Please sign in to leave a comment.