How to Use the Modula Custom Grid Gallery

Modula is a fantastic WordPress plugin for creating galleries. It has loads of options in the Settings section, which makes it very flexible. I especially like the Custom Grid gallery type because of its modular nature: the images can be all the same sizes or a mix of sizes. This guide will show you how to (1) create a new gallery, (2) configure it for a custom grid, (3) add images to it and (4) display the gallery on a page or post.

(1) Getting Started: Create a New Gallery

1. Install the Modula Image Gallery plugin.
2. In left sidebar, click on Modula. You could also hover over “Modula” to reveal its sub-menu and click on “Galleries“. Either way will bring you to the list of galleries.

3. For a new gallery, click on the “Add New” button at the top of the screen. To edit an existing gallery, click on the gallery name or the “Edit” link underneath the name.

4. Type in the name of the new gallery, then click the “Save Gallery” button in the right-hand sidebar.

(2) Configure Custom Grid

Before adding images, let’s configure the gallery. In the free version of the Modula plugin, you have 3 options for Gallery Type: Creative Gallery (default), Custom Grid, and Masonry. The default Creative Gallery and Masonry are very similar and good for situations where all of the images are the same size. The Masonry type gives you the added feature of “Column Type“, which offers a preset number of columns (ranging from 1-6). For this tutorial, we’re configuring a Custom Grid so we can have a mixture of image sizes.

Settings Section

1. Scroll down to the bottom of the screen to the Settings section. Almost all of these settings are a matter of personal choice and how you want the images to be displayed.
   
2. General tab. Leave everything at the default settings, except:
   Gallery Type – click on the dropdown menu and choose “Custom Grid“.
   With the Custom Grid as the Gallery Type, you’ll see a grid of equally-sized grey boxes in the gallery area. Use these boxes to guide you when you start to resize the images.
   
3. Lightboxes & Links tab. Leave the default as is (“Open Images in a Lightbox“). Enable the navigation arrows if you want them to display.
   
4. Captions tab. Enabling “Hide Title” and “Hide Caption” gives you added options for styling the font color and size. However, I’m not a big fan of the way Modula displays the title or the caption, because it places both over the image. The caption appears when the user hovers over the image. Furthermore, the title is the name of the image file and may not be the best visual identifier for a user.

My preference is to use the Caption Text for each image with the Lightbox settings (details below).

5. Social, Loading Effects, and Hover Effects tabs. Leave the defaults as is.
6. Style tab. You can adjust border size, border radius, border color, shadow size, and shadow color.
7. Custom CSS tab. Additional modifications to the styling can be made in this area.
8. Save the Gallery.

Image Captions in Media Library

1. Go to the Media Library. I like to upload all of the images I’ll need to the Media Library before adding them to the gallery. This way, I can write the captions (as well as Alternative Text for good SEO) and have all of the images ready to use.
2. Add captions to all images. In the “Caption” field for each image, type in the title (if wanted) and the caption text. For example:

<strong>Image Title</strong></br>
14"W x 11"H</br>
Image caption goes here.

Lightbox Settings

1. Install Responsive Lightbox & Gallery plugin.
2. In left sidebar, click on Lightbox > General.
3. Change the following defaults:
   • Default lightbox: “Magnific Popup“
   • Gallery image size: Large
   • Gallery image caption: Image caption
4. Save Changes (button at bottom of screen)

(3) Add Images to the Gallery

Now, we’re ready to add images to the gallery!

1. There are 2 buttons for adding images: “Upload Image Files” (to access images from your computer) or “Select From Library” to access images you already uploaded to the Media Library. Either way, make sure you’ve written a caption for each image in the “Caption Text” field as described above. Select the image(s) you want to add, then click the “Add to Gallery” button at the bottom right corner of the screen.
2. Resize Images. When you initially add images to the gallery, they are all the same size. Use the light-grey boxes in the grid area (“Helper Grid”) to guide you when you resize the images. Drag the bottom right corner of an image to resize. The other images will move around as you’re resizing. That’s ok.

3. Reposition Images. You may also want to reposition images, which is easily done by dragging them to a new spot.

4. Save Your Gallery Changes. When finished adding and resizing images, click “Update Gallery” button in right sidebar (underneath “Publish“).

(4) How to Display the Gallery

1. GUTENBERG block editor:
   • Add new block. Search for and select Modula Gallery block.
   • Display an existing gallery > select the desired gallery.
2. CLASSIC editor: use the shortcode provided in the right-hand sidebar (for this example, it’s [modula id=”1397″]).
3. Save or Update the Page or Post.
4. Here’s the Modula Custom Grid that we built for this tutorial:

Related Posts

Cropping Thumbnails in WordPress
Beginner’s Guide to Gutenberg Blocks
Installing WordPress Plugins
Wrapping Text Around an Image in WordPress Gutenberg