Grid Gallery

On this page:

  1. Adding a grid gallery
  2. Creating a masonry layout gallery
  3. Changing the order of images
  4. Tags
  5. Deleting a grid galley from a page

The Grid Gallery allows you to display a number of pictures in a symmetrical grid or offset masonry view. Grid Galleries are a great way to showcase your products, portfolio or services. You can display images only in the grid or have them popup as larger images when they are clicked on.

Adding a grid gallery

Steps to add a Grid Gallery to your page:

  1. Select the page on which you’d like to add the grid gallery to.
  2. Click on the ‘+Add Element’ Icon on the Page's Header Bar.
  3. Drag and Drop the Grid icon (under Gallery) onto the area of the page that you want it to appear in.
  4. Click on the Settings Icon.
  5. Create a new Grid Gallery by adding the pictures you want through the file manager displayed.
  6. Click on the settings tab to edit gallery display settings.
  7. Click 'Apply'

You have now added a grid gallery to your page.

How to add a pre-made gallery

Premade galleries, are galleries that already have their layout set, and can be found under 'Pre-filled sections'.

How to manually create a gallery

This method is for when you want to create a gallery from scratch.

Grid gallery settings

Gallery title The title of your Gallery. Used for your admin purposes only.
images per row With this setting, the gallery will automatically calculate the width of each image to fit the space where it is inserted.
Isotope Isotope serves multiple functions:

  1. Turning this function on provides a nice shuffle effect with your images on page load
  2. It allows the change of layout with the next function, 'masonry'
  3. It allows for tags which are used for filtering
Masonry Masonry will only appear if 'Isotope' is turned on.

Image galleries are usually built using different types of images with varying dimensions. It can be challenging to create a set of images with the same dimensions, without losing parts of the image. Because of this, Masonry layouts are a great choice for creating galleries using images with varied dimensions.
Square images When you choose the square image setting, it will crop your image within the thumbnail to give your gallery perfectly square images. If you have the popup image showing it will still retain its correct proportions.
Image height Sets the image height. This is disabled if you select Masonry.
Popup large image This setting turns on popping up larger images when clicking on the thumb image. Where images are larger than full screen they will adjust to fit the screen.
Gallery margin This setting controls the different space between gallery images.

Creating a masonry layout gallery

A masonry gallery is also based on grid layout, but unlike fixed grid layouts, images do not have fixed heights. This layout choice provides a nice and interesting variation on the standard grid layout.

Masonry Gallery

Help Video

Changing the order of images

Images can be moved around using drag n drop in the settings interface. Once applied the layout will automatically change in both the admin area as well as the front end of your site.

Tags

Tags can be added to each image to provide a filtering of your category based on the associated tags.

Tags will only display on your gallery if 'Isotope' has been selected on your settings

There are 2 steps to use tags.

1. Creating tags

Tags can be created by:

  1. Open your gallery settings
  2. Navigating to the icon in the top right corner tab with the 4 squares.
  3. Click 'add new tag'
  4. Save
  5. Repeat that until you have all required tags

2. Applying tags

  1. Open your gallery in edit mode
  2. Click on the pen icon in the middle of your image thumb
  3. Scroll down till you see 'tags'
  4. Select the tags you want to use (multiple tags can be selected by clicking on each)
  5. Save

You'll now see the filters at the top of your gallery.

If no tags have been applied to any images, these filters will not show.

Deleting a grid galley from a page

  1. Select the page from which you would like to delete the Grid Gallery from.
  2. Hover your mouse on top of the Grid Gallery.
  3. Select the bin icon to delete the Grid Gallery from your page.

You have now deleted the Grid Gallery from your page.

Can't find the answer you are looking for?

Try using searching below: