Modula Pro - WordPress Plugin

Guide to Setting Up and Using Modula Pro

Modula Pro is best viewed not as a simple replacement for the default WordPress gallery, but as a practical tool for sites where images need to be managed deliberately: a photographer's portfolio, a studio work catalog, a real estate listing showcase, an event media gallery, a product display, a private client gallery, or a long page built around visual examples. This guide focuses not on marketing copy, but on practical use: what to check before installation, how to build your first gallery, which grid type to choose, how to configure filters, the lightbox, the mobile layout, image protection, performance, and final verification.

The core idea behind Modula Pro is simple: you build a gallery in the plugin's own interface, choose how it should be displayed, configure how the images behave, and then publish the result through a block, shortcode, or a theme-supported page layout. In practice, the quality of the final result depends not on a single Save Gallery click, but on a series of decisions: which images you uploaded, which grid type fits the content, whether filters are needed, how the lightbox should open, how many images to show on mobile devices, and which settings should not be enabled without a clear reason.

This guide is written for users who already have the plugin or are deciding whether it is worth testing. That is why it does not cover purchasing, payments, or license workarounds. The focus here is on safely configuring a product you already have, checking the result, and handling common situations where the gallery may not look the way you expected.

Throughout the guide, you will see English interface labels. That is normal: in both Modula and WordPress, many admin panel elements appear exactly that way. Labels such as Modula, Add New, Settings, Save Gallery, and Responsive are shown as-is so they are easier to match with what you see on screen.

What the Plugin Is For and Who It Fits Best

Modula Pro is useful when a basic image grid is no longer enough. The built-in WordPress gallery block works for simple image sets, but it quickly becomes limiting when you need to control the grid, display images in a lightbox, add filters, build a private client gallery, show video alongside photos, protect work with a watermark, or speed up large media collections. Modula Pro expands that workflow by turning the gallery into a separate entity with its own settings instead of just a group of images inside a single post.

The best use case for Modula Pro is a visually driven site where the gallery is part of the user experience, not just decoration. A photographer may care about curation, proofing, the lightbox, and watermarking. A designer or agency may need a clean grid with filters by project type. A real estate professional may benefit from the BnB layout, where a property is shown through one large image plus supporting images. A WooCommerce store may need a more expressive product gallery with multiple viewing angles. An educational site may rely on captions, EXIF data, or mixed photo-and-video galleries.

The plugin is especially useful if you regularly create multiple galleries and want to reuse settings. The Pro feature set includes tools that help you avoid rebuilding the same setup over and over: reusable defaults, bulk edit for large batches of images, filters for larger collections, Speed Up for image optimization, and extensions for watermarking, image proofing, deeplinking, downloads, albums, and other tasks. That does not mean everything should be turned on at once. A good setup starts by choosing the smallest feature set that actually fits the page.

There are also situations where Modula Pro may be more than you need. If the site only has one small set of three images with no lightbox, no filters, and no special requirements, the default WordPress block or your theme's built-in options may be enough. If you need a full digital archive with tens of thousands of images, collection-level permissions, complex taxonomy, and external storage, it is worth checking in advance whether a dedicated media management solution would be more practical. If you need strict eCommerce logic with file sales, orders, licenses, and customer accounts, Modula may cover part of the visual workflow, but the financial and store-side logic should usually be handled by WooCommerce or another specialized tool.

How to Tell Whether It Fits Your Site

Before installing it, define a concrete outcome rather than saying you just need "a nice gallery." For example: "Show 30 studio projects, split them with filters by project type, open each project in a lightbox, keep two columns on mobile, and verify that the images are not blurry." That kind of goal immediately tells you which settings matter most: grid type, filters, lightbox, responsive behavior, image sizes, and mobile testing.

• Portfolio. Custom Grid or Creative Gallery, balanced spacing, captions, lightbox support, responsiveness, and clear project organization matter most.
• Photo sessions and client proofing. Image Proofing, privacy controls, minimum and maximum image selections, invitations, and verification that the client only sees the intended gallery are especially useful.
• Real estate and rentals. It makes sense to test the BnB layout, a strong lead image, clear room labels, and a stable mobile view.
• Product or service catalogs. Filters, lightbox support, loading speed, and clean behavior alongside your theme or WooCommerce are important.
• Visual storytelling and educational content. You may benefit from mixing photos and video, captions, EXIF data, deeplinks to specific images, and easy lightbox navigation.

If none of those use cases fits your scenario, there is no reason to enable complex extensions "just in case." The simpler the gallery, the easier it is to maintain, retest after updates, and explain to site editors.

What to Check Before Installation and First Launch

Preparation saves more time than most people expect. Gallery issues often come not from the plugin itself, but from source images, conflicts with optimization plugins, overly aggressive caching, a narrow theme container, or trying to display an overly heavy image set without limiting the number of images. Before installation, it is worth doing a short technical review and deciding what quality level the public page actually needs.

Check WordPress, the Theme, and the Editor

Modula works inside the WordPress admin and appears on the front end through a shortcode, a block, or editor integration. So start by making sure the site can reliably open the Media Library, the post editor, and pages that contain galleries. If the theme already breaks standard images, uses custom containers with poor width handling, or disables standard WordPress hooks, the gallery may also behave unpredictably. For testing, it is best to create a separate draft page with no unnecessary blocks, place one gallery on it, and only move it into a more complex layout after that works.

If the site uses Elementor, Divi, Beaver Builder, SiteOrigin, or another builder, test two output methods: the Modula block if it is available in your editor, and a standard shortcode like [modula id="123"]. The shortcode often remains the most universal method because you can place it in a text block, widget, post template, or builder field. There is no need to manually edit theme files.

Source Image Quality

Modula cannot make an image look sharp if it was already uploaded at a small size or with heavy compression. The documentation on blurry images explicitly notes that in Creative Gallery, setting the minimum image size too low can lead to blur, and in Custom Grid, image size settings should be checked carefully. That means preparation starts with the source files: upload images that are large enough, give them clear names, avoid mixing dozens of random aspect ratios in one gallery without a reason, and decide in advance where captions are actually needed.

For a portfolio, it is usually better to upload images with enough width to spare, but not drag in extremely heavy originals without optimization. If you plan to use a lightbox, users will open the image larger than the thumbnail, so an undersized file will expose the problem immediately. If you only need a compact grid on the page, overly large files become unnecessary overhead. The balance between quality and speed matters more than maximum resolution for its own sake.

Cache, Optimization, and Lazy Loading

Galleries depend on CSS and JavaScript. Optimization plugins such as WP Rocket and Autoptimize can combine, defer, or minify files in ways that prevent the gallery from rendering correctly. Modula has separate articles covering WP Rocket compatibility and conflicts with Autoptimize. That does not mean you cannot use those plugins. It means the gallery should be tested with caching enabled, and when problems appear, you should check exclusions first instead of randomly changing the gallery design.

Practical check: before publishing, create a test page with a single gallery, clear the site and browser cache, open the page in an incognito window, and then test it on mobile. If everything looks correct in the admin but the images do not appear on the live page, start by checking JavaScript optimization, lazy loading, and the browser console.

Editor Permissions and Workflow

If editors will be managing galleries, decide in advance who can create, edit, and publish them. The Pro features mention role management, which means permission control by user role. That is useful on agency, magazine, and studio sites where a designer may build a gallery but should not be allowed to change global site settings. Even if you do not configure roles immediately, define a simple workflow rule: one person handles source image uploads, another manages captions and filters, and a third verifies the public page.

Installation, Gallery Creation, and Page Output

The basic workflow for building a gallery in Modula consists of four actions: open Modula in the admin panel, create a new gallery, add images, save it, and display the result on a page. In the official documentation, the process starts at WordPress Dashboard > Modula > Add New. After saving, the plugin generates a shortcode and also supports insertion through the Gutenberg Modula Gallery block.

Build Your First Working Gallery

Do not start with the final portfolio. Start with a test gallery containing 8 to 12 images. That is enough to see the grid, test the lightbox, check mobile behavior, and detect cache conflicts. A set that is too small will not reveal filter or spacing issues, while a set that is too large makes troubleshooting harder from the start.

1. Open the WordPress admin panel and go to Modula.
2. Click Add New and give the gallery a clear name. The name should help the editor, for example Portfolio - Interior Projects, not just Gallery 1.
3. Upload images or select them from the Media Library. After upload, drag the items into the order you want.
4. Check captions, alt text, and titles. Even if you are not showing captions in the grid, they may still matter for the lightbox and accessibility.
5. Choose the gallery type, then save it with Save Gallery or Update Gallery.
6. Copy the shortcode or insert the Modula Gallery block into the target post or page.

At this stage, do not enable every Pro extension. First get a stable baseline: the gallery is visible, images open correctly, the grid does not break, the mobile version does not collapse into a random long column, and the page does not become noticeably slower. Only after that should you add filters, watermarking, proofing, Speed Up, or deeplinking.

Block or Shortcode

If the page is built in the block editor, it is usually more convenient to insert the Modula Gallery block and choose the gallery from the list. That is easier for editors because they see it as a standalone block and can move it within the page. If the page lives in the classic editor, a widget, or a builder field, use the shortcode instead. The documentation gives an example like [modula id="1192"]; your site will use a different ID.

The shortcode is also useful for troubleshooting. If the gallery does not display inside a complex builder block, place the same shortcode on a clean test page. If it works there, the problem is most likely in the container, CSS, or page optimization. If it fails everywhere, check the gallery settings, the browser console, cache, and plugin conflicts.

What to Check Right After Saving

After the first save, open the public page instead of relying only on the admin view. The gallery may look correct in the editor while the live theme changes the container width, applies its own image styles, or conflicts with JavaScript. Check the following:

• The gallery appears on the page without an empty block and without a delay that looks like a rendering error.
• Images open in the lightbox if that mode is enabled.
• Buttons, arrows, and lightbox closing work with a mouse, keyboard, and touch screen.
• Captions do not push the image off the screen.
• The mobile version shows a predictable number of columns or otherwise adapts cleanly.
• The result does not change unexpectedly after clearing cache.

How to Choose the Gallery Type: Creative, Custom Grid, Masonry, BnB, Slider, and Video

One of Modula Pro's strengths is that it offers multiple gallery types. They should not be chosen based on which demo looks prettier. The gallery type determines what kind of job the plugin will do: arrange images automatically, give you manual control over the grid, build masonry columns, present a property-style BnB layout, turn the set into a slider, or mix photos with video. If you get this choice wrong, every later setting will only mask the mismatch.

Creative Gallery

Creative Gallery works well when you want an expressive grid without manually arranging every image. The algorithm organizes thumbnails within the available space, while you control gallery height, image size, randomness, and the number of images shown. This type is useful for creative portfolios, blog image collections, moodboard-style pages, and situations where some grid variation does not get in the way of the message.

The key limitation is that Creative Gallery does not give you precise control over the size and shape of each item. If a client wants one specific image to be twice the size of the surrounding ones, Custom Grid is a better fit. If you need clean, predictable columns of images with different heights, look at Masonry. Creative Gallery works best when you trust the algorithm and want a quick way to create a lively visual rhythm.

Settings Worth Checking

For Creative Gallery, gallery height, minimum image size, and randomize factor matter especially. If the thumbnails look blurry, do not start with CSS. First increase image size in the gallery settings and check the source files. The documentation notes that setting the minimum too low can prevent images from rendering sharply. The exact value depends on the design, but the logic is simple: the larger the cells on the page and in the lightbox, the more quality headroom you need.

Custom Grid

Custom Grid is Modula's most product-specific mode for users who want full manual control over the layout. You can adjust the height, width, and proportions of images inside the container to build a grid around a specific visual concept. For portfolios, this is often the best option: you can make the primary project larger, place secondary details next to it, and arrange image sequences with a deliberate rhythm.

This mode requires more attention. If an editor accidentally stretches a small image across a large area, it will look worse. If the base cell size is too small, larger items may lose sharpness. If the spacing is too tight, the gallery can start to feel visually noisy. Custom Grid gives you control, but every result should be checked on the live page.

Masonry

Masonry works well for collections of images with mixed aspect ratios when you do not want to crop each image manually. The grid flows in columns like a visual feed. Key settings include the number of columns, row height in automatic mode, last row alignment, spacing, gallery width, image size, and crop behavior. If you have many photos with different heights, Masonry often feels more natural than a strict grid.

That said, Masonry is not always the best choice for presenting premium work. If visual emphasis matters, Custom Grid is usually better. If all images share the same format, Masonry may feel too random. If too many items appear on mobile, review the responsive settings and limit how many images are shown on smaller devices.

BnB, Slider, and Video

The BnB type is designed around an Airbnb-style layout. It makes sense for real estate, rentals, hotels, interiors, property listings, and case pages where the first image should establish the overall view and the others should reveal details. For a standard portfolio, BnB may feel too literal, but for a property listing page it often explains the content better than a standard grid.

Slider works when the user is supposed to view images one by one. It is useful for hero sections, compact inserts, visual showcases, and pages where the gallery should not take up much vertical space. The key is not to confuse a slider with a true portfolio: if visitors need to compare many works quickly, a grid is the better option.

The Video type and video extension are useful when the gallery needs to include YouTube, Vimeo, or self-hosted video. In that scenario, check not only thumbnail appearance but also lightbox behavior, external video loading, and page speed impact. On pages with a lot of video, it is usually better to limit the number of items and avoid turning the gallery into a heavy archive.

Detailed Setup After Installation

Once your first gallery is created, configure it in layers rather than randomly: structure, size, visual style, click behavior, mobile adaptation, and additional features. This order makes it much easier to see which setting affects which result. If you change the gallery type, hover effects, lightbox, filters, and responsive behavior all at the same time, it becomes difficult to understand why the grid broke.

General Grid Settings

Start with gallery width, spacing, and image size. Width determines how the gallery fits into the theme container. If you set it to 100%, that does not force the gallery outside the limits of the container defined by the theme. So if you want a full-width effect, you need not only the Modula setting, but also a page template that actually allows a wide section to expand.

Spacing affects perception more than most people expect. In an art portfolio, a gutter that is too small creates visual noise. In a product catalog or real estate page, a moderately dense grid may be appropriate because users are comparing many items. For mobile, spacing should be checked separately: what looks clean on desktop may eat too much image width on a phone.

Image Size and Sharpness

The image size setting controls which thumbnail and image sizes the gallery uses. For Creative Gallery, the documentation recommends not setting the minimum too low, or the images may look blurry. In Custom Grid, the logic depends on the cell size: if the base cell is small and an image is stretched across multiple cells, the final size still needs to remain large enough.

In practice, test it like this: open the page on desktop, zoom the browser to 125%, open the lightbox, and compare the sharpness with the original image in the Media Library. If everything looks blurry on the page, adjust the gallery image size settings and review the source files. If the blur only appears after compression or CDN delivery, check Speed Up, external optimization, and cache.

Hover, Captions, and Loading Effects

Hover effects and loading effects can make a gallery feel more polished, but they should not interfere with viewing. In a portfolio, a hover effect may reveal the title or caption. In a catalog where users are scanning images quickly, aggressive animation is distracting. On mobile, hover behaves differently: there is no conventional hover state on a touch screen, so make sure the effect does not force a double tap to open the lightbox or interfere with the first tap.

It is best to prepare captions before styling the gallery. If a caption is too long, it may hurt the lightbox experience or overlap the image. The WordPress.org changelog has included fixes related to large captions and lightbox behavior, so long descriptions should be tested especially carefully. If a caption matters for SEO or context, keep it in the image data, but only display it in the interface where it actually helps the user.

Lightbox and Links

The lightbox is more than a zoom effect. In Modula, it controls what happens after a click: whether a fullscreen view opens, whether arrows, title, caption, toolbar, thumbnails, download, zoom, fullscreen, comments, and other elements appear if the corresponding features are available. In the settings, you can choose which devices open the lightbox and configure keyboard navigation, mousewheel navigation, swipe, loop navigation, thumbnail position, and background.

