Website Editor: Quick Guides

Photo Gallery

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

  1. From the Manage Pages section of the navigation (or from the drop down menu in the top left), select the page you want to add the photo gallery to display on.
  2. Go to the Add Element section and scroll to the media tab.
  3. Drag the photo gallery feature into the editing frame.
  4. Once you’ve placed the feature, you’ll need to designate a set of images to display.

Select Images

  1. Click the Add Image button.
  2. Select an image using our choose & place images feature
  3. Press Done.

  chose and place image

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

  1. Click on the photo gallery you want to add this zoom effect to, then click edit.

photo gallery edit

2. Go to Design

design photo

3. Click on the effects tab, then turn on “Image Hover Effect”

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.

  1. Enable “Image Hover Effects” (see instructions on how to do this above)
  2. Open up the photo gallery menu, then go to “Design”

photo gallery design

3. Under ” Text Layout”, set your photo gallery to show ” Text On Image”

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.

enable links

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.

link in 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

edit individual images


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 it’s original size.


Design – 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.

More – 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.