Modula Slideshow - WordPress Plugin

How to Set Up Modula Slideshow for WordPress Galleries

Modula Slideshow is most useful not when you simply need to place a few images on a page, but when visitors need to move through a set of images at a comfortable pace: a portfolio, a photo shoot, a curated work sample, an interior walkthrough, project stages, or a visual story. In this guide, we will look at how to treat that kind of gallery not as decoration, but as a functional part of the page: preparing images, choosing the right display mode, configuring the lightbox, enabling autoplay only where it does not get in the way, checking mobile behavior, and quickly identifying the cause of common issues.

When working with Modula, it is important to distinguish between two similar but not identical use cases in the documentation. The first is Slider as a gallery type, where images move horizontally on the page itself and can appear one at a time or as multiple slides. The second is Lightbox Slideshow, where a regular gallery opens in a lightbox and the fullscreen view includes a play button, autoplay, pause on hover, and a configurable interval between slides. Since this task specifically refers to Modula Slideshow, the main focus here will be the lightbox slideshow, but we will also show when it makes more sense to use Slider instead.

This guide is written for a site where the plugin is already being considered for installation or testing. We will not repeat the marketing copy at the top of the product page, and we will not cover purchasing, payments, or license workarounds. Instead, we will walk through the practical path: what to check before installation, how to build your first gallery, which settings actually affect the viewing experience, where display issues usually break down, and how to combine Modula safely with cache plugins, your theme, and the block editor.

What the Slideshow Mode Actually Does in Modula

Modula is built around WordPress galleries: you create a gallery in the admin area, add images from the Media Library or upload new files, choose a gallery type, configure the appearance, and publish the result with a block or shortcode. Slideshow adds controlled step-by-step image viewing on top of that foundation. Instead of scanning a long grid visually, the user opens an image and moves through the set with arrows, dots, thumbnails, keyboard navigation, swipe gestures, or autoplay if it is enabled.

Modula gives you two ways to create similar behavior. Lightbox Slideshow applies to galleries that open images in a lightbox. On the page itself, the layout can remain a grid, a masonry gallery, or another format, while sequential viewing begins after the user clicks an image. This works well for portfolios, photo shoots, before-and-after galleries, property listings, client presentations, and pages where the grid helps users choose quickly but the actual review is easier in a fullscreen viewer.

Slider is a separate gallery type. Images become a slider directly inside the page content: you can control width, image size, spacing, the number of visible slides, autoplay, arrows, dots, mouse dragging, infinite loop, starting slide, and other options. This version is useful when the page does not need a large image grid and the main focus should be a horizontal showcase.

The practical rule is simple: if visitors should first see a selection and decide what to open, start with a standard gallery and enable slideshow in the lightbox. If the page should immediately present a single visual sequence, choose the Slider type. A common mistake is enabling autoplay everywhere, even when images contain captions, fine details, or commercially important information. In those cases, manual navigation is usually the better choice because it gives the user control.

How Slideshow Differs from a Standard Gallery

A standard gallery answers the question "what is included in this collection?" A slideshow answers "how should this be viewed in sequence?" The difference becomes especially clear in collections where the images are connected by narrative: a room renovation, the stages of a workshop, a designer's portfolio, product photos from different angles, or a client presentation. If sequence matters, set it in the gallery itself with manual sorting or another confirmed sort rule before you enable slideshow.

The second difference is attention focus. A grid shows many thumbnails at once and can be distracting. A lightbox isolates one image and adds arrows, a toolbar, captions, image position in the gallery, and thumbnails if enabled. For a photographer, this is a way to present a shot at full size; for an online store or service site, it is a way to guide visitors through a sequence of proof points without sending them to separate pages.

Who This Format Works Best For

Modula Slideshow is especially effective on sites where images carry meaning instead of just filling empty space in the layout. That includes portfolios for photographers, designers, architects, makeup artists, contractors, interior studios, events, restaurants, hotels, educational projects, and small catalogs. The plugin is also useful for editors who need to publish curated visual collections quickly without building a custom template.

It may be a weaker fit if the site needs advanced catalog filters at eCommerce scale, separate image detail pages with many metadata fields, a heavy editorial workflow with permissions and approvals, or if the site already relies on another large gallery system. In those situations, Modula can still be tested on a separate page, but you should not migrate the entire visual archive without checking performance, mobile behavior, and theme compatibility first.

What to Check Before Installation and Initial Setup

Before installing any image-focused plugin, evaluate not only the feature list but also the site environment. Galleries sit at the intersection of the Media Library, theme, editor, caching, image optimization, and front-end scripts. If there is already a conflict somewhere, the slideshow may appear to be the problem even though the real cause is the theme, JavaScript minification, lazy loading, or source images that are too small.

Start with a basic WordPress review: core updates, the active theme, PHP on the hosting side, available Media Library storage, correct file upload permissions, and the absence of obvious browser console errors. Modula's official knowledge base recommends checking your WordPress version, hosting environment, plugin version, JavaScript errors, and debugging resources before contacting support. This matters even more for slideshows because navigation, autoplay, and the lightbox all depend on client-side scripts.

You should also confirm which version of Modula you are working with. The free plugin on WordPress.org creates galleries, provides blocks and shortcodes, supports core display types, and serves as the base layer. Modula documentation states that some features, including Slider as a gallery type and certain extensions, require Modula Pro and the relevant add-ons. Lightbox Slideshow is also described as a separate add-on that requires active Modula and Modula Pro. So before planning the page, make sure you understand whether you are configuring lightbox slideshow, the Slider gallery type, or a standard gallery with basic navigation.

Pre-Launch Checklist