For most portfolios, a good starting setup looks like this: lightbox enabled, arrows enabled, title and caption shown only when they are actually prepared, thumbnails enabled for larger collections, and download disabled if you do not want to provide files directly. On mobile, always check whether the toolbar covers the image, whether a double tap is required, and whether closing the view feels easy.

Responsive Settings

The documentation notes that Creative Gallery is responsive by default, while Custom Grid, Masonry, and Slider add a separate Responsive tab. There, you can enable custom responsiveness and define the number of columns for tablet and mobile. This is one of the most important steps, because the mobile version often determines whether the gallery remains useful or turns into a long, heavy image feed.

For a small portfolio on a phone, one or two columns are often enough. For real estate, it is usually better to preserve a strong lead image and avoid making the detail shots too small. For a catalog, two columns may still work, but check whether captions remain readable and whether the images become too small. After changing responsive settings, do not rely only on the admin preview. Open the page on a real phone or in developer tools, then reload it after clearing cache.

A Small CSS Adjustment for Filters

If you need filters but the text is too small in your theme, you can use the documented CSS approach through Appearance > Customize > Additional CSS. Do not edit plugin or theme files. Start with a moderate value such as 18px or 20px rather than something excessively large.

html body .modula > .filters .modula_menu__link {
  font-size: 20px;
}

Check both desktop and mobile. If the filters start wrapping onto multiple lines and push the gallery downward, reduce the size or enable a dropdown or collapsible variant on mobile. To roll the change back, remove this snippet from Additional CSS and save the settings.

Filters, Deeplinking, and Navigation in Large Galleries

Filters are one of the features that make the Pro version especially useful on large visual pages. They turn the gallery from a group of images into a selection tool. A visitor can show only interiors, only portraits, only products from a certain category, or only images with a specific tag. But filters only work well when the data behind them is prepared carefully.

How to Build Filters Without Creating Chaos

In the documentation, the process starts with creating filters in the gallery editing area and then assigning filters to individual images. If an image does not get a filter, it stays only under All. For larger collections, the bulk editor is useful because it lets you assign filters in batches and save changes with Save all and close.

Start by defining a short filter vocabulary. Do not mix different classification logics in one gallery. If the same gallery contains filters such as "portrait," "interior," "black and white," and "for website," users will not understand what they are selecting. It is better to stick to one classification level: project type, location, service, room, style, season, or status. If you need two parallel systems, it may be better to split the content into multiple galleries.

Filter Settings Worth Checking

• Use dropdown for filters is useful when you have many filters and the row of links becomes too long.
• Reload page on filter click is only worth enabling when necessary, because reloading can make browsing feel less smooth.
• Hide All filter works well if you want to guide the user directly into a specific category.
• Default active filter helps load the gallery already filtered, but the value must match the filter name exactly.
• Collapsible filters on mobile and dropdown behavior on mobile help keep the top of the page from being taken over by a long row of filters.

If you want a page to open with a filter already active, the documentation mentions the default_active_filter shortcode parameter. Use it carefully: the filter name should avoid problematic characters, and the user should understand why not all images are visible. On a page like "Our Kitchens," that may be perfectly fine. On a general portfolio page, not always.

Deeplink to a Specific Image

Deeplinking lets you share a link not just to a gallery page, but to a specific image opened in the lightbox. That is useful for client approvals, press materials, educational articles, and any situation where you need to point to a single frame inside a larger set. According to the documentation, deeplinking is enabled in the gallery settings under the Misc tab via Enable Deeplinking, and you can define a custom URL prefix.

Use deeplinking only when an individual image carries meaning on its own. If you frequently send clients links to specific frames, the feature can save a lot of back-and-forth. If the gallery is only there for casual visual browsing, deeplinking may be unnecessary. After enabling it, make sure the link opens correctly in a new window, leads to the intended image, and does not conflict with page caching.

Pro Features for Photographers, Agencies, and Visual Catalogs

The Modula Pro feature set should not be enabled as a checklist. Every extension changes the workflow. Image Proofing adds a client selection layer, Watermark changes how images are processed, Speed Up affects optimization, Albums change navigation structure, Download provides file delivery, EXIF exposes metadata, and Video adds mixed-media galleries. Turn on only what supports the page's actual purpose.

Image Proofing

Image Proofing is built for client image approval. The documentation describes a workflow where the photographer uploads a gallery, enables proofing, sets minimum and maximum image selection limits, creates an invitation, and sends the client a link. The client selects images directly in the gallery interface and can add a note when submitting the selection.

This feature is especially useful for wedding photographers, product shoots, design studios, retouchers, visual agencies, and any project where approval by email turns into a long chain of messages like "frame 12, frame 17, and the one where the background is lighter." In the gallery, the selection is recorded in a structured way, and the administrator can see exactly which images were chosen.

What to Configure Before Sending It to a Client

• The minimum and maximum number of images, so the client cannot submit too few or too many.
• The message shown to users without access if the gallery is private.
• A contact page link in case the invitation has expired or the client needs help.
• The invitation status, expiration period, and whether the link can be resent.
• A full test with a test user to confirm that the client journey is clear without admin access.

Do not use proofing as a substitute for a full client portal if you need contracts, invoices, payment stages, or revision history. It is an image selection tool, not a project management system.

Watermark and Image Protection

Watermark helps add a watermark to images. The documentation describes two levels of control: per-gallery settings and global settings through Modula > Settings > Protection > Watermark. You can upload a watermark image and define its position, margin, width, and height. There is also a backup option that preserves the originals so the images can be restored after removing the watermark.

