This plugin is a valuable addition to WordPress websites, offering a unique mosaic image addon. It provides users with the capability to create visually engaging layouts through a user-friendly interface, enhancing the overall appearance of their websites. By leveraging the advanced features of this tool, users can effortlessly customize their image galleries, showcasing content in a visually appealing and organized manner.

Plugin Version: 3.5.7
 
WordPress plugin Themify Mosaic

Plugin Features

With its intuitive drag-and-drop functionality, this addon simplifies the process of arranging images into stunning mosaic layouts. Users can easily resize, crop, and customize images, allowing for a high level of customization and creativity in design. The grid-based system ensures that images align seamlessly, creating a polished and professional look that captivates visitors.

One of the standout features of this plugin is its responsive design capabilities, ensuring that mosaic layouts adapt flawlessly to various screen sizes and devices. This responsive functionality guarantees an optimal viewing experience for site visitors, whether they are accessing the website from a desktop, tablet, or smartphone. The seamless responsiveness of the layouts enhances user engagement and overall user experience.

Furthermore, this plugin offers a wide range of styling options and effects to enhance the visual appeal of mosaic layouts. Users can choose from various hover effects, animations, and custom styling to add flair and sophistication to their image galleries. By incorporating these dynamic elements, users can create captivating visual experiences that leave a lasting impression on their audience.

In addition to its design flexibility, this plugin also prioritizes performance and speed, ensuring that websites maintain fast loading times while featuring intricate mosaic layouts. The lightweight nature of Themify Mosaic optimizes site performance, allowing users to create visually stunning galleries without sacrificing speed. This emphasis on performance makes it an ideal choice for users looking to balance design aesthetics with functionality.

Overall, this plugin presents a powerful solution for WordPress users seeking to elevate their websites with striking mosaic image displays. Its user-friendly interface, responsive design, styling options, and performance optimization combine to offer a comprehensive tool for creating visually stunning and engaging content layouts. Whether showcasing portfolios, products, or creative projects, this plugin empowers users to craft visually compelling websites that stand out in a crowded digital landscape.

Specifications:

Release date: 12-11-2019
Last updated: 14-04-2026
Type: Paid
License: GPL 
Subject: Photos & Images
Compatibility: W5.x W6.x
Includes: Plugin
Language packs: English
Developer: Themify

Rating:
4.5537190082645 1 1 1 1 1 (242 Votes)

Download by subscription!

You need to log in on the site and purchase a club subscription!

Share with your friends!

 

Themify Mosaic Guide: Mosaic Grids, Content Sources, and Result Validation

Themify Mosaic is an add-on for Themify Builder that helps you create a controlled mosaic layout made of tiles and display different types of WordPress content inside it. This guide focuses on the actual workflow rather than marketing copy: what to check before installation, where to find the module after activation, how to choose a content source, how to configure the tiles, mobile behavior, effects, pagination, and how to confirm that the finished layout really works on your site.

Cover image for the Themify Mosaic guide with a mosaic grid and result validation
The main idea behind Themify Mosaic is to connect the content source, the tile template, and the visible result on the page.

The plugin does not replace the entire WordPress gallery system, and it is not a standalone visual page editor. It works inside the Themify Builder ecosystem: the module is added to a Builder row, pulls content from the selected source, and places items according to a tile template. That means the quality of the final page depends not only on the add-on itself, but also on image prep, posts, products, custom post types, caching, the theme, and responsive settings.

The main practical value of this guide is showing how to use Mosaic deliberately. A mosaic grid can look impressive very quickly, but without checking your sources, image sizes, tile order, and phone behavior, it can easily turn into a heavy block with unpredictable cropping. Below, we will go through several scenarios: a work gallery, a post showcase, a WooCommerce product block, a file catalog pulled from a folder, and a setup tied to Post Type Builder.

This article does not cover purchasing instructions or activation workarounds. It assumes you already have a legally obtained add-on ZIP file, access to the WordPress admin panel, and either Themify Builder or a Themify theme with Builder already available.

What Mosaic Does and When It Works Better Than a Standard Gallery

A standard gallery usually takes a set of images and arranges them into columns. A masonry grid makes the composition feel more dynamic, but the shape of the blocks is still largely determined by the proportions of the images themselves. Themify Mosaic works differently: you define a tile template, change the size and shape of individual areas, and then map content into them. In the official Mosaic documentation, this is described through the tile template area, where you can add tiles, select saved templates, and modify the layout.