• Check your image source. It is best to prepare files in the Media Library in advance: clean filenames, meaningful alt text, sufficient resolution, and reasonable file size.
• Define the viewing model. Portfolios usually call for a lightbox, a homepage showcase usually calls for Slider, and a long archive often works better as a grid with a limit on visible images.
• Temporarily disable extra optimization during testing. If the site uses WP Rocket, Autoptimize, or another optimizer, test the gallery first without aggressive minification and deferred loading.
• Choose a test page. Do not start on your highest-traffic page. Create a draft or hidden page where you can test settings without affecting visitors.
• Check the theme. If the theme outputs the body tag in a nonstandard way or conflicts with scripts, the lightbox may display incorrectly.

This prep work may seem tedious, but it saves time. It is easy to mistake a slideshow for a simple visual effect, but in practice it is a set of connected decisions: which images are loaded, which scripts are enqueued, how the theme constrains container width, what mode opens on mobile, and what happens after the click.

Installing Modula and Enabling the Required Extension

Modula's official instructions describe the standard installation path through the WordPress admin area: open Plugins, go to Add New, search for Modula, click Install Now, and then Activate. Once activated, a Modula section appears in the menu where galleries are created. That is the base layer, and nothing else in this guide works without it.

If you are using Pro features, the setup becomes a two-step process. First, the core free plugin must be installed and activated. Then you add the Pro plugin, activate the license, and only after that enable the available extensions under Modula - Extensions. The extension installation documentation says that after the license is active, you open the extensions screen and turn on the required add-on with a toggle. When installation succeeds, the toggle changes state.

For the use cases in this guide, do not mix up the extensions. If you need slideshow inside a lightbox, look for the add-on tied to Lightbox Slideshow. If you need a gallery slider directly on the page, enable Slider and choose the Slider gallery type in the gallery editor. Both can exist on the same site, but for any given gallery it is better to decide in advance what kind of experience the visitor should get: a grid that opens to fullscreen viewing, or a slider that appears directly in the content.

Initial Check After Installation

1. Open Modula - Galleries or Modula - Add New and make sure the gallery editor loads without errors.
2. Create a small test gallery with 5 to 8 images so the first test stays manageable.
3. Save the gallery and confirm that a shortcode appears. The official documentation shows publishing via shortcode or the Modula Gallery block.
4. Add the gallery to a test page and open that page on the front end.
5. Check whether the lightbox opens on click, whether arrows are visible, whether the viewer closes correctly, and whether it shifts down the page.

At this stage, do not try to configure every effect at once. First, make sure the base gallery and lightbox output are stable. Once the base output works, it is much safer to add autoplay, thumbnails, animations, and styling. If the lightbox is already broken, extra settings will only make troubleshooting harder.

Building the Gallery: Image Order, Captions, and Publishing

Your first working gallery starts in Modula - Add New. Modula documentation describes a simple process: give the gallery a name, upload images or select them from the Media Library, arrange them by drag and drop, save the gallery, and then insert it into a page. For slideshow use, image order matters more than it does in a standard grid because visitors will experience the collection as a sequence.

Use an internal gallery name that is useful to your team, not just attractive. For example: "Kitchen Portfolio - Slideshow," "Apartment Interior - Lightbox View," or "Client Work Series." That helps site editors avoid mixing up galleries with similar images later. If the site contains dozens of collections, it is worth standardizing the naming pattern: section, subject, year in the admin if needed, and viewing type. There is no need to display the date on the public page.

After uploading the images, check the titles, captions, and alt text. Modula's title and caption documentation notes that both can be set when editing an image inside the gallery, while display on the thumbnail and inside the lightbox is configured separately. That distinction matters: hiding the caption on the thumbnail does not necessarily hide it inside the lightbox. So if you want a clean grid preview but detailed text after the image opens, keep those settings separate.

When Manual Ordering Is the Better Choice

Manual ordering is almost always the right call when the gallery tells a story. In a photo shoot, start with wide shots and then move into details. In a designer portfolio, lead with the strongest image and then show variations and close-ups. In a renovation case, show the original condition, the process, and the finished outcome. In a product set, show the overall view, key angles, details, packaging, or real-world use. Modula lets you drag images into place, and the Pro sorting documentation mentions options such as manual order, creation date, modified date, alphabetical order, and random order.

Random ordering can feel dynamic, but it is a poor fit for instructional series, before-and-after cases, and client review flows. If the visitor needs to understand a change over time, random order breaks the meaning. Use it only for decorative collections where any image can appear first and sequence does not affect interpretation.

Publishing with a Block or Shortcode

Modula supports two familiar insertion methods: a Gutenberg block and a shortcode. The gallery insertion documentation describes selecting the Modula Gallery block from the block list and choosing the needed gallery from a dropdown. A shortcode is useful when the page is built with the Classic Editor, placed in a widget, used inside some builders, or inserted into a text block in a third-party editor. For WPBakery, the official instructions recommend creating the gallery, copying the shortcode, and inserting it into a Text Block element.

After publishing, open the page not only in the editor preview but also in a regular browser window. If caching is enabled on the site, test the page again after clearing cache. If the site uses multiple page templates, test the gallery in the template where it will actually live long term: a narrow container, full-width layout, and sidebar layout can all change how the slideshow feels.

Configuring Lightbox Slideshow: Play Button, Autoplay, and Pause

Lightbox Slideshow is the most direct use case for Modula Slideshow. It does not replace the gallery on the page. Instead, it adds sequential image viewing inside the lightbox. According to the documentation, it requires the Modula Lightbox Slideshow add-on, active Modula and Modula Pro, and at least one gallery already created, because the feature applies to images inside a gallery.

Start by making sure the gallery is set to open images in a lightbox. In Modula's Lightbox & Links section, you can choose what happens after an image is clicked: no link, direct image link, external URL, or lightbox opening. For slideshow, you specifically need Open images in a Lightbox. If another option is selected, enabling slideshow controls in the lightbox will not help because the lightbox itself will not open as expected.

Next comes the slideshow itself. The documentation describes the settings Enable Slideshow, Enable Slideshow Autoplay, Pause Slideshow on Hover, and Time Between Slides. These are best configured based on the content type, not just by feel.

