Step One

To start adding a gallery, navigate to the page you want to edit in the admin area.

Step Two

Click the blue ‘Frontend Editor’ button. This will bring you up to the Frontend Editor page, where you can see a live update of website changes that you make on the page.

Step Three

Click on the ‘+’ plus button to add the gallery.

Step Four

Select the ‘Media Grid’.

Step Five

Once the ‘Media Grid Settings’ box opens, click the Image ‘+’ box.

Step Six

If you already have the photos uploaded to the Media Library, click on the images that you want in the gallery.

Alternatively, if you haven’t already uploaded the images, click ‘Upload Files’ to upload the images to the Media Library. Once they are uploaded, you can select the ones you want to add.

Click on the ‘Add Images’ button.

Step Seven

Your images should now all show in the ‘Media Grid Settings’ box.

Under where it says ‘Display Style’ click the dropdown box and select ‘Lazy loading’. This will increase the loading times of the gallery page.

Step Eight

Click the ‘Save Changes’ button and then the click the exit ‘x’ button on the ‘Masonry Media Grid Settings’ box.

Step Nine

You will now be able to see the gallery on the live view. You can click on the images, to see them enlarged.

Step Ten

Remember to press the light blue ‘Update’ button in the top right hand corner of the Frontend Editor.