Layout components are used to organize content on your website. Vagaro MySite has four different layout components available: containers, sections, spacers, and columns. Each of these components has a unique functionality within the web builder.
-
Containers: Can be placed within columns and other containers.
-
Sections: Can be placed above or below other sections. These are the building blocks of your website.
-
Spacers: Can be placed within columns and containers. They add and maintain space between different components. You can't place components within a spacer.
-
Columns: Can be placed next to other columns. Placing a new section adds a column to that section.
Prerequisites: This feature requires MySite. To set up your first website, see Getting Started with Vagaro MySite.
Containers provide more control over how you organize content on your website than what a template allows. After you place a container, you can nest multiple components into it.
To add a Container:
-
Select MySite
.
-
In the left Design panel, select the Page
tab, and then select the page to update.
-
Select the Component
tab, and then select the Container component.
-
Drag the container to the MySite Editor.
-
To resize the container, select and drag any of its corners to increase or decrease its size.
Tip
In the right style panel, select the Lock button to lock the aspect ratio (shape) of your container.
-
Preview and publish the changes to your MySite:
-
To preview your MySite, go to Publish, then select Preview.
-
To publish your website, go to Publish, then select Publish.
-
To move or delete a container:
-
Select MySite
-
Select the container to be changed.
-
Move or delete the container:
-
To Move: Drag the container to another spot in the editor.
-
To Delete: Press the Delete key.
-
-
Preview and publish the changes to your MySite:
-
To preview your MySite, go to Publish, then select Preview.
-
To publish your website, go to Publish, then select Publish.
-
To style a container:
-
Select MySite
-
Select the container to be changed.
-
In the right style panel, you can change the following:
-
Size: Manually set the width and height of the container. Select the Lock button to lock in an aspect ratio (shape).
-
Content Order: Organize components nested in a container horizontally (side-by-side) or vertically (top and bottom). Auto is set to Horizontal.
-
Horizontal Align: Adjust components inside the container to the left, right, or center.
-
Vertical Align: Adjust components inside the container to the top, bottom, or center.
-
Spacing: Adjust the amount of space between components.
-
Wrap Content: Components will fill the container and may be cut off. If a component doesn't fit in the container, then it will move to the next line.
-
Advanced Settings: For advanced users, change the section's Background, Effects, Shape, and CSS.
-
-
Preview and publish the changes to your MySite:
-
To preview your MySite, go to Publish, then select Preview.
-
To publish your website, go to Publish, then select Publish.
-
In web design, sections are the building blocks of a webpage. These sections help organize and manage content and make a webpage easy to navigate because they create a structured and visually pleasing layout. They also enhance the overall user experience by improving the page's readability and flow. It's important to divide your website's content into multiple sections.
To add a section:
-
Select MySite
-
On the Pages
-
To create a new section, select the green + button, then select a section template.
Tip
You can also create a new section by dragging and dropping a component above or below a section, but you won't be able to select a section template.
-
To change a section's height, select it, then drag the top or bottom to the desired height.
-
Preview and publish the changes to your MySite:
-
To preview your MySite, go to Publish, then select Preview.
-
To publish your website, go to Publish, then select Publish.
-
To delete or move a section:
-
Select MySite
-
Select the section to be changed.
Note
Depending on how you've organized your website, you may select a column or component. Make sure you have selected the entire section when modifying.
-
Delete or move the section:
-
To Delete: Press the Delete key.
-
To Move: Drag and drop it to another place on the page.
-
-
Preview and publish the changes to your MySite:
-
To preview your MySite, go to Publish, then select Preview.
-
To publish your website, go to Publish, then select Publish.
-
To style a section:
-
Select MySite
-
Select the section to be changed.
Note
Depending on how you've organized your website, you may select a column or component. Make sure you have selected the entire section when modifying.
-
In the right style panel, you can change the following:
-
Size: Change the height and width of the section.
-
Content Width: Specifies how wide content appears on a web page. Select Fit to Page to set the section's content to the maximum width allowed by your global site stylings setting, or select Full Width to stretch the content to fit the entire screen.
-
Reverse Columns on Mobile: Whether to swap the order of columns nested in a section on a mobile device. If the columns on your website display out of order on mobile, try setting this option to Reverse.
-
Section Tag: Creates an anchor for this section. Anchors can be scrolled to with a button.
-
-
Under Advanced Settings, more advanced users can change the CSS, Shape, and Effects of the section.
-
Preview and publish the changes to your MySite:
-
To preview your MySite, go to Publish, then select Preview.
-
To publish your website, go to Publish, then select Publish.
-
Spacers allow you to add space between components without needing to change the padding of other components.
To add a spacer:
-
Select MySite
-
In the left side panel, select the Design Editor tab.
-
Under Layout, select the Spacer component, then drag it to your webpage.
Note
You can't nest other components inside a spacer.
-
To resize the spacer, select and drag any of its corners to increase or decrease its size.
Tip
In the right style panel, select the Lock button to lock the aspect ratio (shape) of your Spacer.
-
Preview and publish the changes to your MySite:
-
To preview your MySite, go to Publish, then select Preview.
-
To publish your website, go to Publish, then select Publish.
-
To move or delete a spacer:
-
Select MySite
-
Select the spacer to be changed.
-
Delete or move the spacer:
-
To Delete: Press Delete on your keyboard.
-
To Move: Drag it to another section or column.
-
-
Preview and publish the changes to your MySite:
-
To preview your MySite, go to Publish, then select Preview.
-
To publish your website, go to Publish, then select Publish.
-
Columns on a web page are like a magazine layout but on a digital screen. They divide the content into vertical sections, allowing for a neat and orderly arrangement. They play a key role in creating a user-friendly and engaging design. If you want to add side-by-side images and text blocks, it's important that you place them using columns.
To add a column:
-
Select MySite
-
In the left side panel, select the Design Editor tab.
-
Under Layout, select the Column component, then drag and drop it to the left, middle, or right of a section or another column.
Note
You can create a new column with other components as well.
-
Select and drag the top or bottom to change the column's height.
-
Preview and publish the changes to your MySite:
-
To preview your MySite, go to Publish, then select Preview.
-
To publish your website, go to Publish, then select Publish.
-
To move or delete a column:
-
Select MySite
-
Select the column to be changed.
-
Delete or move a column:
-
To Delete: Press Delete on your keyboard.
-
To Move: Drag and drop it to another section.
-
-
Preview and publish the changes to your MySite:
-
To preview your MySite, go to Publish, then select Preview.
-
To publish your website, go to Publish, then select Publish.
-
To style a column:
-
Select MySite
-
Select the column to be changed.
-
In the right-side panel, you can change the following:
-
Size: Manually set the width and height of the container. Select the Lock button to lock in an aspect ratio (shape).
-
Content Order: Organize components nested in a column horizontally (side-by-side) or vertically (top and bottom). Auto is set to Vertical.
-
Horizontal Align: Adjust components inside the column to the left, right, or center.
-
Vertical Align: Adjust components inside the column to the top, bottom, or center.
-
Spacing: Adjust the amount of space between components nested in a column.
-
Wrap Content: Components inside a column will fill the container and may be cut off. If a component doesn't fit in the column, then wrapping content will move it to the next line.
-
Advanced Settings: For more advanced users to change the Background, Effects, Shape, and CSS of the section.
-
-
In Advanced Settings, advanced users can fine-tune columns to their liking.
-
Preview and publish the changes to your MySite:
-
To preview your MySite, go to Publish, then select Preview.
-
To publish your website, go to Publish, then select Publish.
-
Comments
0 comments
Please sign in to leave a comment.