How to Choose the Time Between Slides

If the images contain little or no text and mainly provide an atmospheric showcase, the interval can be shorter. If each frame includes a caption, products, interior details, or meaningful differences, the user needs more time. Do not choose the delay based only on your own patience in the admin area: you already know the gallery, while a new visitor is seeing it for the first time. Test the slideshow the way a real user would, reading the caption, studying the image, and only then moving on.

Modula can show an indicator in the lightbox for the time remaining until the next slide. That helps users understand that the gallery is advancing automatically, not frozen. But if autoplay feels annoying, switch to manual start instead: the play button remains available, and the user decides when the sequence should begin.

Why Pause on Hover Matters

Pause Slideshow on Hover is especially important for galleries with details. When a visitor moves the cursor onto an image, they usually want to inspect a section, read the caption, or evaluate quality. If the slide advances at that moment, the gallery feels intrusive. That is why pause on hover is a safe default for portfolios, work catalogs, educational diagrams, and captioned images.

On mobile devices, hover does not behave the same way it does on desktop. So you should also test swipe gestures, navigation buttons, and double-tap behavior if the lightbox settings include the option where the first tap shows the hover effect and the second tap opens the lightbox. That is not a bug, but it is behavior the site editors need to understand.

When Not to Enable Autoplay

Autoplay is unnecessary when the gallery serves as reference material. For example, on a service page each frame may show a work stage, materials, the outcome, and a caption. In that case, the user should control the pace. You should also be careful with autoplay in galleries containing mixed content: horizontal and vertical images, fine details, different aspect ratios, and long captions. In those collections, it is usually better to rely on manual arrows, thumbnails, and keyboard navigation.

Practical check: enable the slideshow, open the first frame, keep your hands off the mouse, and judge whether you can understand the image before it advances. Then hover over the frame and make sure pause actually works if that option is enabled.

Lightbox & Links: Navigation, Captions, Thumbnails, and Mobile Behavior

A slideshow inside the lightbox rarely stands on its own apart from the rest of the lightbox settings. If you enable autoplay but hide arrows, thumbnails, and image position, the user may lose control. If you enable every tool at once, the interface becomes cluttered. The Lightbox & Links section is where you build a balanced viewing mode.

Modula documentation lists many lightbox settings: opening on selected devices, arrows, double-tap on mobile, looped navigation, title and caption display, keyboard support, mouse wheel navigation, toolbar, click-to-close, image position in the gallery, open and transition animations, showing all images, swipe gestures, thumbnails, lightbox background, and thumbnail position. Not every gallery needs all of them. The best result usually comes not from enabling the maximum number of controls, but from creating a viewing flow that feels clear.

A Minimal but Comfortable Setup

For most slideshows, it makes sense to keep arrows, keyboard navigation on desktop, swipe gestures on touch screens, a clear close button, and captions if they genuinely help. Showing the image position in the gallery is useful in long collections: the visitor can see they are on frame 4 of 18 and understand the scope of the set. Thumbnails help users jump to a specific frame quickly, but on smaller screens they may take up too much space.

If the gallery contains confidential client images or materials that should not be easy to download, do not enable the download button unless there is a real reason. Modula offers separate image protection features elsewhere in its product ecosystem, but anything displayed visually in a browser should never be treated as absolute protection. Frame the task honestly: you can make casual saving harder or hide some obvious actions, but you cannot guarantee that an image cannot be retrieved technically.

Captions Under the Image and Inside the Lightbox

Captions can be one of the strongest parts of a slideshow. On an interior studio site, they can explain the room, material, and purpose. In a photographer's portfolio, they provide shoot context. In an educational project, they can identify the step or outcome. But captions should stay short. If every image opens with a large paragraph underneath it, the lightbox becomes awkward, especially on mobile. It is better to put detailed explanation in the page copy and keep the caption focused on the essential point.

Modula's title and caption documentation explicitly separates thumbnail and lightbox settings. So during testing, check both states: hover on the gallery thumbnail and the opened image in the lightbox. Editors sometimes hide the title in one place and assume it disappears everywhere. For a clean result, test the setting in both locations.

Mobile Behavior and Double Tap

Modula lightbox includes a setting that may require a mobile user to tap twice: the first tap shows the hover effect and the second opens the image. This can be useful if thumbnails include important titles or hover effects, but it may feel confusing in a simple gallery. If visitors say "the gallery does not open on the first tap," check this setting before chasing more complex conflicts.

Lightbox thumbnails also need mobile testing. On a wide screen, they speed up navigation; on a phone, they may steal space from the image itself. If Modula's official CSS examples include a method for hiding lightbox thumbnails on mobile, that is a good sign that this use case comes up often. But only add CSS after confirming that the built-in settings cannot produce the behavior you need.

When to Choose Slider Instead of Lightbox Slideshow

Slider in Modula is a separate gallery type. It presents images in a slider format directly on the page, not only after a lightbox opens. The documentation says that Slider settings include image size, spacing between images, gallery width, shuffle, adaptive height, thumbnail navigation, autoplay, arrows, dots, mouse drag, center mode, fade effect, infinite loop, slides to show at once, slides to scroll, animation speed, RTL, initial slide, and display of title and caption under the image.

Not every gallery needs that level of control. It becomes useful when the visual block must occupy a specific place in the layout: a homepage showcase, a compact set of reviews with images, a horizontal property row, a product selection shown from multiple angles, or a series of banner-style images inside a page. But if you have a large photo gallery where users should first scan many thumbnails, Slider may narrow that overview too much.

Width, Image Size, and the Page Container

Slider settings include Gallery width. The documentation highlights an important detail: a value of 100% fills the width of the container, not necessarily the full browser window. If the theme constrains content to a narrow column, the slider will remain inside that column as well. So before trying to create a wide showcase, check the page template: you may need a full-width template, a disabled sidebar, a full-width block in the editor, or a separate section in your page builder.

