Put your photos into a gallery which automatically generates and displays thumbnails of your images. Just click and image to display the gallery.
Add Photo Gallery
Adding hover effects
Adding hover effects to a page is a great way to make a website much more interesting. It allows the user to physically interact with your site and allows you to bring attention to your content.
Using the photo gallery element, you can add hover effects that animates and image or show your caption content when a user hovers over it.
Adding a ‘zoom’ effect
2. Go to Design
3. Click on the effects tab, then turn on “Image Hover Effect”
4. Then hit DONE! There will now be a “zoom” effect whenever a user hovers over an image in your image gallery.
Text Hover Effect
If you have captions on your images, you can also add a hover effect that shows you text captions whenever a user hovers an image. Follow the steps below to do this.
3. Under ” Text Layout”, set your photo gallery to show ” Text On Image”
4. Hit done. Now when a user hovers over an image, the caption text will display. If you do not have any caption text or titles set up, you will need to do so in order to see this effect.
Add links to gallery images
Adding links to gallery images. Click an image in the image gallery to be taken to the toggle that can be turned on to enable links in images.
Once a link is set up in an image in the gallery the user will be linked to the URL that is set up in the image.
The photo gallery element comes with a variety of options that you can tweak to fit your website’s design. Those options are divided into three tabs: General, Design and More.
The General Tab is where you would choose to add, delete or crop images.
To add an image, simply click on square that says “Add Images”. If you have many images, you may have to scroll down to find this option.
Hovering your mouse over any of the images in this menu will reveal additional options for each image
Caption Background and Border: Set a new background for your captions. You can use either a photo or color for the background. To change these settings, click the pencil icon to the right.
Caption Layout: Control whether the caption text and title display below the image or directly on the image.
Caption Padding: Set the padding for your captions. This is useful if you want to add more space to the caption area.
Image Alt Text: If an image is unable to load on the site, you can set alternate text to be displayed instead.
Design – the design tab is where you will find options for styling your photo gallery.
Text Layout: Control whether the text goes below the image or on top of the image.
Fit to frame: Controls whether the image “fills” the frame entirely (no white space) or fits according to the image’s dimensions.
Visible Rows: Set the number of rows that are displayed. If you have more images than there are rows, then a “View all images” button will be shown at the bottom of your photo gallery.
Number of columns: Set the number of columns that are displayed.
Spacing between thumbnails: Adds space between thumbnails.
Background Image: Set a background image. You can control certain properties, such whether the background image stays static or the background position.
Border: Set a border. You can control the border color and thickness.
Image Entrance Animation: Add an animation for your photo gallery images when the photo gallery appears on the screen.
More – usually for advanced users. You can find the settings for the margin, padding, CSS and HTML here.