With Vagaro MySite, you have access to thousands of royalty-free images from Unsplash. When adding images to your website, you can choose to attach a photo from your computer or search the Unsplash library for photos. Any photos from Unsplash are free to use.
Note
Because Vagaro components are synced over from your business, you must make changes in your business settings to change Vagaro components, such as Venue Gallery and Products.
When uploading images on your MySite, the image should fit the following image requirements:
-
File Format: PNG or JPEG (required)
-
File Size: Less than 2MB (preferred)
-
Image Resolution: Less than 1200px x 1200px (preferred)
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.
Image: Basic, single image component.
Image Slider: Multi-image component that creates a carousel of images.
Before & After: Two images stacked on top of each other so you can compare them.
To replace an image:
-
Go to the MySite editor by selecting the MySite tab at the top of the screen.
-
Select the image component to be changed.
-
In the right style panel:
-
Choose an image from your Image Library.
-
Select Add Photo to add an image from your computer.
-
Select Search Online Library to search Unsplash for free-to-use images.
Note
Image Slider and Before & After components require more than one image.
-
-
Preview and publish the changes to your MySite:
-
To Preview: In the top-right corner, open the Publish menu, then select Preview.
-
To Publish: In the same Publish menu, select Publish.
-
To place an image:
-
Go to the MySite editor by selecting the MySite tab at the top of the screen.
-
In the left side panel, select the Components tab.
-
Drag and drop one of the components within a section, column, or container:
-
Select the Image component to be edited.
-
In the right style panel:
-
Choose an image from your Image Library.
-
Select Add Photo to add an image from your computer.
-
Select Search Online Library to search Unsplash for free-to-use images.
Note
Image Slider and Before & After components require more than one image.
-
-
Style your component as desired.
-
Preview and publish the changes to your MySite:
-
To Preview: In the top-right corner, open the Publish menu, then select Preview.
-
To Publish: In the same Publish menu, select Publish.
-
To resize an image:
-
Go to the MySite editor by selecting the MySite tab at the top of the screen.
-
Select the image to be resized.
-
Select and drag a corner of the image to the desired size.
-
Preview and publish the changes to your MySite:
-
To Preview: In the top-right corner, open the Publish menu, then select Preview.
-
To Publish: In the same Publish menu, select Publish.
-
After adding your image, you can style and change the component to your liking. Keep in mind that each image component has different settings available.
To add an image component:
-
Go to the MySite editor by selecting the MySite tab at the top of the screen.
-
Select the image component to be changed. The right Style pane will display for you to customize.
-
Customize the component as needed
-
Size: Manually set the width and height of the container. Select the Lock button to lock in an aspect ratio (shape).
-
Image: Add, remove, or replace the images used in this component.
-
Alternative Text: Text will show for screen readers and if the image doesn't load.
-
Image Fit: Automatically resize the image based on the size of the container it's placed in.
-
Act a Link: Create an image that can redirect customers to a new page, website, phone number, and more.
-
Link: Enter a URL, Page, Email, Phone, or Scroll To point.
-
Link Behavior: Choose whether to open the link in the same or new tab.
-
-
Advanced Settings: For more advanced users, fine-tune how your image looks.
-
-
Preview and publish the changes to your MySite:
-
To Preview: In the top-right corner, open the Publish menu, then select Preview.
-
To Publish: In the same Publish menu, select Publish.
-
To style an image slider:
-
Go to the MySite editor by selecting the MySite tab at the top of the screen.
-
Select the image slider to be changed. The right Style pane will display for you to customize.
-
Customize the component as needed:
-
Size: Manually adjust the width and height of your image.
Tip
Select the Lock button to lock the aspect ratio (shape) of the image.
-
Image: Add, remove, or replace the images used in this component.
-
Show Controls: Whether customers can cycle through images in the slider. Auto defaults to Show.
-
Autoplay: Whether to automatically cycle through the images in the cycle without customer interaction. Auto defaults to Off.
-
Autoplay Delay: Set how long it takes for each image to cycle. Auto defaults to five seconds.
-
Advanced Settings: For more advanced users, fine-tune how your image looks.
-
-
Preview and publish the changes to your MySite:
-
To Preview: In the top-right corner, open the Publish menu, then select Preview.
-
To Publish: In the same Publish menu, select Publish.
-
-
Go to the MySite editor by selecting the MySite tab at the top of the screen.
-
Select the Before & After component to be changed.
-
In the right style pane, fine-tune how an image slider looks on your webpage. The following options are available:
-
Size: Manually adjust the width and height of your image.
Tip
Select the Lock button to lock the aspect ratio (shape) of the image.
-
Image: Add, remove, or replace the images used in this component.
-
Advanced Settings: For more advanced users, fine-tune how your image looks.
-
-
Preview and publish the changes to your MySite:
-
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.