Image size affects both quality and speed. In Slider, you can choose standard sizes such as Thumbnail, Medium, Large, Full, or Custom. If you choose a size that is too small, the image will look blurry when stretched. If you always choose Full, the page may become heavy. For most showcases, it is better to pick a size that matches the real width of the block and compress the source images in advance without visible quality loss.

Thumbnail Navigation, Center Mode, and Fade

Thumbnail navigation in Slider works only for single-slide displays. It is useful when visitors should see nearby frames and jump quickly between them. In a portfolio, that works well: the large image stays primary while the thumbnail strip below provides context. But if you are showing multiple slides at once, that mode may be unavailable or simply not appropriate.

Center mode reveals a small part of the previous and next image. Visually, that signals that the block can be swiped or scrolled. But the documentation notes that it works only when Fade is disabled. So you cannot expect a classic fade transition and a centered composition with side previews at the same time. Choose what matters more: a soft dissolve between frames or a carousel feel with adjacent images visible.

Enable Fade effect also has a condition: it works when one slide is shown and thumbnail navigation is enabled. These dependencies should be tested before publishing. If a setting "does not work," the cause may not be a bug but an incompatible combination of options. That is exactly why the Slider section is best configured after you understand the basic behavior: how many slides are visible, how the user moves through them, which transition is needed, and whether looping is enabled.

Slides to Show and Slides to Scroll

Slides to show at once controls how many images are visible at the same time, while Slides to scroll controls how many are skipped when the slider advances. For a gallery that tells a sequence, moving one at a time is usually best. For a showcase of items, you can display several and scroll several, but then users may miss part of the set if the movement is too fast.

The starting slide is useful when the first image shown should not be the first file in the gallery. For example, an editor may want the sequence to open with the finished result and then move into details. But use this carefully: if the order in the editor and the starting slide do not match, a future administrator may have a harder time understanding why the public gallery begins with the "wrong" image.

Image Quality, Performance, and Responsive Settings

A slideshow can be configured correctly from a functional standpoint and still look weak because of blurry images, jumping height, cramped thumbnails, or slow loading. That is why once the display mode is chosen, you should review image quality and responsive behavior separately. In Modula, these controls live in different places: general gallery type settings, image size settings, the Responsive section for some gallery types, lightbox options, and external site optimizers.

The image size documentation explains that Gallery Images Size sets the minimum thumbnail size differently depending on gallery type. For Creative Gallery, the official guidance suggests around 500 px as a practical baseline so thumbnails do not become too small and blurry. For Custom Grid, sizing is tied to cell dimensions: if the base block is 200 px and an image spans a 4 x 4 area, the final displayed size becomes much larger. Slider also supports standard sizes and a custom width and height.

How to Avoid Blurry Slides

Blurriness usually comes from one of three causes. First, the source image is too small. Second, a small thumbnail size is selected and then stretched by the theme or the slider. Third, an image optimizer generates a copy that is compressed too aggressively. Do not try to fix this with extra sharpening in CSS. The underlying problem will remain. Instead, check the actual file size, the selected image size in Modula, and the way the browser renders the image on the front end.

If you are using Slider in a large page block, do not start with Thumbnail. A wide showcase usually calls for Large or a custom size. If the slide sits in a narrow column, Full may be excessive. A useful test is to open browser developer tools, inspect the actual rendered width of the image, and compare it with the file size that is inserted into the markup.

Responsive Behavior for Tablets and Phones

Modula's responsive settings documentation describes a Responsive section for Custom Grid, Masonry, and Slider. There you can enable Custom Responsiveness and define column counts for tablet and phone. The idea for sliders is similar: make sure the block does not feel like a compressed desktop gallery where arrows, captions, and thumbnails sit on top of the image.

Do not test only screen width. Test finger interaction as well. If the slideshow opens in a lightbox, verify swipe gestures, closing behavior, caption visibility, thumbnail placement, and the absence of horizontal page scrolling. If you are using Slider directly on the page, make sure adjacent slides do not become too narrow and that arrows do not cover key image details.

Cache, Lazy Loading, and Scripts

Performance matters, but optimization can break visual plugins. Modula's knowledge base includes separate compatibility instructions for WP Rocket and Autoptimize. For WP Rocket, one documented case involves Modula images not displaying because lazy loading interferes with them, and the suggested fix is to add the Modula CSS selector to the lazy-load exclusions field. For Autoptimize, the documentation notes that minifying Modula files can sometimes break output and recommends excluding the plugin path from optimization.

The practical order is this: first confirm that the gallery works without aggressive optimization. Then re-enable cache and optimization one setting at a time: JavaScript aggregation, deferred loading, CSS minification, and image lazy loading. After each change, clear cache and test the page in a private window. If the problem returns after a specific toggle, you know where to add an exception.

Practical Example: A Portfolio with Manual Viewing and Gentle Autoplay

Imagine a page for an interior design studio. The goal is to present 12 photos from one project: the overall room view, layout, kitchen, living room, materials, lighting details, and the finished outcome. The page already contains the project description, so the gallery should not repeat the text. It should give the visitor a comfortable way to review the visual material. The best fit here is a grid of several strong images on the page and a slideshow in the lightbox after click.

Goal

Create a gallery where the visitor sees a clean image selection, opens any frame in the lightbox, can move through it manually, can start an automatic slideshow if desired, and gets pause on hover when autoplay is active. Captions should help explain the frames without overwhelming the screen.

Preparation

Prepare the images in the Media Library: 12 files with consistent editing, no undersized copies, and clear filenames. Write short captions such as "Living room overview," "Kitchen after the remodel," "Cabinet material detail," and "Evening lighting setup." Make sure Modula, Modula Pro, and the required Lightbox Slideshow add-on are active if that feature is part of your setup.

Setup Steps