This approach is useful when a block needs editorial logic. For example, on a photographer's page, you may want one hero image to stand out, place 2-3 supporting shots beside it, and leave room for a caption. On a blog, you can build a showcase for fresh content: one wide feature tile for the main article, several smaller tiles for shorter updates, and a button to load more posts. In a store, you can highlight a product selection not as a standard uniform grid, but as a visual block where a new product gets more space.

The key difference from a fixed masonry grid

Masonry usually solves the problem of different image heights well, but it does not answer the question, "Which item should be the main one?" Mosaic gives the editor more control: tiles can be stretched, templates can be saved, and layouts can be reused in another module. That matters most on homepages, portfolios, landing pages with curated content, and commercial showcases where the attention flow should not depend only on the size of the source image.

At the same time, Mosaic does not override basic content prep rules. If your images are too small, text has no headings, products have poor thumbnails, or posts are missing featured images, the mosaic will not make the block high quality on its own. It changes the presentation layer, but it does not fix weak source data.

Where the product may not be the right fit

There are cases where another tool makes more sense. If you need a dedicated photo gallery with albums, proofing, advanced lightbox logic, watermarks, and its own gallery library, a specialized gallery plugin will be more practical. If the site does not use Themify Builder and the team does not plan to adopt it, adding Mosaic just for one block may be unnecessary overhead. If you need a strict catalog with filters, advanced sorting, and faceted search, a mosaic layout should be used only as a presentation block, not as the main search interface.

Practical rule: choose Mosaic when you need a controlled visual block inside Themify Builder, not a standalone gallery or catalog management system.

What to Check Before Installation

Before installing Themify Mosaic, it is worth checking not only whether you have the add-on ZIP file, but also the environment where it will run. The official documentation states that Builder Addons require Themify Builder and can be used either with a Themify theme or the standalone Builder plugin. That is the main prerequisite: without Builder, the Mosaic module will not appear in the module panel and you will have nowhere to use it.

The second layer of prep is the page type. Themify Builder works with posts, pages, and custom post types, but the homepage has an important caveat: the default WordPress homepage may be a posts archive rather than a static page. If you want to edit a full homepage through Builder, first create a static page and assign it in the WordPress Reading settings. This is not a Mosaic-specific quirk, but without it, many users end up looking for the module in a place where it cannot appear.

Mini checklist before activation

  • Make sure Themify Builder is installed and enabled, or that you are using a current Themify theme with Builder built in.
  • Create a site backup, or at least export the important Builder page before making changes.
  • Prepare a test page where you can enable Builder without affecting the live homepage.
  • Decide on the content source in advance: posts, static text, a media gallery, WooCommerce products, Post Type Builder, NextGEN Gallery, RSS, Event Posts, or a file folder.
  • Make sure your posts, products, or custom post types include images, titles, and captions if you plan to show them in tiles.
  • Temporarily disable aggressive JavaScript optimization in your test environment if the Builder editor or preview behaves unpredictably.

The point of this prep is not to configure everything perfectly in advance, but to eliminate the most obvious causes of an empty mosaic: inactive Builder, the wrong page type, missing images, and cache conflicts. WordPress documentation on plugin management also recommends checking compatibility, updates, and using the standard path Plugins -> Add New -> Upload Plugin for ZIP archives.

How to choose a test page

The best option is a draft page or a utility page blocked from indexing that uses the same template as the future public page. Add several posts, images, or products to it, enable Builder, and test the module with real data. If you test with an empty dataset, Mosaic may look fine even though problems will surface later: short titles will not reveal overflow, identical images will not expose a weak template choice, and a single screen will not uncover a pagination issue.

If the site already uses heavy caching, test under two conditions: first with optimization disabled for the test page, then with caching enabled. That makes it easier to tell whether the issue is in Mosaic settings or in lazy loading, minification, script combination, or an outdated set of generated styles.

Installation and the Module's First Appearance in Builder

Installing Themify Mosaic is similar to installing a standard WordPress plugin from a ZIP file. According to the official Mosaic documentation, the archive is downloaded from the Member Area and then uploaded through the WordPress admin panel: Plugins -> Add New -> Upload Plugin. After installation, activate it. If your browser automatically unpacked the ZIP file, download it again using "save link as," because WordPress expects an actual ZIP archive.

