Add a Photo Gallery

  • Knowledge Base
  • Responsive Website Builder
  • Adding a Photo Gallery
  • Duda Support > Responsive Site Builder > Editing a Site

Overview

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.

Note: We have deployed a new Photo Gallery widget update. You have the option to update your widget or use the old Photo Gallery widget settings to edit your gallery. If you choose to update the widget, a backup of the site will be created automatically. For more information about how the update affects your photo gallery, please read the Considerations section.photogallery1_en-US.png

Guide

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.

Adding images

Click the 'Add image' button.

photogallery2_en-US.png

Select any of the images you have in the image picker.


photogallery3_en-US.png

From here, you can:

  1. Select the folder with images you want to use
  2. Click the "+" icon to upload your own image
  3. 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.

photogallery4_en-US.png

You can also add links when the buttons are viewable [only available in new widget]. Content is viewable when the eye icon is highlighted.

photogallery5_en-US.png

Customizing your gallery

  • To change the gallery layout, open the Design Editor and click the Layout tab. 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. 

    photogallery6_en-US.png

  • 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 [available on new widget].photogallery7_en-US.png
  • You can 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 [available in new widget].                                      photogallery8_en-US.png
  • To change the font style of the image titles and descriptions, click the Item tab. photogallery9_en-US.png
  • To add a background color, customize the border, and add hover effects and animations, click the Frame tab.

    photogallery10_en-US.png

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

    photogallery11_en-US.png

Considerations (only relevant for the new photo gallery)

Is my gallery widget the new one?

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

What if I don’t want to update my widget?

You do not have to update your widget. You will be able to edit your widget using the previous widget editor as well.

What if I reload a backup or use the undo feature?

If you reload a backup or undo while editing an existing Photo Gallery Widget, you will need to re-update the widget. Keep in mind that if you do choose to update an existing photo gallery widget, a site backup will be created automatically.

The hover effect doesn’t work on Internet Explorer, what can I do?

Unfortunately, Internet Explorer doesn’t support this feature.

How do I hide the ‘share’ option?

You can hide the share option in the Design Editor under the Frame section. This will remove the share button that users would see when clicking on an image in the photo gallery.photogallery12_en-US.png

Resources

  • To learn more about editing widgets, see Editing Widgets.
  • To learn more about adding premium images to your site, check out our guide on Premium Images.

 

×

Please Log in as a DudaPro

Priority Phone Support is available exclusively to DudaPros. Log in to your DudaPro account now to see our international support numbers.

Log In
Not a DudaPro? Buy DudaPro!