A watermark is not absolute copy protection. It reduces the risk of casual misuse and helps preserve attribution, but it does not replace contracts, proper licensing, lower-resolution previews, or a careful publishing policy. For a public portfolio, a small corner watermark is often enough. For a proofing gallery, a more visible watermark may make sense until the client approves the final images.

Speed Up and Image Optimization

Speed Up is designed to improve gallery performance through image optimization. The documentation describes compression modes such as lossless, lossy, and glossy. You can apply these settings globally through Modula > Settings > Optimization > Performance or separately for a specific gallery under the Speed Up tab. This matters because not all galleries have the same needs: a public portfolio, a private proofing gallery, and a product page may each require a different tradeoff between quality and file weight.

Lossless is a good starting point where quality is critical and you do not want visible changes. Lossy may be justified on long pages where speed matters more than perfect detail. Glossy is the middle ground between quality and weight. After enabling any optimization mode, check not only visual sharpness but also lightbox behavior. Sometimes thumbnails look fine, but artifacts become more obvious when the larger image opens.

Albums, Download, EXIF, and Video

Albums help group multiple galleries into a single structure. That is useful for events, travel, room-based project breakdowns, or portfolio sections. Download lets users download images or entire galleries, but it should only be enabled when it is truly part of the workflow. For a public portfolio, download is often unnecessary. For client delivery of finished files, it may be very convenient.

EXIF is helpful for photography communities, educational content, and gear reviews where viewers care about camera settings, lens, shutter speed, ISO, and aperture. Video is useful for mixed media, such as a design case study that includes both final images and a short process video. In each case, check that the extra feature is not overloading the page or making the interface more complicated for an average visitor.

Practical Example: A Studio Portfolio with Filters and Client Proofing

Let us walk through a scenario that shows what Modula Pro is really for. Imagine an interior design studio wants to publish a portfolio with 36 images: kitchens, living rooms, bedrooms, and material details. On the public page, visitors should be able to filter projects by room type and open images in a lightbox. On a separate private page, a client should be able to choose 10 images for retouching. This is not an abstract gallery - it is a working process with two outcomes: a public portfolio and a client selection workflow.

Goal

Create a clean on-site gallery with the filters Kitchen, Living Room, Bedroom, and Details, a responsive mobile layout, a navigable lightbox, and a separate proofing gallery for the client. The public side should help visitors quickly find the project type they want, while the private side should reduce back-and-forth around image selection.

Preparation

Before creating the gallery, prepare the images: remove duplicates, keep the best 30 to 40 shots, review horizontal and vertical proportions, and fill in clear titles and alt text in the Media Library. For the portfolio, choose Custom Grid if you want to manually highlight the strongest work, or Masonry if the images work well in a flowing layout and do not need deliberate emphasis.

Prepare the filter vocabulary separately. Do not use too many categories. Four filters are enough for users to understand the choices without getting lost. If the project is more complex, it is usually better to create separate galleries by direction than to place 12 filters in a single row.

Setup Steps

1. Create a new gallery via Modula > Add New and name it Interior Portfolio.
2. Add images from the Media Library and sort them manually: strong overall shots first, details afterward.
3. Choose Custom Grid if you want to control visual emphasis. Make the key images larger, but do not stretch weak source files.
4. Set the spacing and image size. After every major change, save the gallery and check the public page.
5. Create the filters Kitchen, Living Room, Bedroom, and Details, and assign them to the relevant images.
6. Enable the lightbox, navigation arrows, swipe on mobile devices, and captions only for the images where they genuinely help.
7. Open the responsive settings and check the number of columns for tablet and mobile.
8. Copy the shortcode and place it on a draft portfolio page.
9. For client proofing, create a separate gallery or a duplicate, enable Image Proofing, define the minimum and maximum number of selected images, and send a test invitation to yourself.

Checking the Result

Open the public page as a regular visitor. Click each filter and make sure the expected images appear in that category. Open the lightbox, browse through several images, close the view with Esc and with the close button. On a phone, confirm that the filters do not take over the entire first screen. If they do, enable a dropdown or collapsible mobile variant.

Then test the proofing flow: open the invitation in a private window, select fewer than the minimum, more than the maximum, and then an allowed number of images. Review the messages the client sees. If the wording is unclear, rewrite it before sending the link to a real person. A good gallery is not judged by how it looks in the admin panel, but by how smoothly the user gets through the entire journey.

Details People Often Miss

The first detail is the All filter. If users should see all work immediately, keep it. If the page focuses on a specific project type, you can use a default active filter. The second detail is mobile order. In a manual grid, a desktop-first emphasis order does not always translate perfectly to a phone. The third detail is cache. After enabling filters and the lightbox, clear the cache, or you may end up testing outdated CSS and JavaScript.

Final Checks Before Publishing

Pre-publication testing should follow a chain: source data, plugin logic, page result, behavior check, error symptom, and fix. That approach helps you avoid arguing with the gallery at random. If images do not open, check the lightbox and JavaScript. If they look blurry, check image size and the source files. If the grid looks wrong, inspect the theme container, gallery type, and CSS conflicts. If everything disappears after cache is enabled, review optimization exclusions.

The Public Page

Test the page in a regular browser window, a private window, and on a mobile device. If the site uses a CDN or server-side cache, wait for the refresh or clear the cache the normal way. Do not rely only on WordPress preview mode: the editor may load styles differently from the live page.