After activation, create or open a page, enable Themify Builder, and check the module panel. Themify documentation states that Mosaic appears in the module panel under the Addons section and is available in both backend edit mode and frontend edit mode. That detail matters: if you can see Builder but not Mosaic, the issue is usually not the page itself, but the add-on activation state, Builder version, user permissions, or module filtering.

Path from installing Themify Mosaic to seeing the module in the Themify Builder panel
After activation, Mosaic should appear in the Themify Builder module panel under the Addons section.

Initial verification after installation

Do not start with a large homepage. Add Mosaic to an empty row on a test page and choose the simplest possible source, such as Text or Gallery. The goal is to confirm that the module opens its settings window, saves properly, and outputs a visible block on the front end. Only after that should you connect WooCommerce, Post Type Builder, or a directory listing.

Check three states. In the Builder editor, the module should add without errors. After clicking Save and reloading the page, it should remain in place. On the public page, the mosaic should render not only for the administrator, but also in a private browser window while logged out. If the block is visible only in edit mode, look at Builder saving, caching, access permissions, or a conflict with an optimization plugin.

What to do if the module does not appear

First, make sure both parts are active: Themify Builder and Themify Mosaic. Then open a standard page or post where Builder is definitely available. If the WordPress block editor is in use, Themify Builder may appear as a separate Builder Block or through the Themify interface rather than as a standard gallery block. If the module still does not appear, temporarily disable plugins that interfere with the admin UI, minify admin scripts, or restrict user roles.

Safe check: do not immediately remove Mosaic and Builder. First disable the optimization plugins that seem suspicious and test the page in a clean state, then re-enable plugins one at a time.

Content Sources: What You Can Display in a Mosaic

The most product-specific part of Themify Mosaic is the Display selector. It determines where the module pulls items from for the tiles. The official documentation lists several types: Posts, Text, Gallery, WooCommerce Products, Post Type Builder, Themify Event Posts, NextGen Gallery, RSS Feeds, and Directory Listing. Once you choose a type, settings related to that specific source become available.

That makes Mosaic flexible, but it also requires discipline. A common mistake is choosing the most complex source right away and then trying to fix the appearance. It is better to move from simple to complex: first confirm that the tile template works with static text or a gallery, then connect posts, then products or custom post types. This separates two tasks: the layout design and the correctness of the content query.

Posts and Gallery for editorial blocks

Posts works well for blog showcases, news sections, magazine-style layouts, and "featured" content areas. The main thing to check here is whether each item has a featured image and a clear title. If item title or item caption is enabled in the tile, long titles and descriptions may cover the image, especially when hover effects are active. For blocks like this, prepare categories, tags, or another filtering method in advance so random older posts do not end up in the mosaic.

Gallery is more convenient when you want to manually assemble a set of images from the WordPress media library. It is a good fit for portfolios, interior showcases, lookbooks, team presentations, or a visual event recap. Its strength is control over the image selection. Its weakness is that when the image count grows, manually maintaining the order and captions becomes harder than working through posts or custom post types.

WooCommerce Products for showcases and promo blocks

The WooCommerce Products source is best used for visual showcases, not as a replacement for a full store page. Mosaic can present a curated product selection beautifully, but filters, sorting, variations, cart behavior, and checkout still belong to WooCommerce and the theme. Before adding products, check thumbnails, titles, and publication status. If a product is hidden from the catalog or has no image, it may look weak inside a tile.

A practical use case is a homepage block: one large tile for the main product, several small tiles for new arrivals, a hover effect with the title and a short caption, and a button or link to the full catalog below the block. Try not to overload the mosaic with prices, badges, long descriptions, and everything else that normally belongs on a product card. The mosaic should create interest, not replace the commercial product page.

Post Type Builder, Event Posts, and NextGEN Gallery

The connection to Post Type Builder matters on sites where content is already organized into custom post types: properties, projects, testimonials, staff members, menus, case studies, films, training programs, and similar content. PTB documentation shows that a custom post type can have fields, taxonomies, and templates, and Mosaic uses that data as a source for a visual block. The main risk here is not the look, but the data structure: if the custom post type has no image or no archive output, the mosaic may receive an incomplete set of items.