1. Open Modula - Add New and create a gallery with a clear internal name.
2. Add the images from the Media Library and arrange them in a logical order: establishing shot, key areas, details, final highlight.
3. For each important image, open the edit panel using the pencil icon and add a title, caption, and alt text.
4. In the gallery settings, choose an appropriate grid type. For a project page, Custom Grid or Masonry is often enough if you want the thumbnails to feel naturally composed.
5. In Lightbox & Links, choose Open images in a Lightbox, then enable arrows, keyboard navigation, swipe gestures, and caption display.
6. In the Lightbox Slideshow settings, enable Enable Slideshow. Turn on autoplay only if you want the sequence to start automatically after the lightbox opens.
7. Enable Pause Slideshow on Hover if users need to inspect the frames rather than just watch a moving sequence.
8. Set the time between slides so users can read the short caption and study the image before it changes.
9. Save the gallery and insert it into the page using the Modula Gallery block or a shortcode.

Verifying the Outcome

Open the page on the front end. First, evaluate the grid itself: are any images too small or awkwardly cropped, does the order support the story, and does the spacing between thumbnails hold up correctly? Then click the first frame. The lightbox should open over the page, the image should display large, the arrows should be accessible, the caption should be readable, and the close action should be obvious.

Start the slideshow. Check that the frames advance at the selected speed. Hover over the image: if pause is enabled, playback should stop. Move to the final frame and verify loop behavior if looped navigation is enabled in the lightbox. On a phone, test swipe gestures, closing, and whether captions overlap the lower part of the image.

A Commonly Missed Detail

If the page shows only the first few images because the number of visible images is limited, check the Show all images setting in the lightbox. Modula's documentation explains an important distinction: when the gallery limits the number of visible images, the lightbox can display either only the visible ones or all gallery images, depending on that setting. For a portfolio, it is often convenient to show 6 strong thumbnails on the page but allow all 12 frames inside the lightbox. On a page with intentionally restricted content, the opposite may be true: hidden images should stay inaccessible.

Safe Styling: Arrows, Dots, and Readable Captions

Once the base setup is working, the next step is usually to bring the slideshow in line with the site's design. Modula exposes part of that styling through settings, and part of it can be adjusted with CSS. Two rules matter here: do not edit plugin files, and do not turn a small style tweak into a fragile dependency on internal markup unless you really need to. Modula's official knowledge base includes CSS examples for changing Slider dot and arrow colors, as well as styling lightbox elements. So these adjustments are reasonable as long as they are small, reversible, and rechecked after updates.

The safest place for small CSS changes is Appearance - Customize - Additional CSS, or the theme's custom CSS field if it has one. If the site uses a child theme or a code snippet manager, styles can live there as well. Do not place CSS into plugin files: updates will overwrite it, and troubleshooting becomes harder.

Example: Make Arrows and Dots More Visible on Dark Photos

If the slider sits over dark images, the default arrows and dots may get lost. Modula's official example uses Slick selectors for dots and .modula-slider selectors for arrows. Below is an adapted version: it does not change how the slider works, it only improves the visibility of the controls.

.slick-dots li button::before {
    border: 2px solid #ffffff !important;
}

.modula-slider .modula-items .slick-next,
.modula-slider .modula-items .slick-prev,
.modula-slider .modula-slider-nav .slick-next,
.modula-slider .modula-slider-nav .slick-prev {
    color: #ffffff !important;
}

After adding it, clear cache, open the page, and check three states: the normal view, hover over the slider, and mobile width. If the arrows are visible but clash with the site's brand color, replace #ffffff with a calmer contrasting color. To roll back the change, remove this snippet from Additional CSS and clear cache again.

Example: Keep an Important Lightbox Caption Visible

Modula's lightbox CSS documentation includes an example that forces the caption to remain visible. That can be useful when the caption is part of the image explanation, such as in an instructional gallery or a case study. Use it only after verifying that the built-in caption settings do not already provide what you need.

.modula-best-grid-gallery .fancybox__caption {
    opacity: 1 !important;
    visibility: visible !important;
}

The test is straightforward: open an image, move through several frames, and make sure the caption does not cover an important detail and remains readable on a mobile screen. If the caption blocks the image, it is usually better to shorten the text or change its position in the lightbox settings than to force it with CSS.

Working with the Block Editor, Page Builders, and Cache

A gallery does not exist in isolation. It is inserted into a page, and that page may be built with Gutenberg, WPBakery, Elementor, Oxygen, Beaver Builder, or another tool. Modula's official knowledge base includes separate materials for builder integrations. The overall workflow stays the same: first create and save the gallery in Modula, then insert it using the native block, a shortcode, or a text element in the builder.

For the block editor, the cleanest option is the Modula Gallery block. It lets you choose an existing gallery from a list and does not force the editor to manually copy a shortcode. The shortcode still matters anywhere the block is unavailable: the Classic Editor, some widgets, WPBakery text blocks, template areas, or internal team documentation.

How to Test Inside a Page Builder

If the page is built with a builder, do not rely only on the builder's internal preview. It may load scripts differently from the public page. Save the changes, open the page outside edit mode, and test the lightbox there. If everything works in the editor but not publicly, look at cache, deferred loading, and script optimization. If it works publicly but not inside the editor, that may be a limitation of the builder itself rather than a failure experienced by visitors.

For WPBakery, Modula's official instructions recommend inserting the shortcode into a Text Block. In other builders, the approach is similar: use an HTML, shortcode, or text block if there is no dedicated Modula widget. After insertion, avoid wrapping the gallery in extra containers with forced overflow: hidden if they clip the lightbox, arrows, or dropdown UI.

Cache and Exceptions Without Overreacting

If the gallery disappears after caching is enabled, do not permanently disable all caching. Modula's WP Rocket documentation points to a specific approach: when image display breaks, you can exclude Modula images from lazy loading using the selector .modula-gallery .modula-items .modula-item img. For Autoptimize, the recommended fix is to exclude wp-content/plugins/modula-best-grid-gallery/ from optimization if minification is what breaks the output.