• The gallery should not jump around while the page is loading.
• Images should keep correct proportions without strange stretching.
• Filters should show the expected images.
• The lightbox should open and close cleanly without freezing.
• Download, zoom, fullscreen, and comments buttons should appear only when they are actually needed.
• On mobile, users should see a clear gallery top area instead of a long filter row.

Page Speed and Weight

Galleries almost always increase page weight because they are image-driven. That is normal, but the added weight should stay under control. If a page contains 80 images, filters, and a lightbox, a user on mobile data may experience a noticeable delay. In that case, use image count limits, pagination, Speed Up, separate galleries by section, or more restrained thumbnail sizes.

Check performance not only with tools, but with your own eyes: how quickly the first screen appears, whether the gallery lags, whether scrolling gets blocked, and whether a heavy lightbox loads before the user interacts with it. If Speed Up makes the images lighter but the quality becomes unacceptable for a portfolio, choose a gentler compression mode or create an exclusion for the key gallery.

SEO and Accessibility

Modula can support visual SEO only if the source data is solid. You need descriptive file names, alt text, meaningful captions, a reasonable page size, and no hidden indexing problems. Features like image sitemaps and AI-optimized metadata can help, but they do not replace editorial review. Do not turn alt text into a list of keywords. Describe what the image shows and why it matters.

For accessibility, test keyboard navigation in the lightbox, caption readability, control contrast, and the ability to close the view. If a user cannot exit the lightbox or understand where they are, a beautiful grid will not save the experience.

Integrations with Editors, Builders, and Multilingual Pages

On a real WordPress site, a gallery rarely exists in isolation. It usually sits inside a builder page, a blog post, a product template, a service landing page, a multilingual version of a page, or a widget area. That is why after the base setup, you need to check not only the gallery itself, but also how it behaves alongside the rest of the site's layers. Modula supports output through both blocks and shortcodes, and the documentation specifically mentions integrations with builders and Polylang. That gives you flexibility, but it does not remove the need for testing in your actual theme.

Block Editor and Classic Shortcode

The block editor is convenient when the gallery should appear as a visible block in the page structure. An editor can move it above or below the text, select the correct gallery from the list, and avoid touching code. This approach works well for blogs, portfolios, and service pages where content is updated manually.

The shortcode remains more universal. You can place it in the classic editor, a builder text block, a widget, a template block, or any field that does not know about Modula directly. If the gallery looks wrong in the block editor but the shortcode works on a clean page, that is a strong signal: the problem is not the gallery, but the container or styles of that specific editor. That is why on more complex pages, it is useful to keep the shortcode in the task notes or editorial checklist.

Elementor, Divi, Beaver Builder, and Other Page Builders

With builders, the rule is simple: test the gallery in a neutral container first, then move it into a complex layout. A page builder may add its own overflow rules, z-index values, lazy loading, animation, full-width containers, and breakpoints. The lightbox is especially sensitive to this. If a section uses a nonstandard z-index or overflow hidden, the popup view may end up covered or clipped.

A practical workflow looks like this:

1. Create the gallery and test it on a plain test page without the builder.
2. Insert the same shortcode into a simple builder container with no animation and no nested tabs.
3. Check the builder's desktop, tablet, and mobile previews, but do the final check on the public page in a real browser.
4. If the lightbox opens behind a modal, menu, or sticky header, review z-index values and temporarily disable the problematic section effects.
5. If the gallery does not recalculate width after an accordion or tab opens, try placing it in a visible section or simplifying the container.

Do not begin troubleshooting by removing Modula. First determine whether the same gallery works outside the builder. That is the fastest way to separate a content problem from a layout problem.

WooCommerce and Visual Product Pages

The official Modula page mentions eCommerce use cases and WooCommerce integration for selling prints and digital downloads through galleries. In practical terms, that means Modula can be useful not only for portfolios, but also for visual product presentation: showing details, angles, variations, materials, before-and-after examples, or a gallery of work related to a product. But that does not mean the gallery should replace WooCommerce's core product logic.

If you use a gallery alongside WooCommerce, keep the roles separate. WooCommerce handles the product, price, stock status, cart, order flow, payments, and emails. Modula handles visual presentation, lightbox behavior, filters, grid layout, image protection, and, if configured, downloading or proofing. Do not place a heavy gallery where users are supposed to quickly choose a variation and buy. It is better to use Modula on a descriptive page, a project gallery, a lookbook section, or a separate "Examples of Use" block.

For product-related image sets, check three things. First, make sure Modula's lightbox does not conflict with the theme's or WooCommerce's lightbox. Second, confirm that the gallery does not slow down the product page too much. Third, make sure users do not get confused about where to view an image and where to choose a product variation. If the interface becomes overloaded, simplify the lightbox toolbar, reduce the number of images on the first screen, or move the larger gallery to a separate page.

Multilingual Pages and Polylang

The Polylang documentation describes a manual workflow: create pages and categories in the required languages, add the Modula gallery to the primary-language page, and then add the appropriate shortcode to the translated page. That is an important point: translating the page does not automatically mean all captions and galleries will be ideal for another audience. In some cases, it is better to create a separate gallery for each language, especially if captions, titles, filters, and image order need to differ.

For a multilingual site, decide in advance what gets translated:

• The page where the gallery is inserted.
• The filters and their order.
• The captions and title/caption content inside the lightbox.
• The image alt text in the Media Library.
• Proofing messages, expired invitation messages, and login-required messages if client access is used.

If the Russian page uses filters called "Kitchens," "Living Rooms," and "Details," while the English page should use Kitchen, Living Room, and Details, do not try to force one shared label set across all languages if that creates a mixed-language interface. Create separate galleries or carefully manage translatable fields through the site's tools. After that, test the language switcher: users should land on a page with the correct gallery, not an empty translation missing the shortcode.

How to Maintain Galleries After Publishing

The most common mistake after a successful launch is treating the gallery as a one-time task. Visual sections change: new work is added, products change, a client asks to remove a frame, an editor updates captions, the optimizer gets new settings, the theme is updated. If you do not define maintenance rules, even a good gallery can turn into a pile of random images with inconsistent sizing, mismatched filters, and confusing shortcodes after a few months.

Editorial Workflow Rules

For every important gallery, keep a short description in the site's admin notes or project documentation. Record where the gallery is used, which shortcode is inserted on the page, which gallery type was chosen, which filters are allowed, what image size is considered acceptable, and who is responsible for updates. That is not bureaucracy - it is protection against accidental changes.

A good maintenance checklist for a Modula gallery might look like this:

• The gallery name starts with the site section, such as Portfolio - Interiors or Client Proofing - Smith.
• New images are added only after the source size and compression have been checked.
• Filters are chosen from an approved list, and new filters are not created without a reason.
• After bulk editing, Save all and close or Update Gallery must always be clicked.
• After changes, desktop, mobile, lightbox, and cache behavior are checked.
• Old galleries are not deleted if their shortcode may still appear on pages or in archived content.

This kind of list is especially useful when multiple editors manage galleries. It reduces the risk that one person adds a filter called Interior, another adds Interiors, a third adds Interior (Russian label), and the visitor ends up with an empty category.

Defaults, Duplication, and Repeatable Settings

The Pro feature set includes Defaults, which let you save a set of parameters and reuse it for new galleries. That is useful on sites that create dozens of similar image sets: studio projects, real estate listings, event reports, or product collections. Instead of rethinking gutter, lightbox, captions, responsive behavior, and filters each time, you can keep a few base presets ready.

In practice, it is better to create two or three working profiles rather than one universal default. For example: "Portfolio public" for open work, "Client proofing" for private selection, and "Compact article gallery" for use inside long-form articles. Each profile should have its own lightbox, download, caption, responsive, and optimization settings. If one default tries to cover every scenario, it quickly becomes a compromise that works well for no one.

Duplicating galleries is convenient when you need close variants, but it requires discipline. Right after duplication, rename the new gallery and verify that the page shortcode points to it. Otherwise, you may end up editing the copy while the live page keeps showing the old version.

Updates and Regression Checks

The WordPress.org changelog shows that Modula receives regular fixes: JavaScript issues on the image edit screen, caption and lightbox issues, styles, shortcode buttons, compatibility improvements, and security fixes. That is normal for an actively maintained plugin, but on a site with important galleries, updates should always be followed by a quick validation pass.

After updating the plugin, theme, or caching solution, check one main gallery, one gallery with filters, one with a lightbox, and one using a Pro extension if applicable. There is no need to manually browse the entire site, but your control scenarios should cover different functions. If the site has a staging environment, update there first. If it does not, create a backup using your hosting tools and update during a low-traffic period.

Quick Post-Update Checklist

• The page with the gallery opens and there is no empty block.
• The lightbox opens, closes, and cycles through images correctly.
• Filters show the correct groups.
• The mobile version keeps the intended number of columns.
• Watermark, Speed Up, or proofing have not changed behavior unexpectedly.
• Cache has been cleared and the page has been checked in a private window.

If an error appears after an update, reproduce it on a single page first and document the steps. Saying "the gallery broke" is rarely useful. A helpful report looks more like this: "On the portfolio page, clicking the Kitchen filter hides all images; it works without cache; the console shows a JavaScript error; this is the shortcode; this is the theme." With that information, it is much easier to determine whether you need a rollback, an optimizer exclusion, or a support request.

When It Is Better to Split One Gallery into Several

A single large gallery may seem convenient for the administrator because everything is in one place. But for users and for performance, that is not always a good thing. If one gallery already contains dozens of images, many filters, long captions, watermarking, video, and proofing, the site is trying to solve too many tasks at once. In many cases, it is better to split the content into multiple galleries: portfolio sections by category, properties by type, events by day, or products by collection.

Splitting can also help SEO. A separate page like "Kitchens" with a relevant gallery, supporting text, and verified alt text may be clearer than a single massive page with a filter. But do not split content without a reason: if users need to compare different types of work on one screen, filters inside one gallery are more convenient. The right choice depends on the user journey, not on a technical habit.

Common Problems and How to Diagnose Them

Gallery problems almost always look the same: images do not appear, the grid breaks, the lightbox will not open, images are blurry, filters do not work, the watermark does not apply, or everything fails after optimization. But the causes are different. Below is a practical symptom-based diagnostic guide tailored to Modula and WordPress galleries.

The Gallery Does Not Display or Images Disappear After Caching Is Enabled

Symptom: the gallery exists in the admin, but the public page shows an empty block, some images do not load, or the grid only appears after several refreshes.

Likely cause: a conflict with lazy loading, minification, or deferred JavaScript loading. Modula's documentation separately covers cases involving WP Rocket and Autoptimize. For WP Rocket, it suggests excluding Modula images from lazy loading by CSS selector. For Autoptimize, it mentions excluding the plugin path from JavaScript optimization.

What to check: temporarily disable JavaScript optimization and lazy loading in the cache plugin, clear the cache, and open the page in a private window. If the gallery appears, the problem is in optimization rather than content. Then turn the options back on one at a time.