Themify Event Posts is useful for event-driven sites if the corresponding Themify plugin is in use. The WordPress.org page for Event Post confirms that it adds a dedicated post type for events and, when paired with Themify Builder, provides its own module. In Mosaic, that can work well as a visual event board: the next event gets a larger tile, with the rest arranged compactly around it.

NextGen Gallery is helpful when the site already stores images in NextGEN and it does not make sense to move them into the standard media library just for one block. In that setup, Themify Mosaic becomes a presentation layer on top of the existing gallery structure. But editing the galleries, albums, and images themselves still remains a NextGEN task.

Directory Listing and RSS Feeds

Directory Listing is one of Mosaic's less common but more powerful features. Themify documentation states that the module can automatically output files from a specified folder: images get thumbnails, and mp3 files can include an audio player and data pulled from ID3 tags. This is useful for a media archive, internal library, press materials collection, or music section where files are regularly added to a folder.

But this mode requires care. The folder must be accessible to the site, contain only files that are safe to show publicly, and not turn into a chaotic dump. Do not use directory listing for private materials, drafts, backups, or files containing personal data. If you need tighter control over descriptions and SEO, it is better to create posts or a custom post type rather than relying only on filenames.

RSS Feeds can be used for an external content block, but with caution. An external feed can change, stop providing images, or start returning unsuitable titles. For important pages, your own posts are the safer option, while RSS should be reserved for secondary informational blocks.

Tile Templates, Block Sizes, and Reuse

The tile template is the central mechanism in Themify Mosaic. In the module window, you can choose a ready-made template, load a saved one, save the current layout, and add or remove tiles. The official documentation emphasizes that tiles can be modified inside the template area and that the current template can be saved for reuse in another Mosaic module. This saves time when the site needs similar blocks, such as "featured case studies" on the homepage and "related projects" on service pages.

Configuring a Themify Mosaic tile template with one large tile and supporting cards
A good tile template creates visual hierarchy: a main item, supporting items, and clear spacing.

How to build a mosaic template without chaos

Start not with an attractive shape, but with the role of each item. In an editorial block, one tile may be the "main feature," two may be "supporting items," and the rest may serve as "quick links." In a portfolio, a large tile may show the strongest image, medium tiles may show alternate angles, and small tiles may highlight details. In a product showcase, one tile may be the product of the month, while the others feature related products.

If all tiles are equally important, there is no reason to force a complicated mosaic. A clean grid or a regular gallery will be more honest and easier to understand. Mosaic works best when there is a clear attention hierarchy. So before you start configuring it, ask yourself which item the visitor should notice first, what they should see second, and what next action you expect after they view the block.

When to save a template

Save a template only after testing it with real content. If you save the shape too early, you may duplicate a weak version across several pages and then have to fix everything manually. The right order is: choose the source, add 6-10 real items, configure the tiles, check the titles and images, test the mobile view, and only then use Save Current for reuse.

When reusing a template, remember that the same geometry does not always suit different content sources. A template that works well for a photo gallery may look weak with products because product cards need readable titles and sometimes badges. A template built for posts may work poorly with mp3 files in a directory listing because an audio player needs more horizontal space.

How many tiles to use

The number of tiles should match the amount of content and the pagination method you choose. If the template has 6 tiles but the source returns 30 posts, part of the content will not be reachable inside that block unless pagination is enabled. If you turn on infinite scroll, the mosaic can load more content, but the page may become heavier. If you use numbered pagination, users will understand that more pages exist, but the block will start behaving like a mini catalog.

For a promo block, 5-8 tiles are usually enough. For an archive-style showcase, you can use more, but in that case it is better to think through pagination and loading speed in advance. For a directory listing with many files, it is wise to limit the output and avoid turning the page into an endless file list.

Appearance Settings: Grid, Slider, Gutter, Hover, and the Mobile Breakpoint

Once the source and template are selected, the next step is to configure the appearance. The Mosaic documentation lists the main appearance options: Mosaic Style, Mobile Trigger Point, Gutter, Hover Effect, Entrance Effect, Item Title, Item Caption, Item Badge, Caption Length, and Pagination. This is not just a decorative checklist. Each option affects how users read the block and how reliably it behaves across screen sizes.

Grid or slider

Grid works best for blocks where it matters to see multiple items at once. That includes portfolios, article selections, product showcases, work galleries, and event boards. Slider makes sense when page space is limited or you want to present the selection more compactly. But a slider is harder to scan: the user does not see everything at once and may miss items. For that reason, a key page block is usually better as a grid, while a slider fits secondary content areas.

