Support Articles

Stay Connected

Photo Gallery Widget

The Photo Gallery widget makes it easy to add multiple images to your site. When images in the Photo Gallery are clicked, they can be opened in a lightbox gallery or linked to a page on your site, a website URL, a popup, an anchor, an email address or more. You can add titles, descriptions and alternative text to each image.


Add the Photo Gallery widget to your site. To learn more about adding widgets to your site, see Add Widgets. Once the widget has been placed, the Content Editor appears.


Add Images


To add images to the photo gallery widget:


  1. (Optional) To enable links on gallery images, click the Enable links on gallery images toggle at the top of the editor.
  2. Click Add image.
  3. Select any of the images you have in the image picker. Complete the following:
  • Select the folder with images you want to use.
  • Click the + icon to upload your own images.
  • Switch to the Full View for more image options.
    For more information on the image picker, see Image Picker.

  4. To edit the position, and add a title, description, and button to your image, click the image and edit the Image Settings.

  5. Use the Rich Text Editor to add color, emphasis (bold, italics and underline), and bullets to text in the description box.

  6. You can add links when the buttons are viewable (this is only available in the new widget).


Photo Gallery Design Editor


To customize the Photo Gallery, open the Design Editor.


  1. To change the gallery layout, click the Layout tab. You have the following options:
  • Click the existing layout to see more design options for your photo gallery. Layouts are managed per-device and based on the current view in which the layout is selected.
  • Text can be added under images, on the hover, or on the image. Select Text/button under image, Text/button on hover, or Text/button on image, and then select a position for the text/button.
  • Select the Number of columns in the Photo Gallery.
  • To adjust the number of columns automatically to avoid white space, click the Auto adjust columns toggle.
  • Select how many Visible rows you want to display.

  2. To change the image height and spacing between the images, click the Item tab. You can also add rounded corners, display the full image on the gallery, add shadows, and change the image hover effect and animation (available in new widget). This is only applicable for certain layouts.

  3. To configure the frame style, add a background color, and customize the border, click the Frame tab.

  • To hide the share option, click the Hide share images toggle. This removes the share button users see when clicking an image.

  4. To change the inner and outer spacing, click the Spacing tab.


Add an Instagram Feed


Users with an Instagram Business or Creator account can add an Instagram feed to the photo gallery widget. For more information, see Add an Instagram Feed to your Site.


Update the Photo GalleryWidget


If your Photo Gallery has been added after September 24th or if you have updated the widget already, you are using the new gallery widget.


If your Photo Gallery was added before September 24th, you have the option to update your widget or use the old Photo

Gallery widget settings to edit your gallery. To switch to the new photo gallery, click Update Widget. If you update the widget, a backup of the site will be created automatically. If you reload a backup or undo while editing an existing Photo Gallery widget, you will need to re-update the widget.


Note


You do not have to update your widget, and can edit your widget using the previous widget editor.


  • To learn more about editing widgets, see Edit Widgets.


What's

Snappin

Related Articles

By Eddie Cruz 24 Aug, 2021
Expand the capabilities of the website builder with custom HTML. This widget allows you to embed custom code into your site, and can be used to embed third-party widgets such as videos, contact forms, and more. While adding custom code can extend your site's functionality, we recommend you only add code from a trusted source. Only add code if you know exactly what it does and how to troubleshoot it if it does not work. To learn more about using HTML in Developer Mode, see Developer Mode.
By Eddie Cruz 24 Aug, 2021
The editor's interface has three main predefined sections: The top navigation bar, the left panel, and the content area. Each of these predefined sections plays an important role in letting you make your site as awesome as possible.
By Eddie Cruz 24 Aug, 2021
This widget makes it easy for website visitors to send you money using PayPal. You can use the PayPal button both for gathering donations and for selling products.
Share by: