- Add Photo Gallery to Responsive Website
- Duda Support > Old Responsive Site Builder > Editing a Site
Put your photos into a gallery which automatically generates and displays thumbnails of your images. Just click an image to display the gallery.
Add Photo Gallery
- From the Pages & Popups section of the DudaOne editor, choose the page you'd like your photo gallery to display on.
- Go to the Add Element section and scroll to the media tab.
- Drag the photo gallery feature into the editing frame.
- Once you've placed the feature, you'll need to designate a set of images to display.
1. Click the Add Image button.
2. Select an image using our choose & place images feature.
3. Press Done.
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 Duda's photo gallery element, you can add hover effects that animates an image or show your caption content when a user hovers over it.
Adding a "zoom" effect
1. Click on the photo gallery you want to add this zoom effect to, then click edit.2. Go to Design.
3. Click on the effects tab, then turn on "Image Hover Effect"
4. 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 your text captions whenever a user hovers an image. Follow the steps below to do this.
1. Enable "Image Hover Effect" (see instructions on how to do this above)
2. Open up the photo gallery menu, then go to “Design”.
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
In the edit tools for the image gallery, you will find a switch that can enable links in images. When enabled, a link icon will appear under the images and indicates that you can add links to them.
Choose whether the image link should take users to a page on the site, on external site, in a file or for sending an email.
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 the 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.
|Delete||Deletes an image from the photo gallery
(Brings you to a new menu)
|Caption Text: The caption text. This is where you would put the description of an image. You can control the font settings by clicking the edit button (square pencil icon) to the right.
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.
(Brings you to a new page)
|Crop your image. Note that can re-crop your image as many times as you want and even crop it back to its original size.
The design tab is where you will find options for styling your photo gallery.
|Layout||Layout style This option is display as two rectangles in this menu. You can have it so that the photo gallery is displayed in an even square pattern or displayed depending on the image's dimensions (mosaic pattern).
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.
|Color||Background: Set a background color. Set it to transparent (square with a diagonal line running through) if you don’t want a background color.
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.
|Effects||Image Hover Effect: Add a “zoom” image effect over a photo when someone hovers over an individual image.
Image Entrance Animation: Add an animation for your photo gallery images when the photo gallery appears on the screen.
Usually for advanced users. You can find the settings for the margin, padding, CSS and HTML here.
|Spacing:||Set the height and margin of the element.|
|CSS:||Change the element's CSS.|
|HTML:||Change the element's HTML.|