Gutter and density

Gutter controls the spacing between tiles. A zero or very small gap creates a dense collage effect, but it also makes titles and hover states harder to read. Too much space breaks the mosaic apart and weakens the sense of a single composition. For most sites, it is best to start with a medium value, test it on images with different colors, and only then reduce or increase the spacing.

If the block sits on a page with a lot of white space, you can make the gutter slightly larger. If it is part of a dense catalog or a promo section with bold visuals, the spacing should still be wide enough to keep the tiles from blending together. On mobile, clarity usually matters more than the collage effect: the items should stack into a readable vertical sequence.

Hover Effect, titles, and captions

Hover Effect helps communicate interactivity, but it should not hide the meaning of the block. If the title appears only on hover, users on touch devices may not get the same experience. So for important cards, it is better to keep the item title visible or confirm that the mobile view does not lose the caption. Caption Length is there to keep long descriptions from turning the tile into a text block laid over an image.

For portfolios, short captions tend to work best: project name, type of work, city, or category. For posts, use the title and possibly a short excerpt. For products, keep the title and visual emphasis, and leave the details for the product page. If there is too much text inside the tiles, the mosaic loses its purpose: its job is to show visual structure quickly and lead the user to the details.

Entrance Effect and performance

The documentation notes that tiles are hidden until fully loaded by default, and then an entrance effect may be triggered. That can look polished, but on a heavy page it may feel like a delay: the user sees an empty area, waits for the block to appear, and is not sure whether the page is still loading. If the site already uses theme animations, lazy-loaded images, and caching, test the entrance effect especially carefully.

If the block matters for the first screen, avoid aggressive animation. If it sits farther down the page, a subtle appearance effect may be fine. If JavaScript errors appear in the browser console or the mosaic sometimes stays empty until scrolling, temporarily disable the entrance effect and check whether the issue disappears. That is not a final fix, but a way to separate an animation issue from a content source issue.

Mobile Trigger Point

Mobile Trigger Point sets the threshold at which the mosaic switches into its mobile layout, where tiles become full width and stack one under another. Do not leave this setting untested. If the threshold is too low, the tiles may feel cramped on tablets. If it is too high, the mosaic turns into a long vertical list too early.

Test at least three widths: a wide screen, a tablet, and a phone. Pay special attention to titles and hover captions. Mobile testing matters more for Mosaic than for a simple gallery because the custom tile geometry changes much more dramatically on narrow screens.

Practical Example: A Work Showcase on a Services Page

Let us look at a concrete scenario: you need to build a visual showcase of six projects on a services page. The main case study should be large, three medium projects should sit beside it, and two compact examples should appear below. The user should see a range of work, click through to a full case study, and not get hit with a heavy full-screen gallery.

Practical Themify Mosaic workflow from choosing a source to validating the page
Working workflow: prepare the content, build the template, configure the appearance, save it, and validate the result.

Goal

Create a "Featured Projects" block on a static WordPress page built with Themify Builder. The content source is either posts or a custom post type called "Projects" if it was created through Post Type Builder. Each item includes an image, a title, and a short caption.

Preparation

Start by preparing six published items. Each one should have a good featured image and a short title. If you are using a custom post type, confirm that it is available for output and includes the required fields. If you are using a standard posts section, assign a dedicated category such as "Featured Projects" so Mosaic does not pull random blog posts.

Open the test page, enable Themify Builder, and add a new row. Insert Mosaic from the Addons section. On the first pass, do not configure every effect. First make sure the block outputs the correct items.

Setup steps

  1. In the Module Title field, enter a clear name for internal editor navigation, or leave it blank if the page section already has a heading.
  2. In Display, choose Posts or Post Type Builder, depending on your content structure.
  3. Limit the source by the correct category, taxonomy, or post type so only the selected projects appear in the mosaic.
  4. In the tile template area, create one large tile, three medium tiles, and two compact ones. Do not add more tiles than the block needs for its first screen.
  5. Choose Mosaic Style as grid if the block should show all projects at once.
  6. Adjust Gutter so the images have enough breathing room for hover states and captions.
  7. Enable Item Title and check Caption Length so the caption does not cover the entire tile.
  8. Choose a subtle Hover Effect and make sure it does not interfere with clicking the tile.
  9. Set Mobile Trigger Point so the tiles stack into a clear vertical list on phones.
  10. Click Save, open the page outside edit mode, and verify the result in a private window.

