Modula is a WordPress gallery plugin that moves beyond the basic grid layout WordPress gives you by default. Its custom grid (Modula’s signature feature) lets you set exact pixel dimensions for each individual image rather than forcing every photo into identical grid cells – the result is a dynamic layout where a wide landscape photo gets more horizontal space and a tall portrait gets more vertical space, like a professionally designed editorial photo spread. This guide covers the complete setup from creating your first gallery to optimising it for page speed.
Gallery Types and When to Use Each
Modula free includes three gallery types. The Custom Grid lets you drag images to resize them individually – the most distinctive option and the one that justifies Modula over simpler gallery plugins. The Creative Gallery applies a fixed algorithmic layout with varied sizing. The Slider view displays images as a slideshow. Modula Pro adds Masonry (pins-style with varied heights), Horizontal layout (scrolls sideways), and Polaroid (rotated photo effect).
Choose Custom Grid when you want complete control over how each photo displays – useful for photography portfolios where image composition matters. Choose Masonry (Pro) for large image collections where you want automatic varied-height layout without manually sizing each image. Use Slider for hero-style single gallery presentations on landing pages.
Step 1: Create a Gallery
Go to Modula -> Galleries -> Add New. Name the gallery and upload your images via the image uploader. After uploading, each image appears as a draggable tile in the gallery editor. In Custom Grid mode, hover over any image to see resize handles – drag the corners to change its relative size. Images you want to feature prominently (a hero shot, a striking composition) get more space; supporting images get less.
Add captions and links to individual images by clicking the edit icon on each tile. Captions appear on hover in the default configuration. Links can point to the full-size image (for lightbox) or to any URL (for portfolio pieces linking to project pages).
Need help setting up media on your WordPress site? Describe your project and get a free estimate.
Step 2: Configure Hover Effects
Go to the gallery’s Appearance tab. Modula free includes several hover effects: a title overlay that slides in from the bottom, a full overlay with caption, zoom, and a few others. Configure:
- Hover effect – which animation triggers on mouse-over
- Overlay color – the background color of the caption overlay (semi-transparent is standard)
- Hover color – the color tint applied to the image on hover
- Caption font size and color – how caption text appears on hover
Keep hover effects subtle for photography galleries where the images are the focus. More prominent effects work for portfolio galleries where context and captions add value.
Step 3: Lightbox Configuration
The lightbox opens a full-screen view of the clicked image. Go to the Lightbox tab in gallery settings. Configure:
- Lightbox type – Modula’s built-in lightbox or a custom link
- Show captions – display caption text in the lightbox view
- Navigation arrows – allow browsing to next/previous images in lightbox
- Deep linking – each lightbox image gets a URL fragment, making individual images shareable
For photography sites where visitors browse full-resolution versions, enable lightbox with navigation and deep linking. For portfolio sites where you link images to project pages, disable the lightbox and configure each image with a custom URL.
Step 4: Performance Settings
Galleries are image-heavy and affect page load time significantly. Go to the Speed tab. Enable Lazy Load – images below the fold load only when the visitor scrolls toward them, reducing initial page weight. Enable Image Optimization if you have not optimised images separately (though a dedicated image optimisation plugin handles this better than a gallery plugin).
For galleries with many high-resolution images, the most impactful performance improvement is image size. Upload images at the maximum size they will display at – a gallery showing 400px wide thumbnails does not need 4000px source images. Resize images before uploading rather than relying on WordPress or Modula to scale them down server-side.
Embedding the Gallery
Modula generates a shortcode for each gallery: [modula id="X"] where X is the gallery ID shown in the gallery list. Paste this shortcode into any post, page, or widget. Modula also adds a Gutenberg block for inserting galleries without shortcodes. For Elementor, use a shortcode widget with the Modula shortcode.
Common Mistakes That Hurt Gallery Appearance
Three mistakes account for most poor-looking Modula galleries. The first is inconsistent image aspect ratios in the custom grid. When images with wildly different proportions (a 1:1 square next to a 16:9 panoramic) share a row in the custom grid, the visual result feels disjointed. Either crop images to consistent ratios before uploading, or group similar proportions together in the grid arrangement.
The second is uploading images at different resolutions. If one image is 800px wide and the next is 4000px wide but they display at the same size in the gallery, the 800px image appears noticeably softer. Upload all gallery images at a consistent resolution – 2000-2500px on the longest edge covers retina displays without excessive file size.
The third is hover effects that compete with the image content. A heavy color overlay on a colorful photograph obscures rather than enhances. Use subtle hover effects on photography galleries and reserve stronger effects for portfolios where the caption information adds value beyond the image itself.