Apply those recommendations only when the problem actually exists, not preemptively on every site. Otherwise, you may hurt performance for no reason. A good habit is to keep a small change log: which cache setting is enabled, what broke, which exception was added, and what happened after clearing cache. That makes it much easier to understand what has already been tested when the theme or plugin is updated later.

How to Verify the Setup After Configuration

Slideshow verification should be just as systematic as the setup process itself. It is not enough to open the page on your own computer and decide that it "seems to slide." Visitors will use different screens, connection speeds, devices, browsers, and input methods. You do not need a full testing lab, but you do need to check several mandatory states.

Desktop Check

1. Open the page in a normal view, without the admin bar at the top if it changes the viewport height.
2. Check the thumbnail order and the first frame the visitor sees.
3. Open the lightbox by clicking an image.
4. Check arrows, keyboard support, closing behavior, caption, gallery position, and thumbnails if enabled.
5. Start the slideshow and verify the time between frames.
6. Hover over the image to test pause on hover.
7. Move to the last image and verify that the loop either continues or stops exactly as intended.

Mobile Check

On a phone, do not look only at appearance. Test gestures too. Swiping should feel natural, the close button should be reachable, captions should not take over half the screen, and thumbnails should not turn the experience into a cramped control strip. If double-tap is enabled for mobile hover behavior, confirm that it makes sense for a real user. In some cases, it is better to disable the more complex hover behavior and keep opening more direct.

Pay special attention to vertical images. In a slideshow, they can change the lightbox height or feel different next to horizontal frames. If you are using Slider on the page, adaptive height can help with single-row horizontal carousels, but it is not a universal fix for every image mix. Mixed aspect ratios are best tested on real images, not idealized demo assets.

Check After Cache and Optimization

After enabling cache, clear the plugin cache, CDN cache if present, and browser cache, or open a private window. Then test the page again. If JavaScript optimization is enabled, check the browser console. Modula support explicitly recommends reviewing JavaScript errors when asking for help because they often explain why the lightbox, navigation, or autoplay is not starting.

Quick takeaway: a successful Modula Slideshow setup is not proven by the fact that a toggle is enabled. It is proven when a visitor can open an image, control the viewing experience, read the caption, return to the page, and repeat that flow on a phone without the interface breaking.

How to Design a Slideshow for the Actual Page Type

The same Modula Slideshow settings can behave very differently depending on the page context. On a landing page, the slideshow should quickly communicate value. In a portfolio, it should give the viewer control. In an article, it should support the explanation. In a client case study, it should prove the outcome. So before opening the settings panel, it helps to define the gallery's role in one sentence: what should the visitor understand after viewing it, and what should they do next?

If the gallery appears near the top of the page, it competes with the headline, buttons, and above-the-fold content. In that case, the risks are slow loading, captions that are too small, and automatic motion without pause. If the gallery sits in the middle of a detailed guide, it can be calmer: the user already has context, so manual control, captions, and accurate ordering matter more. If the gallery appears near a contact form or download block, it should reinforce the decision instead of distracting visitors with endless motion.

Photographer or Designer Portfolio

For a portfolio, the main risk is mixing your best shots with technical duplicates or weaker frames. Slideshow amplifies every image, so weaker images stand out more than they do in a grid. Start the collection with a strong shot, then show range, and end with an image that reinforces the style. In Lightbox Slideshow, enable arrows, keyboard support, swipe gestures, and short captions. Leaving autoplay off is often the better choice so the viewer sets the pace.

If you are using Slider on the page, do not show too many slides at once. For visual work, a large frame matters more than a catalog effect. Thumbnail navigation can help in a long series, but it needs especially careful mobile testing. If the thumbnails take up too much room, visitors end up seeing the navigation instead of the photograph.

Service Case Study or Before-and-After Project

In a case study, sequence is critical: original state, process, key details, and outcome. Random sorting and shuffle typically hurt more than they help. The slideshow should preserve the cause-and-effect chain. In the first caption, you can define the problem; in the middle, show the work; in the final frame, lock in the final state. If the frames contain explanatory captions, increase the time between slides or use manual start.

Showing gallery position inside the lightbox is useful here. Visitors understand how many frames remain and do not feel trapped in an endless sequence. If the page shows only a few images but the lightbox should open the full series, check Show all images. For case studies, this is often a strong model: the page stays compact, while the full material is available on click.

Product or Property Gallery

For a product, room, real estate listing, or service with visual detail, the slideshow should support evaluation. Start with the overall view, then move into important angles, close details, and usage state. Do not make visitors guess how frame 3 differs from frame 4. A short caption under the image is often more useful than a decorative hover effect.

In this use case, be careful with the download button in the lightbox toolbar. If the images are commercial materials, enable downloading only deliberately. If protection is needed, review the dedicated features in the Modula ecosystem, but do not present them as an absolute barrier. For decision-making, the user benefits more from a large image view, clear captions, and stable navigation.

Instructional or Reference Gallery

In an instructional gallery, images often explain steps: an interface example, the state before configuration, the state after configuration, an error, and the fix. Here, autoplay is almost always secondary. Manual stepping, stopping movement, readable captions, and the absence of effects that hide details matter more. If the images contain text, do not shorten the slide interval. The visitor needs time to read and compare.

For these galleries, a "one image, one idea" structure works well. Do not try to pack an entire lesson into one 40-frame gallery. It is better to split the material into several smaller galleries: preparation, configuration, verification, and errors. That way Modula Slideshow supports learning instead of becoming a long strip where it is hard to find the frame you need.

How to Maintain the Gallery After Publishing

Many problems show up not on the day you configure the gallery, but later: an editor replaces several images, a new optimizer gets enabled, the theme changes, the page builder updates, or the client asks to hide certain frames. So treat the gallery like a small site component that needs maintenance. In Modula terms, that means clear names, tidy captions, fixed ordering, testing after updates, and careful handling of cache settings.

