The Photo Gallery widget makes it easy to add multiple images to your Website. When images in the Photo Gallery are clicked, they can be opened in a lightbox gallery or linked to a page on your Website, a Website URL, a popup, an anchor, an email address or more. If you like, you can add titles, descriptions and Alternative Text to each image.
Add the Photo Gallery widget to your Website Builder. To learn more about adding widgets to your Website, see Adding Widgets. Once the widget has been placed, the Content Editor will appear.
Click the 'Add image' button.
Select any of the images you have in the image picker.
From here, you can:
- Select the folder with images you want to use
- Click the "+" icon to upload your own image
- Switch to the Full View for more image choice options
See the image picker article for more information on the image picker.
You can add titles, text and buttons to your images in the gallery. Add these features by clicking on the image and editing the image settings.
Use the Rich Text Editor to add color, emphasis (bold, italics and underline), and bullets to text in the description box.
You can also add links when the buttons are viewable. Content is viewable when the eye icon is highlighted.
Customizing your Photo Gallery
- To change the Photo Gallery layout, open the Design Editor and click the Layout section. We have multiple layouts to choose from to provide more design options to your Photo Galleries. Layouts are managed per-device and based on the current view in which the layout is selected.
- Text can be set under images on the hover, or on the image in the Layout tab. You can change the text and button positions as well as button styling and size.
- You can also change the image height and spacing between the images. Note that this is only applicable for certain layouts. You can also add rounded corners, display the full image on the gallery, add shadows, and change the image hover effect and animation.
- To change the font style of the image titles and descriptions, click the Item tab.
- To add a background color, customize the border, and add hover effects and animations, click the Frame tab.
- To change the inner and outer spacing, click the Spacing tab.
- To learn more about editing widget, see Editing Widgets.