How to fix it: add exclusions for Modula files or images in the optimizer settings. For WP Rocket, the documentation provides the selector .modula-gallery .modula-items .modula-item img for excluding images from lazy loading. For Autoptimize, it references the path wp-content/plugins/modula-best-grid-gallery/ as an exclusion for Modula files. After making changes, clear every cache layer.

When to roll back: if exclusions do not help, temporarily disable the problematic optimization for the page with the gallery and collect support information: theme, list of optimization plugins, test page URL, and console errors.

Images Look Blurry

Symptom: the grid displays, but the thumbnails look soft, especially in Creative Gallery or a large Custom Grid layout.

Likely cause: a minimum image size that is too low, an unsuitable image size for Custom Grid, small source files, or aggressive compression.

What to check: open the original image in the Media Library and compare it with the gallery version. Then inspect the image size settings in that specific gallery. If the original file itself is too small, the plugin cannot restore missing detail.

How to fix it: increase the image size in the gallery settings, use higher-quality source files, save the gallery again, and clear the cache. If Speed Up is enabled, compare lossless with stronger compression modes temporarily.

When to roll back: if increasing the size sharply hurts page speed, reduce the number of images on the first screen or split the content into separate galleries instead of keeping one heavy gallery.

The Grid Looks Slightly Wrong or Breaks Under the Theme

Symptom: images are offset, spacing looks strange, sizes do not match, the gallery overflows its container, or it looks different from the admin preview.

Likely cause: a theme CSS conflict, an incorrect container width, a JavaScript error, or a conflict with another plugin. In Modula's common issue guidance for layout problems, they suggest checking the console for an error like Uncaught TypeError: undefined is not a function and temporarily disabling plugins to identify incompatibilities.

What to check: place the same shortcode on a clean test page using a standard template. If the gallery works there, the problem is in the page layout or the theme. Open the browser console and check for JavaScript errors.

How to fix it: reduce the gallery width, check the full-width template, disable the conflicting builder block, temporarily switch to a default theme for diagnosis, or contact the theme developer with a concrete example.

When to roll back: if the grid became worse after adding custom CSS, remove the most recent CSS edits and return to the plugin settings.

The Lightbox Does Not Open or Works Poorly on Mobile

Symptom: clicking an image does nothing, the lightbox opens without arrows, does not close, or on a phone the first tap acts like hover and the second behaves differently.

Likely cause: a JavaScript conflict, lightbox opening disabled for that device, double-tap settings, captions that are too large, or a toolbar that overlaps the image.

What to check: in Lightbox & Links settings, review the devices, arrows, swipe, keyboard navigation, toolbar, and mobile double-tap behavior. Then test it on a real phone.

How to fix it: simplify the toolbar, temporarily disable long captions, enable swipe, review the double-tap behavior, and rule out a JavaScript optimizer conflict.

When to roll back: if the lightbox is only necessary on desktop, you can restrict it by device and leave the mobile gallery without the more complex viewing mode if that creates a better experience.

Filters Show Empty Categories

Symptom: the filter appears on the site, but clicking it hides the images or shows the wrong subset.

Likely cause: the filter was created but not assigned to images, the filter name does not match the shortcode value, the default active filter is misspelled, or the image exists only under All.

What to check: open the image editor inside the gallery and make sure each image has the correct filter assigned. For larger galleries, review the bulk editor as well.

How to fix it: reassign the filters, save with Save all and close, clear the cache, and test the page again. If you are using a default active filter, remove the parameter temporarily and test the normal behavior.

When to roll back: if there are too many filters and users are getting confused, split the content across multiple pages or keep only the 3 to 5 clearest categories.

The Watermark Does Not Appear on Images

Symptom: the option is enabled, but the watermark is not visible or displays incorrectly.

Likely cause: custom settings are not enabled for that specific gallery, no watermark image was selected, position or dimensions are wrong, the watermark insertion action was not performed, or cached images are still being shown.

What to check: open Watermark in the gallery settings and verify Enable Watermark, Use custom settings, the image file, position, margin, and size. The documentation recommends testing watermark removal and reinsertion if it is not displaying properly.

How to fix it: upload a properly sized watermark image, save the gallery, apply the watermark, and clear the cache. Enable original backups if you plan to change the watermark later.

When to roll back: if the watermark damages the portfolio presentation, keep it only for proofing or private galleries and use a lighter protection strategy on public pages instead.

When Modula Pro Is a Good Choice

Modula Pro is a strong choice when the gallery on your site needs to function as a tool: showcasing work, helping users select images, filtering collections, opening individual frames in a lightbox, speeding up visual pages, protecting original materials, and giving clients a clear proofing path. In that kind of workflow, the plugin covers far more than a single "add photos" button - it supports the full path from the admin panel to the final on-page result.

Before publishing to production, walk through one short final sequence: create a test gallery, choose the right grid type, set image sizes and spacing, check the lightbox, mobile view, filters, and cache behavior, and then enable only the Pro features the page truly needs. If the result is stable and predictable after that, you can move on to the live page and download the Modula Pro archive for installation or retesting in your environment.

Do not judge the product by the demo alone. A real evaluation means your theme, your images, your cache setup, your editor, and your mobile use case. If Modula Pro handles that test calmly, it can become a reliable foundation for the visual sections of your site. If conflicts show up during testing, you already have a clear diagnostic map: image sizes, grid type, lightbox, responsive behavior, optimizers, and theme CSS.