What to Document for the Next Editor

Leave a short internal note in the site's documentation or editorial checklist. It only needs to include the gallery name in Modula, the page where it is inserted, the insertion method - block or shortcode, the selected viewing mode, whether Lightbox Slideshow is enabled, whether autoplay is on, which cache plugin exceptions were added, and which CSS overrides are in place. That note takes only a few minutes to create, but it helps prevent chaos later.

If the site has multiple galleries serving different purposes, do not apply the same settings to all of them automatically. What works well for a portfolio may get in the way in an instructional article. What looks good in a homepage Slider may be unnecessary in the lightbox of a long project page. Create 2 to 3 internal presets as part of editorial practice: portfolio, case study, compact showcase. If you have the Modula Defaults extension, review it separately: it is designed to save settings sets and apply them to new or existing galleries, but it should be used deliberately.

Testing After Updates

After updating Modula, the theme, the page builder, or a cache plugin, open 2 or 3 of the most important galleries. Do not test the whole site. Check the key states: the page loads, the lightbox opens, the slideshow starts, pause works, the caption is visible, and mobile swipe still behaves correctly. If you use custom CSS for arrows, dots, or captions, confirm that the selectors still target the intended elements.

Do not keep too many outdated images in the gallery. A slideshow creates the feeling of a curated sequence. If old frames, duplicates, or images with inconsistent processing accumulate, the viewing quality drops. It is better to review active galleries every few months: remove weaker frames, update captions, check alt text, and confirm that the order still fits the page.

How to Safely Change a Published Gallery

If the gallery is important to a commercial page, do not change too many settings at once. First, create a copy of the gallery if that option is available in your Modula setup, or build a new test gallery with the same image set. Test the new settings on a hidden page. After verification, replace the shortcode or the selected gallery in the block. It takes a little longer, but it is safer than changing a live gallery and then trying to figure out why the slideshow behaves differently.

When replacing images, preserve the meaning of the sequence. If a new frame belongs in the middle of a case study, insert it there instead of adding it to the end. If you add an image with a different aspect ratio, test how it affects slider height and the lightbox. If you change a caption, check it on a phone. Any change to a visual sequence should be tested in the actual mode visitors use to view the gallery, not only in the image list inside the admin panel.

Common Modula Slideshow Issues and How to Diagnose Them

Most slideshow issues fall into one of five buckets: the lightbox does not open, images look blurry, navigation does not appear, the gallery breaks after optimization, or mobile viewing behaves differently than expected. Below is a practical troubleshooting path that avoids risky edits to plugin files.

The Lightbox Opens Incorrectly or Shifts Down the Page

Symptom: after clicking, the image does not appear over the page, the lightbox is offset, styles look broken, or the gallery works only with a different theme.

Possible cause: a theme conflict. In one WordPress.org discussion, a Modula representative pointed out that the theme was not using the standard WordPress body_class() function, so the required class was missing from body and the lightbox rendered incorrectly.

What to check: temporarily switch to a default theme on a test copy of the site or use Health Check safe mode. If the lightbox works with another theme, the problem is likely tied to the theme template rather than the slideshow settings.

How to fix it: ask the theme developer to verify that body classes are being output via body_class(). Do not edit WordPress core and do not edit Modula files. If the theme was purchased from a developer, it is better to request a theme update or patch.

When to roll back the setting: if a temporary CSS workaround only hides the problem and breaks other pages, remove it and fix the conflict at the theme level.

The Gallery Stops Displaying After Enabling WP Rocket or Autoptimize

Symptom: the gallery works without cache, but after optimization is enabled the images disappear, the lightbox does not launch, or navigation stops responding.

Possible cause: the optimizer changes the script load order, minifies plugin files, or applies lazy loading in a way that prevents Modula from finding the elements it expects.

What to check: disable only the problematic optimizer module: image lazy loading, JavaScript aggregation, deferred execution, or minification. Do not turn everything off at once, or you will not know the actual cause.

How to fix it: for WP Rocket, Modula documentation suggests excluding the selector .modula-gallery .modula-items .modula-item img from lazy loading. For Autoptimize, it suggests excluding wp-content/plugins/modula-best-grid-gallery/ from optimization if that is what is breaking the output.

When to roll back the setting: if the exception does not change the behavior, remove it and continue troubleshooting. Unnecessary exceptions reduce optimization quality and should not accumulate without a reason.

Images Look Blurry

Symptom: thumbnails or slides look soft even though the source files are high quality.

Possible cause: the selected image size is too small, the slider is stretching the file, or Creative Gallery is using a low minimum size. Modula documentation mentions roughly 500 px as a guideline for Creative Gallery, while Custom Grid depends on cell size behavior.

What to check: compare the actual rendered width of the slide with the image size the browser loads. Check the Gallery Images Size setting and the selected gallery type.

How to fix it: increase the image size in the gallery settings or choose a custom size that matches the real display block. If you are using an external image optimizer, check its compression quality.

When to roll back the setting: if increasing image size noticeably hurts speed, revert to the previous value and choose an intermediate size. The goal is adequate sharpness without unnecessary weight.

Autoplay Feels Annoying or Makes Captions Hard to Read

Symptom: images advance too quickly and the visitor does not have time to inspect the frame or read the caption.

Possible cause: autoplay is enabled, the time between slides is too short, or pause on hover is disabled.

What to check: open the lightbox as a normal visitor and read the caption out loud. If the frame changes before you finish, the interval is too short.

How to fix it: increase Time Between Slides, enable Pause Slideshow on Hover, or keep manual playback without autoplay.

When to roll back the setting: if the gallery contains commercially important details, it is usually better to turn autoplay off completely and leave control to the user.

On a Phone, the Gallery Does Not Open on the First Tap