Result validation

The result can be considered working if all six required items appear on the public page, the large tile really draws attention to the main project, the links open the correct pages, the mobile view does not crop the captions, and the block remains visible after clearing the cache. Also check keyboard navigation and link focus if the tiles are clickable. For SEO, it matters that the images have meaningful alt text in the source media files or content source, and that titles are not hidden only inside the image itself.

The detail people often miss

If you changed the tile template after selecting the source, the order of visual attention may stop matching the importance of the items. For example, the first query result may land in the large tile while the best case study ends up in the third position. The fix depends on the source: for posts, adjust the publication order or use manual selection; for a custom post type, use the available sorting options; for a gallery, rearrange the images manually. Do not try to fix the order with tile size alone.

Checking Speed, SEO, and Block Stability

A mosaic section is almost always visually heavier than a standard text block. It uses images, styles, sometimes animation, and sometimes progressive loading of additional items. So after configuration, it is important to check not only the appearance, but also stability: how the block loads, what happens with caching, how the images behave, whether an empty area appears, and whether the page breaks after a Builder update.

Images and quality

Mosaic needs source images with enough size headroom. If an image is small and the tile is large, the browser will stretch it and the result will look blurry. If the image is too heavy, the page will load more slowly. Prepare images at a sensible size, use standard WordPress optimization or a trusted optimization plugin, and then always open the page and confirm that the mosaic is not receiving an overly small thumbnail.

If the block displays posts, WooCommerce products, or custom post types, keep an eye on featured images. For a gallery, check order and captions in the media library. For a directory listing, filenames and metadata matter more because the content is pulled from a folder. For mp3 files, review the ID3 tags if you expect audio information to be displayed.

SEO without over-optimization

Mosaic can help hold attention and improve navigation to important content, but it does not guarantee ranking growth on its own. Its meaningful SEO value depends on where the tiles lead, how clear the titles are, whether there is text around the block, and whether all useful information is hidden inside images. Do not make the mosaic section the only content on the page. Add a short explanation before it and links or text context after it.

If a tile links to a project, product, or post, the title should make sense to a human reader. Do not insert the same phrase with the product or service name into every tile. Use normal names for projects, categories, and materials instead. A good mosaic strengthens page structure - it does not replace text and navigation.

Cache and lazy loading

The Themify Builder changelog shows that recent releases have regularly fixed conflicts involving lazy loading, WooCommerce, generated styles, WPML, RankMath, and other scenarios. That is not a reason to fear updates, but it is a reason to test your mosaic block after updating Builder, the theme, caching tools, and optimization plugins. Pay especially close attention to pages where Mosaic uses products, post filters, slider mode, or entrance animation.

If the block appears empty after enabling minification or lazy loading, first clear the Builder or theme cache and the cache in the optimization plugin. Then temporarily exclude Themify Builder scripts from combination or delayed execution if your optimizer allows it. Do not add exclusions blindly across the entire site. Start with the specific page and identify which setting actually affects Mosaic.

Safe Appearance Tweaks Without Editing the Plugin

Code only belongs in a guide when it is safe and does not depend on closed internal add-on APIs. With Themify Mosaic, you should not invent hooks or edit plugin files. The safest level of customization is CSS in a child theme, in theme settings, in Themify Builder Page Custom CSS, or in a trusted CSS snippet plugin. That approach can be disabled quickly if the appearance changes after a theme or Builder update.

Below is an example of a gentle tweak: it does not alter Mosaic logic, does not interfere with queries, does not break WooCommerce, and does not depend on PHP hooks. The goal is simply to make tile captions easier to read on light or busy images. It is best to add a section class to the row or module through Themify Builder settings, such as project-mosaic, so the CSS applies only to the specific block.

.project-mosaic .module-mosaic .post-title,
.project-mosaic .module-mosaic .item-title {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.project-mosaic .module-mosaic .post-content,
.project-mosaic .module-mosaic .item-caption {
  max-width: 90%;
}

After adding the CSS, test the page in a normal window and a private window, then on a phone. If the captions are easier to read and do not overlap buttons, the tweak is useful. If the class does not work, do not start guessing dozens of selectors. Open the browser inspector, find the actual Mosaic container on your page, and refine the selector. If the selector changes after a Builder update, simply remove or update this CSS.

Do not edit Themify Mosaic files directly. Any change inside the plugin folder may disappear after an update and make troubleshooting harder.

Common Themify Mosaic Issues and Troubleshooting

With Mosaic, problems usually fall into four groups: the module cannot be found, the content does not render, the mosaic looks different from what you saw in the editor, or the block breaks after caching and updates. Below is symptom-based troubleshooting rather than generic advice to "reinstall everything."

Troubleshooting Themify Mosaic issues: empty block, wrong images, and cache problems
Troubleshooting works best as a chain: symptom, source, template, front end, cache, and repeat verification.

The Mosaic module does not appear in the Builder panel

Symptom: Themify Builder opens, but Mosaic is missing from the Addons section. Possible causes include the add-on not being activated, the wrong archive being installed, Builder being disabled for the current post type, insufficient user permissions, or module filtering in the Builder interface.

Check Plugins -> Installed Plugins and make sure both Themify Builder and Themify Mosaic are active. Then open a regular page rather than a posts archive or system template. If you are working with a custom post type, review the Builder settings for that type. If the module appears on a normal page but not in the custom post type, the issue is Builder availability for that specific content type.

The mosaic is empty on the public page

Symptom: the block exists in the editor, but visitors see an empty area or only the title. Start with the Display source. If posts are selected, check publication status, category, featured image, and item count. If a gallery is selected, verify that images have actually been added. If WooCommerce is selected, check product status and image availability. If directory listing is selected, make sure the folder is accessible and contains supported files.

If the source is correct, temporarily disable the entrance effect and any complex pagination. Then clear the cache and test in a private window. When the block appears after optimization is disabled, restore settings one by one: lazy loading, JavaScript combination, delayed script execution, CSS minification. That will help you find the specific conflict.

Tiles crop important parts of the images

Symptom: faces, products, or important details end up outside the visible tile area. The cause is not always a Mosaic bug. A mosaic layout uses areas with different proportions, so an image may be cropped differently than it would be in a standard gallery. The fix is to match images to the role of the tile: a large horizontal area needs a wide composition, while a vertical area needs a different source image. If all images have very different subjects, make the template less aggressive.

For a portfolio, it helps to define a dedicated project "cover" image that will look strong in the large tile. For products, avoid photos where the object sits right at the edge of the frame. For posts, review the featured image before publishing rather than after building the mosaic.

On mobile, the block becomes too long or loses captions

Symptom: on phones, the tiles turn into a long feed, captions disappear, or the meaning of hover states is lost. Check Mobile Trigger Point, the number of tiles, and the behavior of the title and caption. If the mosaic contains 12-20 items, it may simply become too long on a phone. In that case, it is better to limit the number of items, add a Load More Button, or move the full catalog to a separate page.

If captions appear only on hover, test on a touch screen. For important items, keep the title visible or add text links below the mosaic. When the meaning of the block depends on hover, mobile users get an incomplete interface.

The appearance changes after an update or cache refresh

Symptom: after updating Builder, the theme, or an optimization plugin, spacing, animation, or part of the styles disappear. First check whether custom styles were added with a selector that is too broad. Then clear the Themify cache, the optimizer cache, and the browser cache. If you use Page Custom CSS, make sure it was saved together with the Builder page.

If the issue appeared after updating Themify Builder, check the changelog: sometimes fixes involve generated CSS, lazy loading, WooCommerce, the Gallery module, and compatibility with other plugins. Do not roll back the update without a reason. First reproduce the issue on a copy of the page and disable the effects that seem questionable.

How to Tell Whether Themify Mosaic Was the Right Choice

After setup, it helps to evaluate the result not in terms of "pretty or not," but against working criteria. Mosaic is the right choice if the block helps visitors understand the selection faster, highlights the most important item, leads to the right pages, and does not create mobile problems. If the mosaic looks impressive but hides titles, slows down the first screen, or requires constant manual maintenance, it is better to simplify the layout.

Criteria for a successful block

  • The content source is clear and controlled: the editor knows exactly why those items appeared in the mosaic grid.
  • The template has hierarchy: the main item stands out, but the others do not look like random cropped leftovers.
  • Titles and captions remain readable on both light and dark images.
  • The mobile layout does not turn the block into an endless feed with no clear purpose.
  • After clearing the cache and logging out of the admin area, the block remains visible.
  • The tiles link to the correct posts, products, projects, or files.
  • The page keeps a reasonable load speed and does not show an empty area before scripts finish loading.

If at least two of these points fail, do not rush to add more effects. Simplify first: fewer tiles, a clearer source, calmer hover behavior, and less text over images. For many sites, that produces a better result than trying to force the most complex possible composition.

When it is safe to move to the live page

Move the block from the test page to the live page only after validating it with real data. If you saved the tile template, load it into the new module and recheck the source from scratch. Do not assume the template will automatically fit a different set of posts perfectly. Pay especially close attention to the first item in the query: it often lands in the largest tile and becomes the main visual focus of the block.

Before publishing, open the page as a normal visitor. Follow the links, scroll to the end, click Load More Button if it is enabled, and make sure that newly loaded content does not break the shape of the mosaic. If numbered pagination is used, confirm that the pagination pages work and do not conflict with any other pagination on the same page.

FAQ About Configuring and Using Themify Mosaic

Do you need Themify Builder for Mosaic to work?

Yes. The official Themify page and documentation state that Builder Addons require Themify Builder. Mosaic appears in the Builder module panel under the Addons section, so it cannot be used as a standalone WordPress block without Builder.

Can Mosaic display WooCommerce products?

Yes, the Mosaic documentation lists WooCommerce Products among the available Display sources. But this kind of mosaic is best used as a promo showcase or curated selection, not as a replacement for a full store catalog with filters, sorting, variations, and checkout logic.

Why does the mosaic turn into a vertical list on phones?

That is the expected behavior once the Mobile Trigger Point is reached: the tiles switch to the mobile layout and become full width. If the list becomes too long, reduce the number of tiles, configure pagination, or move the full archive to a separate page.

Which is better: grid or slider?

Grid is better for key blocks where users need to see several items at once. Slider works for compact secondary selections, but it is harder to scan and needs careful testing on mobile devices.

Can Mosaic be used for a folder of files?

Yes, the Directory Listing mode is described in Themify documentation as automatic output of files from a specified folder. Images appear as thumbnails, and mp3 files can include an audio player with data from ID3 tags. Do not use this mode for private folders, backups, or files that should not be public.

Why is the block empty after enabling caching?

Most often, you need to check lazy loading, JavaScript combination, minification, and the cache for generated styles. Clear the cache first, then temporarily disable the suspicious optimization on the test page. If Mosaic appears, restore the settings one by one and document the exact conflict.

Is Mosaic suitable for a site that does not use a Themify theme?

Yes, if the standalone Themify Builder plugin is installed. The official Mosaic page states that the add-on can be used with a current Themify theme or the Builder plugin. But before rolling it out on a third-party theme, make sure to test styles, container width, mobile behavior, and editor stability.

Can a standard WordPress gallery replace Mosaic?

If you only need a simple set of images without a controlled tile layout, a standard gallery may be enough. Mosaic is the better choice when you need custom mosaic geometry, multiple content sources, saved tile templates, hover effects, pagination, and integration inside Themify Builder.

When Themify Mosaic Is a Strong Choice

Themify Mosaic is worth using if your site already relies on Themify Builder and you need an expressive but controlled visual block: a portfolio, post selection, product showcase, event board, media archive, or custom post type section. Its strengths are manual tile-shape control, reusable templates, multiple Display sources, grid or slider mode, hover effects, a mobile breakpoint, and several pagination options.

It is a weak choice if you need a standalone photo gallery system with albums, proofing, a complex lightbox, and independent library management. It also will not solve poor source images, empty featured images, messy product data, or conflicting cache behavior. The best approach is to prepare the content first, build a simple working template next, validate the result, and only then add effects.

Decision map for using Themify Mosaic with portfolios, posts, products, and WordPress files
Final decision check: Mosaic is a good fit when you need a controlled mosaic section inside Themify Builder.

If, after testing, you can see that the block solves the task, does not break the mobile page, and does not make maintenance harder, you can download the installation file and move on to testing it on your own site copy. Start with one page and one content source. Once the chain of "source -> tile template -> appearance -> result validation" becomes predictable, you can roll the template out to your live sections.

By OceanTheme.org Editorial Team

 

You are not logged in to post comments.