The Gallery module allows you to add an image gallery to your web page. You can choose a standard grid layout or a staggered width layout. Fill your gallery with images from My Drive.



Before we begin: Have you checked out the Section feature? Section provides you with a set of 20 beautifully designed web page sections that you can add with a single click, including a Photo gallery Section!

The Photo Section attractively showcases your gallery by adding a title and text area above it, where you can describe your images. It’s all customizable, so you can tweak it to your liking.

To add Section, click the Section tab in the left sidebar, click Add Section to see the options. Single-click on a Section to add it to your page.


If you just want to add a simple image gallery, without the added elements of the Photo Section, follow these steps to add a gallery to your page:


Step 1: Open the target page

In the website builder, open the page of your site that you want to add the gallery module to.


Step 2: Open the Modules tab

In the left sidebar menu, click on Modules:



Step 3: Locate the gallery module icon

In the Modules sidebar, you will see the Gallery module icon.


Step 4: Click and drag the gallery module icon onto your page

Point your mouse at the gallery module, click and drag it onto your page to where you want the image gallery to be located. Then drop it.

As you drag the icon around the page, you will see black lines appear, indicating the edges of the existing elements on the page. Use these lines as guides help you drop your gallery module in the right place. You can add spacers or other elements later to adjust its position if desired, but usually, you will want your gallery to span the entire width of your page.

For this example, we will add a gallery to the About page in the Elenore Designs template, beneath the template’s sample content.

Below you can see the gallery module before it was dropped, hovering over the page. The black line indicates the top edge of the spacer that separates the content elements from the social media buttons. When the gallery module is dropped now, it will insert between the content elements and the spacer.



Step 5: Choose gallery style

You have two choices of gallery style: standard (grid of equal rows and columns) or staggered (variety of image sizes give your gallery a staggered appearance). Click to choose the style. You can change it later at any time in the gallery format options.



You can also check the boxes to Open images in lightbox and to Enable Pinterest. Click the Save button to proceed to the next step.


Step 6: Select the images for your gallery

It’s time to select the images for your gallery. A dual pop-up box will open. On the right side is the images folder of My Drive. On the left side is the Image Gallery box (empty to start with) for your selected images. Double-click images in the My Drive window to add them to your gallery. In the image below, I’ve added two images to my gallery so far.


Tip: Add images in the order you want them to appear in your gallery from left to right, top to bottom, as there is currently no feature to rearrange images inside the gallery.



To remove an image from the Gallery, click the X at the top right corner of the image.

Clicking the Settings button returns you to the previous pop-up box, in Step 5.

When you’ve added all your images, click the Save button to continue.


Step 7: Review your gallery

Your new gallery is added to your page. In this example, we added a 9-image gallery in standard style.


Tip: To move the video module around, including removing it to the trash can, click the thick black grab bar in the center-top and drag it.



Note: Since we added this module directly below an existing photo and text box, there is no space in between them. We can use the photo gallery’s padding option to add some space, or for a greater delineation between elements, you can add a breaker module (line) or spacer module (adjustable amount of space).


Step 9: Gallery module formatting options

Click inside the gallery to open the format options bar beneath the gallery.


Here’s a closer look at the options bar.


Here’s a brief description of these options:


Padding is the amount of white space around your gallery. Your padding options are: None, Small, Medium or Large.


Clicking this icon opens the settings box, which contains all the same settings as before in the set-up process: standard vs. staggered gallery style, open images in lightbox, and enable Pinterest.

My Drive

Clicking My Drive opens the dual pop-up box from Step 6 where you can select or remove images for your gallery.


Step 10: Saving the changes

Once you have finished with your gallery, remember to click the Save button at the bottom center of the modules sidebar to save and protect your changes.


This concludes our guide How to add a gallery module.





Did this answer your question?