When it comes to building a website, components are the building blocks that make up the visual elements of your site. You have a variety of components to choose from, including image carousels, text blocks, iFrames, and components that sync directly with your Vagaro business.
There are four types of components:
-
Text Components: Headers and text blocks on your website. You can customize up to three text blocks and four header styles in your global site stylings.
-
Layout Components: The building blocks of your website; used to organize and separate content and keep your website organized.
-
Element Components: Simple components, such as images, videos, and buttons.
-
Vagaro Components: Sync from your Vagaro business and require no maintenance once added. For instance, if you add the Facility Information Vagaro component, it will display all the information set in your Vagaro settings exactly as it appears on your Vagaro Listing Page. Any changes you make to the Facility Information within Vagaro will automatically be reflected on your website.
Placing or selecting components on the editor will open the style pane and allow you to customize how that component looks. This will only update the look of the component you selected, so we recommend that you change the global site stylings on your website to make changes across your website.
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.
Think of the style pane as the "settings" of a component. All components have a preset style applied to them when you first choose your website's style. The style panel allows you to make smaller tweaks to the look and feel of your website. Large-scale changes, like color, should be made in your site style settings.
Some components overlap at some points, so it's important to know what component you're editing. You can view what component you selected at the top of the style pane. You can also view the breadcrumbs of the component you're in. Breadcrumbs allow you to keep track of where you are in your page layout. Select a hyperlink in the style pane to go to its parent component. Here's an example of what breadcrumbs look like in the style pane: Section > Column > Container.
Note
Changes to a component will only affect that specific component, not others of the same type.
Go to Component Types to view a list of all components.
To place a component:
-
Select the Marketing tab, then select View Site to go to the MySite editor.
-
Go to the page to be edited.
-
In the left design panel, select the Components
tab. A list of all components, including Vagaro components, will be displayed.
-
Choose the component you want to place.
-
Select and hold the component, then drag it to the MySite editor.
-
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.
-
Each component can be styled and edited differently. We recommend that you play around with the different components on a hidden page before publishing changes to your live site.
After building your website, you may want to move around or delete some components.
To move a component:
-
Select the Marketing tab, then select View Site to go to the MySite editor.
-
Find and select the component to be moved.
-
Drag and move the component to another place on the page. An indicator displays where the component will be placed.
-
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.
-
To delete a component:
-
Select the Marketing tab, then select View Site to go to the MySite editor.
-
Find and select the component to be deleted.
-
Press the Delete key on your keyboard.
-
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.
-
Comments
0 comments
Please sign in to leave a comment.