Symptom: the user taps an image, but the lightbox does not open immediately, making it seem as if the tap did not work.

Possible cause: a lightbox setting is enabled that requires a double tap on mobile: the first tap shows the hover effect, and the second opens the lightbox.

What to check: open the page on a phone and try tapping a thumbnail twice in sequence. Then check the Mobile requires double-tap setting in Lightbox & Links.

How to fix it: if hover effects are not providing important information, disable double tap and simplify the mobile opening behavior.

When to roll back the setting: if hover titles on the thumbnail matter and users should see them first, keep double tap enabled but make the page captions clearer.

Hidden Images Do Not Open in the Lightbox

Symptom: only the first images are visible on the page, and the lightbox cycles through only those, even though the gallery contains more files.

Possible cause: the gallery uses the Images to show limit, while the lightbox setting Show all images is not enabled. Modula documentation explicitly describes this branch.

What to check: open the image limit settings and the Lightbox & Links section. Compare the number of images in the gallery, the number of thumbnails on the page, and the number of frames available while browsing.

How to fix it: if you want to show only part of the thumbnails on the page but allow visitors to browse the full gallery, enable showing all images in the lightbox. If hidden images should stay inaccessible, leave the current behavior in place.

When to roll back the setting: if enabling full display exposes images that are supposed to remain hidden, turn it off again and split the content into separate galleries.

Limitations and Cases Where You Need a Different Approach

Modula Slideshow solves a clear problem: convenient image viewing inside a WordPress gallery. But it should not be treated as a universal visual archive management system. If you need nested catalogs, client proofing, image protection, video, dynamic import, filters, or albums, look at the relevant Modula extensions and confirm whether they are part of your setup. Some capabilities live in the Pro ecosystem and require active add-ons.

For sites with very large photo archives, think about structure in advance. One long slideshow with hundreds of images is almost always inconvenient. It is better to divide the material into albums, categories, project pages, or topic-based galleries. If you only need a single page with 8 to 15 frames, slideshow works very well. If you are migrating a multi-year archive, you will need a navigation system above the level of a single lightbox.

The second boundary is accessibility and motion control. Automatic movement can interfere with people who read slowly, use a keyboard, zoom the page, or rely on assistive technology. So the slideshow should preserve manual control and a way to stop movement. Do not hide controls in pursuit of a "clean" design if the gallery carries important meaning.

The third boundary is SEO. A gallery by itself does not guarantee more search traffic. What helps is proper filenames, alt text, captions, context around the gallery, loading speed, and correct image indexing. Modula provides the tools for building galleries, but SEO quality depends on editorial work and the site's technical condition. Do not promise a client that enabling slideshow will automatically improve rankings.

FAQ for Setting Up Modula Slideshow

Do I Need to Use Slider to Get Modula Slideshow?

Not always. If you want a slideshow inside the lightbox after clicking an image, use Lightbox Slideshow together with the setting that opens images in a lightbox. Slider is only needed when the gallery itself should appear as a slider directly on the page.

Why Can't I See the Required Mode in the Settings?

Check whether the core Modula plugin is installed, whether Modula Pro is active, whether the required extension is enabled under Modula - Extensions, and whether you are editing a gallery where that mode is actually available. Some features depend on the Pro version or a separate add-on.

Can I Show Only Some Images on the Page but Browse All of Them in the Lightbox?

Yes. That use case is described in the documentation for Images to show. If you limit the number of visible images, lightbox behavior depends on the Show all images setting. Enable it if images hidden on the page should still be available inside the viewer.

What Works Best on Mobile: Thumbnails, Arrows, or Swipes?

Swipes usually feel the most natural, arrows help less confident users, and thumbnails are useful only if they do not take up too much space. Test on a real phone screen. If thumbnails compete with the image and captions, it is better to hide them or leave access to them through a toolbar button.

Why Are Fade Effect or Center Mode Not Working?

Some Slider options have conditions. Center mode works when Fade is disabled, and Fade effect is tied to showing one slide together with thumbnail navigation. If the selected settings combination conflicts with those conditions, the effect may not turn on as expected.

Can I Insert the Gallery into WPBakery or Another Builder?

Yes. The official WPBakery instructions recommend creating the gallery, copying the shortcode, and inserting it into a Text Block. In other builders, use a similar shortcode or HTML block if there is no dedicated Modula widget.

Should I Enable Slideshow Autoplay?

Enable autoplay only where motion helps the viewing experience and does not interfere with reading. It can work well for a portfolio with short captions. For detailed case studies, products, instructions, and image sets with fine detail, manual start or a longer delay is usually the better choice.

What Should I Do If the Gallery Still Does Not Work After Setup?

Start by checking for a theme conflict, then review cache and optimization, and then inspect JavaScript errors in the console. If the issue continues, prepare a page URL, a screenshot, a list of active optimizers, and the result of testing with a default theme. That set of information will make support much faster and more effective.

When Modula Slideshow Is a Strong Choice

Modula Slideshow is a strong fit when you need controlled image viewing inside a WordPress gallery: not just a grid, but a step-by-step sequence with a lightbox, play button, autoplay, pause, captions, and behavior you can verify across devices. It is especially useful where images help people make a decision: a portfolio, a visual case study, an interior project, a photo shoot, a curated work sample, an educational series, or a compact showcase.

Before rolling it out, do not try to enable everything at once. Create a test gallery, verify the lightbox, set the sequence and captions, and then add slideshow, autoplay, and extra navigation elements. After that, test the page on a phone, with cache enabled, and in the normal public view. That order reduces the risk of spending time on attractive configuration layered on top of an unresolved conflict.

If this is the experience you need, you can move from this guide straight into testing it on your own site and download Modula Slideshow. Start with a small gallery, document your changes, and judge the outcome through the visitor's eyes, not only the administrator's. That is how the slideshow becomes not a decorative animation, but a clear way to present images in the right order.