The plugin offers a modern Windows 8 style tile layout for WordPress sites. With its user-friendly interface, it allows users to easily create visually appealing tile grids to showcase various content types. These tiles can be customized in terms of size, color, content, and animation effects, providing a dynamic way to present information on a website seamlessly.

Plugin Version: 3.5.5
 
WordPress plugin Themify Tiles

Plugin Features

The plugins drag-and-drop builder makes it simple to design and arrange tiles, offering flexibility in organizing content without the need for extensive coding knowledge. It includes various pre-designed tile templates for quick setup, enabling users to personalize their layouts swiftly. Additionally, the plugin is responsive, ensuring that the tile grids adapt elegantly to different screen sizes, enhancing the overall user experience.

Users can leverage the plugin to create interactive grids with custom links, images, text, or videos embedded within the tiles. This functionality enables the creation of engaging portfolio showcases, product displays, service listings, or team member profiles. The plugins versatility caters to different website needs, allowing for creative presentation options to captivate site visitors effectively.

Furthermore, Themify Tiles offers advanced styling options that permit users to fine-tune the appearance of the tiles to align with their websites branding. From adjusting spacing and margins to selecting hover effects and animations, the customization possibilities are extensive. This level of control empowers users to harmonize the tile layout with the overall design aesthetics of their WordPress site seamlessly.

With its seamless integration into WordPress sites, the plugin streamlines the process of incorporating interactive tile grids as part of the content strategy. Whether used for promotional banners, feature showcases, or informative displays, the plugin provides an engaging way to elevate the visual impact of a website. Its intuitive features and design flexibility make it a valuable asset for creating dynamic and visually appealing web pages.

Specifications:

Release date: 20-05-2015
Last updated: 05-12-2025
Type: Paid
License: GPL 
Subject: Style & Design
Compatibility: W5.x W6.x
Includes: Plugin
Language packs: English
Developer: Themify

Rating:
4.5064935064935 1 1 1 1 1 (231 Votes)

Download by subscription!

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

Share with your friends!

 

A Practical Guide to Configuring Themify Tiles and Building a Tile Section in WordPress

Themify Tiles is not a standalone site builder. It is a module within the Themify Builder ecosystem, so using it properly starts not with picking a nice visual effect, but with understanding the chain of "Builder - row - tile - page output." In this guide, we will walk through how to prepare your site, install the module, build a tile grid, configure the front and back sides of tiles, and check responsiveness, performance, and link behavior.

This guide is written for site owners, webmasters, and content editors who need a manageable showcase-style section for services, benefits, contact details, content collections, a gallery, a map location, or quick navigation links. It does not repeat the short product summary. Instead, it focuses on practical use: which tile types make sense, when to enable flipping, why the module works best in a full-width column, and what to do if the saved result does not match what you saw in the editor.

Cover image for the Themify Tiles guide showing the path from settings to a finished tile section
This diagram shows the core workflow: the administrator builds tiles in Themify Builder, and the visitor sees a clean, well-structured section on the page.

An important feature of Themify Tiles is that each tile can have its own structure, size, background, text color, link, and back side. That gives you flexibility, but it also creates common issues: the grid can break because of column structure, aggressive auto flip can become distracting, images may load too heavily, and maps or galleries inside tiles need separate testing on mobile devices.

What a Tile Grid Actually Solves in Builder

Themify Tiles helps you create a compact visual block where several different messages live inside one masonry grid. According to the official description, the module supports a Metro-style tile layout, different tile sizes, front and back sides, flip effects, text, buttons, galleries, maps, and blank elements. That makes it useful for sections where a standard card layout feels too flat or repetitive.

The module works best when visitors need to understand the structure of an offer quickly. For example, an agency landing page can combine "Design," "Support," "Office Map," "Portfolio," and "Contact Us" in a single block. An education-focused site might use tiles to link to programs, schedules, instructors, and an application form. On a local business site, one tile can show a map, another can link to booking, a third can display an interior gallery, and a fourth can summarize a service.

The point of Themify Tiles is not to replace the entire page layout. It works best as an accent section inside a page, where different types of content should feel like one cohesive showcase. If you need a long catalog grid with filters, sorting, and dozens of items, you are better off using a gallery or portfolio plugin. Themify Tiles is stronger when you are composing a limited number of tiles by hand.

When Tiles Work Better Than Standard Cards

A standard card grid is ideal when all items carry roughly equal weight: products, blog posts, team members, or similar services. Themify Tiles becomes more useful when different items matter in different ways. A large tile can highlight the main scenario, a portrait tile can showcase a photo or a map, a landscape tile can deliver a short call to action, and a square tile can work as a navigation element.

In practice, that means you should not start by simply dropping in six random tiles. Assign roles first. One tile carries the main benefit, one provides proof, one drives action, one gives a visual example, and one handles contact details or a map. Once you do that, tile size and type stop being arbitrary decorative choices.

Where the Module May Be Unnecessary

If your site already uses a heavy builder with its own interactive cards, adding another visual layer requires caution. Tiles with galleries, maps, background images, and auto flip can hurt clarity when overused. The module is also not a good fit for critical forms, checkout flows, legally important messaging, or content that must be visible without interaction. A flip side can look great, but some users will never open it.

What to Check Before Installation and First Launch

Because Themify Tiles depends on Themify Builder, preparation starts with checking the builder itself. The official documentation says the addon works with Themify Builder and can be used with Themify themes or with the standalone Builder plugin. So the main question before installation is whether the site already has a working Builder and whether you have a page where you can safely enable editing.

Do not start on your live homepage if the site is already getting traffic. Create a draft page or duplicate the section first. Themify Builder supports editing in the WordPress admin area and on the front end, and it also includes import/export, saved layouts, reusable parts, and revision rollback. Those features are especially useful for visual blocks like this, because tile compositions usually take a few iterations to get right.

Minimum Preparation

  • Make sure Themify Builder is active on the site, or that you are using a Themify theme with Builder built in.
  • Create a backup before installing or updating, especially if the site has not been updated in a while.
  • Set up a test page and enable Builder there so you are not experimenting on an important live screen.
  • Check that your current theme does not hide the WordPress admin bar on the front end if you plan to work through live preview.
  • Prepare images at an appropriate size. Small blurry images are especially noticeable in large tiles.
  • Decide in advance which tiles should link somewhere and which ones should remain informational.

If you use caching, minification, deferred script loading, or aggressive JavaScript optimization, temporarily disable the riskiest options on the test page. That does not mean Themify Tiles is incompatible with optimization. It simply means an interactive module is easier to configure when you can first see a clean result and only then re-enable performance layers.

What Editors Need to Keep in Mind

Tiles are easy to break with accidental edits: changing the size, deleting the back side, inserting too much text, or linking to the wrong place. If a content team will be working with the module, agree on some ground rules in advance: who changes colors, who adds images, who checks the mobile layout, and who saves a backup of the layout before major edits.

Practical check: before installation, create a simple list of future tiles in a regular document. For each tile, note the type, size, front text, back text, link, and intended action. That draft will save more time than trying to design the logic directly inside the module window.

Installing the Addon and Running the First Check in WordPress

The official Themify documentation describes installing Builder Addons just like a standard WordPress plugin through Plugins and Add New by uploading a ZIP archive. Themify Tiles follows the same logic: you install the addon ZIP file, activate it, and then look for the Tiles module inside the Themify Builder panel.

This guide does not cover purchasing, payment, or license entry. It assumes you already have the installation archive and want to configure the product correctly on your own site. If the addon was installed through Themify's built-in mechanism, the sequence may differ slightly, but the post-install check is the same: the module should appear in Builder, and a test tile should save correctly and display on the front end.

Basic Sequence

  1. Open the WordPress admin area and go to Plugins - Add New.
  2. Click Upload Plugin, select the Themify Tiles ZIP archive, and start the installation.
  3. Once installation is complete, activate the plugin.
  4. Open the test page, enable Themify Builder, and check the module panel.
  5. Find the Tiles module, add it to a row, and save the page.
  6. Open the page as a regular visitor and confirm that the section appears without layout errors.

Why the First Tile Should Be Simple

For the initial check, do not use a map, gallery, or auto flip. Add one text tile with a short heading and a link. That verifies the essentials: the module is installed, Builder recognizes the addon, the page saves correctly, the front-end output works, and the styles are loading. Once that works, you can build a more complex section.

If the module does not appear in the panel, first make sure the addon itself is active, then confirm that Builder is enabled on the page. Themify documentation notes that the module is available both in admin mode and in front-end editing mode, just like standard Builder modules. If it does not appear in either place, the issue is more likely related to installation, admin-side cache, a plugin conflict, or an incomplete update.

First-launch flow for Themify Tiles in WordPress
The first launch is best checked as a sequence: addon installation, module visibility in Builder, one simple tile, save, and front-end page review.

Tiles, Sizes, and Content Types: How to Build a Meaningful Composition

The most important Themify Tiles setting is not the color or the flip effect. It is the type and size of each tile. The documentation lists four sizes: large square, small square, horizontal half, and vertical half. The product page may use slightly different labels, but the principle stays the same: size determines visual weight.

Tile types serve different purposes too. Text is good for short copy, Button for navigation or action, Gallery for a set of images, Map for an address or location, and Blank for empty space or a visual pause. A common beginner mistake is making every tile the same type and then trying to fix the sameness with color. A better approach is to treat the grid like an editorial composition.

How to Choose a Tile Size

Practical logic for choosing tile size
Size When to use it What to check
Large square Main offer, key service, strong visual emphasis, section cover. Whether the text feels overloaded, whether the background looks good, and whether the action still stands out.
Small square Short navigation, an icon, one point, or a quick jump. Whether the text is large enough and whether the tile starts to feel like a tiny banner.
Horizontal tile A short call to action, contact details, a note, a mini gallery, or a section link. Whether text gets cut off on tablets and whether the background becomes too narrow.
Portrait tile A photo, map, vertical illustration, highlighted step, or visual marker. Whether an important part of the image gets lost and whether mobile interaction still feels comfortable.

After picking sizes, look at the grid without any effects. If the composition already makes sense in a static state, effects will only strengthen it. If the layout already feels confusing without flipping, animation will make the problem more obvious.

Tile Types and Real Use Cases

Text for a Meaningful Content Block

A text tile is not meant for a long description. It is for a concise message. It can include a heading, content editor text, action text, and a link. Themify documentation also mentions shortcode support inside text content. Use that carefully. A shortcode inside a tile can work for a small dynamic element, but complex forms, tables, or heavy widgets are better kept outside the tile.

Button for a Directed Action

A button tile works well for linking to a service, portfolio, form, or external resource. The settings include a heading link, link-opening behavior, an icon or image, colors, and background options. If the tile is meant to drive action, the text should be shorter than what you would use in a normal banner, because visitors read the tile as a navigation element.

Gallery for Visual Proof

A gallery inside a tile works well when you want to show a quick visual slice: an interior, work samples, products, or event highlights. The documentation mentions inserting a gallery through Insert Gallery, selecting images from the media library, and configuring autoplay. Check whether gallery autoplay conflicts with the tile's own auto flip. Two automatic motions inside one small block often create visual noise.

Map for Contact and Trust

A map is useful for a local business, studio, venue, clinic, school, or office. The documentation lists address, map type, Scrollwheel, and Draggable. Be careful with scrolling and dragging on small tiles. On mobile devices, an interactive map can interfere with page scrolling.

Blank as a Controlled Pause

A blank tile may look decorative, but it can solve a composition problem by creating color rhythm, separating two groups, or keeping a masonry grid from looking chaotic. Do not overuse blank tiles. If an empty element does not improve readability, replace it with a short helpful cue or remove it.

Configuring the Front and Back Sides of a Tile

One of the strongest features of Themify Tiles is the separate editing of front and back. The documentation describes the Front Tile tab for the front side and the Back Tile tab for the reverse side. The back side can use similar settings, but it also adds auto flip and flip effects. That turns each tile into a small interaction flow: first the visitor sees the main idea, then they get a detail or an action.

Do not try to dump everything that did not fit on the front onto the back. A good back side answers one question: "what comes next?" For example, the front side says "Site Audit," and the back side gives a brief explanation and a link to the form. The front side shows a studio photo, and the back side shows the schedule or a booking button. The front side shows the address, and the back side adds directions or contact details.

Diagram of front and back tile settings in Themify Tiles
The front side should explain the purpose quickly, while the back side adds an action, a detail, or useful confirmation.

Suggested Order for Configuring One Tile

  1. Choose the tile size based on content priority, not on whatever empty space happened to remain in the grid.
  2. Open the front side and choose the type: Text, Button, Gallery, Map, or Blank.
  3. Fill in only the required fields: heading, short text, link, image, address, or gallery.
  4. Set background, text, and link colors so the contrast is strong enough even without hover.
  5. Switch to the back side and add only the second idea or action.
  6. Choose the flip effect and, if needed, enable auto flip.
  7. Save the page and test the tile on the front end.

How to Choose a Flip Effect

The product page and documentation list several flip and animation effects, including horizontal and vertical flip, plus reveal and zoom-style options. The right effect should depend on the content. For a business site, a calm horizontal or vertical flip usually works best. For a promo section, event page, or creative gallery, a more visible reveal effect can make sense.

Do not use different effects without a clear reason inside the same grid. If every tile moves in its own way, the visitor stops reading the block as an interface and starts seeing it as a pile of animations. For most sections, one effect for all tiles is enough, or two effects for two different groups, such as informational tiles versus navigation tiles.

When to Enable Auto Flip

Auto flip supports intervals from 1 to 10 seconds. It is a powerful setting, but also one of the easiest to misuse. If it flips too quickly, reading becomes difficult, especially when the tile contains text. If several tiles move frequently at the same time, they can distract from the main page content.

For a typical site, it is safer to start without auto flip. Enable it only for one or two tiles where the back side carries a very short action or visual cue. If you use a timer, choose a calmer interval and make sure a person has enough time to read both sides.

Why the Module Works Better in a Full-Width Column

The Themify documentation includes a specific warning: the Tiles module should be placed in a full-width column, not split across multiple columns. This is not just a minor recommendation. The masonry grid calculates tile placement as one unified composition. If you place the module in a narrow column or start distributing pieces of it across separate Builder columns, the grid loses the space it needs to align properly.

The correct structure usually looks like this: one Builder row, one full-width column, one Tiles module inside that column, and then the collection of differently sized tiles inside the module itself. If you need a heading, a short intro, or a button above the block, place those in a separate row or above the module instead of trying to mix them into the same tile column.

How the Row, Column, and Tile Grid Work Together

Themify Builder lets you control row width, column structure, spacing, and responsive states. With a tile block, the key is not to overload that outer wrapper. If a row has excessive inner padding while the module inside tries to build a masonry layout, the tiles may start feeling too narrow on tablets. If the column is not full width, a large tile can lose its purpose.

A good baseline setup is simple: one row with a clear width, one column, one Tiles module, and moderate spacing around the section. You can style the row background after that, but it is better not to stack a row background, individual tile backgrounds, background images, dense text, and animation all at once. Visitors care more about a clear hierarchy than about layered decoration.

How to Check That the Structure Is Correct

  • In edit mode, preview the page on a desktop-sized screen and make sure large tiles do not look cramped.
  • Switch to tablet view and check that you are not getting awkward isolated narrow elements.
  • Review the mobile layout. Tiles should read naturally from top to bottom, not collapse into a chaotic mosaic.
  • Open the page outside edit mode and compare the result with the preview.
  • Clear the cache if the live page looks different from what Builder showed.

Practical Example: A Services Section with a Map, Gallery, and Action

Let us walk through a scenario that shows exactly where Themify Tiles makes sense. Imagine a local studio or a small agency with a "Services" page. You want to add a compact section that includes a primary service, an example gallery, an address, a booking button, a short benefits block, and a blank color pause. A standard grid of identical cards would make the block feel flat, while tiles let you control the weight of each element.

Goal

Create a tile section where a visitor can understand the offer in a few seconds, see visual proof, open a map, and move to the inquiry step. The block should remain readable without requiring hover, and the flip effect should add useful information without hiding the main message.

Preparation

  • Create a test page or a copy of the target page.
  • Prepare 3 to 5 gallery images with a consistent level of quality.
  • Write short front-side texts, with no more than one core message per tile.
  • Prepare the links: form, portfolio section, directions, or contact block.
  • Decide which tiles should have a back side and which should stay static.

Setup Steps

  1. Open the page, enable Themify Builder, and add a new row with one full-width column.
  2. Drag the Tiles module into the row.
  3. Create a large text tile with the main service name, a short explanation, and a link to a more detailed section.
  4. Add a Gallery tile, insert images from the media library, and either enable gentle autoplay or leave it off if you are already using tile flipping.
  5. Add a Map tile with the address. Check the map type and scrolling behavior so it does not interfere with mobile navigation.
  6. Add a Button tile for the inquiry or booking step. Use short action text and a clear destination link.
  7. Add a small Text tile with a benefit or proof point such as turnaround time, working format, or response guarantee, but avoid unverified promises.
  8. Configure the back side only for tiles that actually need a second layer, such as the main service tile and the inquiry button.
  9. Save the page and open it on the front end.
Example of a Themify Tiles result on a WordPress services page
This practical example combines different tile types in one manageable section: text, button, gallery, and map.

Expected Result

The page should display one coherent tile grid. The main tile sets the context, the gallery provides visual proof, the map supports trust and location clarity, and the button drives action. On hover or auto flip, the back side should not hide any critical information. Even if the user does not interact with the tile, they should still understand what the block is about.

A Common Problem in This Scenario

The most common mistake here is using too much text. A tile may look large in the editor, but on tablets or phones the text can quickly become cramped. If your text does not fit, do not shrink the font until it becomes unreadable. Shorten the message, move detail to the back side, or link out to a separate section.

Ways to Use Themify Tiles on Different Types of Pages

A tile section becomes more useful when it is designed for a specific page type. The same old pattern of "icon - heading - link" quickly turns into a decorative grid. Themify Tiles offers more than that: you can mix maps, galleries, buttons, text tiles, and blank rhythm elements. Below are several scenarios where different tile types solve different problems.

Homepage for a Small Business

On a homepage, tiles work best as a fast navigator for key actions. A large text tile explains the main offer, a Button tile leads to the inquiry form, a Map tile confirms local presence, a Gallery tile provides visual proof, and a small text tile can address a common customer concern such as turnaround time, consultation format, service area, or communication method.

In this scenario, do not turn the tile grid into a catalog of every service you offer. A homepage should provide direction. If the business has many service lines, use tiles for groups such as "Home Renovation," "Commercial Spaces," "Design Planning," or "On-Site Consultation." Keep detailed service lists on inner pages, or the tiles will lose their strongest advantage: fast comprehension.

How to Check the Result on a Homepage

Open the block and ask yourself one question: is it obvious what the visitor should do next? If the goal is to click a button, that button should not be hidden only on the back side. If the map matters, test it on a phone. If the gallery is supposed to build trust, do not fill it with tiny or random-looking images.

Service or Offer Page

On a service page, Themify Tiles can work as an explanatory showcase. One tile shows the result, another shows a process step, a third displays a photo or example, a fourth answers a common question, and a fifth drives action. The back side becomes especially useful here: the front delivers the short point, and the back expands on the detail.

For example, on a "website creation" page, the front of a large tile might say "Landing Page in One Production Cycle," while the back explains what the preparation stage includes. A Gallery tile can show screen examples, a Button tile can lead to the brief form, a Text tile can explain post-launch support, and a Map tile may not be needed at all if the service is fully remote. That kind of selection matters. Themify Tiles does not require you to use every tile type in every section.

Portfolio or Work Samples

If the portfolio is small and manually curated, tiles can work well. You can highlight one case study with a large tile, show two more through a gallery tile, use one tile for a work category, and another for a link to the full archive. But if the portfolio grows, filters appear, project counts increase, and automatic output becomes necessary, Themify Tiles becomes less convenient. In that case, a dedicated portfolio plugin is a better fit, while Tiles can remain as a promotional block for selected best work.

Contact Block with Directions and a Quick Action

A Map tile can make a contact section feel more dynamic, but a map inside a small block should not get in the way. A strong contact section often combines a map, address, business hours, a contact button, and a short explanatory note. If the site covers multiple branches or locations, do not try to squeeze all addresses into one tile. A better option is a separate locations page, with Tiles showing only the main address or a link such as "Choose a Location."

Promo Block Inside a Long Article

Tiles are not just for landing pages. Inside a long knowledge-base article, they can work as a navigation block: "Download Resources," "View Examples," "Open Map," or "Ask a Question." In this case, restraint matters even more. If the article already contains a lot of text, the tile section should help visitors navigate, not compete with the main content.

Rule for choosing a scenario: if each tile handles a distinct action or a distinct type of proof, the module is being used as intended. If the tiles simply repeat the same marketing claims, standard cards or even a simple list may be the better choice.

Checking the Result: Design, Responsiveness, Speed, and Accessibility

After saving the tile section, it is important to check more than just how it looks in the editor. Themify Builder supports live preview and responsive modes, but the final result should always be reviewed like a normal visitor would see it: without the editor panel open, with cache cleared, and across different screen widths.

Design and Readability

Start with contrast. Tile background, text, and link colors are configured separately, which makes it easy to create something visually attractive but hard to read. Be especially careful with background images. If you place text on top of a photo, you need a dark overlay, a calm image area, or another way to preserve legibility.

Check the tile action itself. If a tile contains a button or a link, that action should be obvious. Do not hide an important action only on the back side if it is the main user path. If a tile opens a link in a new window or a lightbox, make sure that behavior is actually necessary. For internal pages, a normal navigation flow is often clearer.

Responsiveness

Tiles of different sizes can look great on a wide screen, but the composition will inevitably rearrange on narrower widths. Do not test only at phone width. Also check intermediate states: tablets, smaller laptops, and narrow browser windows. Sometimes the issue does not appear on the smallest screen, but at a mid-range width where a large tile is still trying to hold too much text.

Quick review summary: if the block makes sense without hover, links work, text is readable, the map does not interfere with scrolling, the gallery does not compete with auto flip, and the mobile layout preserves meaning, the configuration is in good shape.

Page Speed

Themify Builder is positioned as a fast and lightweight builder, but real-world speed depends on your content. A tile with a background image, gallery, and map is heavier than a simple text block. If the tile section appears above the fold, optimize images before uploading them to the media library, avoid unnecessary galleries, and do not enable multiple automatic effects at once.

Caching and script optimization can improve performance, but after enabling minification and deferred loading, always recheck tile flipping, the gallery, and the map. If the interactive behavior breaks, temporarily exclude the relevant Themify scripts from aggressive optimization or use a softer cache-plugin setup for that page.

Accessibility and Usability

Animation should never be the only way to access information. If important text is visible only after a flip, some users will miss it. That is why the front side should be self-contained, with the back side acting as an extra layer rather than the only source of meaning. Links should use clear text, not just an icon. A map should not hijack page scrolling where visitors simply expect to continue reading.

Safe Improvements Without Editing Plugin Files

You should not edit Themify Tiles addon files or WordPress core files. If you want to adapt the appearance slightly, it is safer to use module settings, Builder row settings, and custom CSS at the page or child-theme level. Themify Builder documentation mentions the ability to add a CSS class to a row and use Page Custom CSS, so that is a better route than modifying product files.

Below is a cautious example for a case where you want to visually separate the tile section and make its links more noticeable. First, add a custom CSS class named tiles-showcase to the Builder row in the row settings. Then add the CSS to the page's custom CSS field or to your child theme. The code does not depend on the addon's internal classes. It only works inside your own container and does not touch Themify Tiles files.

.tiles-showcase {
  --tiles-accent: #2f6fed;
}

.tiles-showcase a {
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

.tiles-showcase a:focus-visible {
  outline: 3px solid var(--tiles-accent);
  outline-offset: 4px;
}

Check the result with a keyboard: open the page, press Tab, and confirm that the focus state is visible on links inside the tile block. If the style does not work for you, remove the CSS and save the page. That rollback is safe because you did not change plugin files or interfere with its JavaScript.

What You Should Avoid

  • Do not edit addon files, even if you just want to change a color or spacing quickly.
  • Do not embed complex forms inside a tile if the form must submit reliably.
  • Do not place heavy third-party widgets in every tile.
  • Do not hide required legal or pricing information on the back side.
  • Do not enable auto flip on every tile at once before checking readability.

Troubleshooting: Why Tiles May Display Incorrectly

Problems with Themify Tiles usually do not come from one single field. They come from the combination of addon installation, Builder state, row structure, cache, theme behavior, script optimization, and tile content. Below is a practical symptom map worth checking before you contact support.

Troubleshooting map for Themify Tiles issues in WordPress
Troubleshooting should move from simple to complex: module visibility, column structure, saving, cache, scripts, and tile content.

The Tiles Module Is Missing from the Builder Panel

Symptom: Builder loads, standard modules are visible, but Tiles is not listed. Possible causes include the addon not being activated, the archive being installed incompletely, Builder not being active, or the page being open in a mode where the module panel did not refresh.

What to check

  • Open Plugins - Installed Plugins and confirm that the addon is active.
  • Check whether Themify Builder is active, or whether a Themify theme with built-in Builder is active.
  • Refresh the editor page and clear browser cache for the admin area.
  • Check the module in another editing mode: in the admin area and on the front end.

How to fix it: reinstall the ZIP archive through the standard WordPress mechanism if the original installation was incomplete. If modules disappeared after a site update, check for plugin conflicts and verify Builder status. Roll back only the most recent changes, not the entire site.

The Grid Looks Broken or Too Narrow

Symptom: tiles overlap, wrap strangely, do not take the expected width, or leave odd gaps. Most often, the module has been placed in the wrong column instead of a full-width structure, or the row's outer spacing is constraining the grid too much.

What to check

  • The Tiles module is placed inside one full-width column.
  • Individual tiles are not being split across multiple Builder columns.
  • The row does not have excessive inner spacing on tablet and mobile views.
  • Background images are not making a tile appear visually cropped.

How to fix it: move the module into its own row with a single column, then recheck tile sizes. If the issue appears only at one width, adjust the row's responsive settings rather than changing every tile at once.

Changes Save in the Editor but Do Not Appear on the Site

Symptom: everything looks correct in Builder, but the front-end page still shows the old version. Based on Themify Builder support discussions and general WordPress guidance, this is often related to cache, optimization conflicts, saving issues, or refreshing the wrong page.

What to check

  • Whether you clicked save in Builder and then refreshed the WordPress page as required by your workflow.
  • Whether the site cache, browser cache, and CDN cache are all cleared, if a CDN is in use.
  • Whether there are two similar pages and you are editing the draft while viewing the published original.
  • Whether an optimization plugin is blocking Builder scripts.

How to fix it: save changes, clear cache, and open the page in a private window. If the issue continues, temporarily disable JavaScript optimization on the test page and test saving again.

The Flip Effect Feels Too Harsh or Distracting

Symptom: visitors cannot read a tile in time, multiple elements move at once, and the block feels nervous. The cause is usually auto flip running too fast, too many animated tiles, or too much text on both sides.

How to fix it: disable auto flip on most tiles and keep it only where the back side contains a short action. Use one effect for the whole group. If the text is hard to read, shorten it or move the detail to a separate page.

The Map Interferes with Scrolling or Works Poorly on Mobile

Symptom: when trying to scroll the page, the user accidentally interacts with the map, especially on a smartphone. The Map tile settings include scrolling and dragging controls, and those need separate testing in small tiles.

How to fix it: disable Scrollwheel, review Draggable, and decide whether an interactive map truly belongs inside the tile. In many cases, a static address plus a directions link works better, with the full map placed lower on the page as a separate block.

The Gallery or Images Load Too Slowly

Symptom: the tile section delays above-the-fold loading, images appear in jumps, and page speed scores get worse. The cause may be oversized source images, too many elements, or combining the gallery with other visual effects.

How to fix it: optimize images before upload, reduce the number of gallery slides, and avoid placing a gallery in every tile. If the block appears above the main content, keep only the most important images there and move the larger gallery lower on the page.

Limitations, Compatibility, and Sensible Configuration

Themify Tiles depends on Builder and on the visual context created by your theme. Official sources note compatibility with Themify themes and the standalone Builder plugin, as well as support for any theme in the Themify Tiles plugin version. But in practice, "compatible" does not mean "every design will look perfect without testing." Your theme controls typography, containers, content width, global colors, and sometimes scripts.

If the site is not built on a Themify theme, spend more time on the first review. The Tiles documentation specifically notes that some Themify Page Options may not appear in third-party themes, but the Builder and addon themselves still work the same way. That is an important distinction: missing theme-specific options does not mean the module is broken.

Compatibility with the Editor and Theme

Builder can be used both in admin mode and in front-end editing mode. If the WordPress block editor is enabled on the site, Builder documentation describes the Builder Block workflow as well. For Themify Tiles, that means one thing: make sure you understand exactly where the page content is being edited. In some setups, WordPress, Builder, and the theme create multiple interface layers, and beginners can easily lose track of where a change was made.

Compatibility with Cache

Caching is useful, but visual builders need careful configuration. If enabling minification breaks the flip effect, map, or gallery, do not immediately conclude that Themify Tiles "does not work." First test the page without minification and deferred loading. Then re-enable optimization one group at a time and see exactly when the problem appears.

Compatibility with SEO

Tiles can improve how a page feels to users, but they do not automatically improve rankings. For SEO, it matters that text is accessible, links are clear, images have proper alt text in the media library, and important information is not hidden only behind animation. If the section contains key page messaging, place the main text on the front side or next to the tile grid in a normal HTML block.

When Another Tool Is the Better Choice

If you need dynamic post output, category filters, infinite loading, complex albums, or a portfolio with dozens of items, Themify Tiles may be too manual for the job. It is best for a deliberately designed section made up of a limited number of tiles. For larger galleries and catalogs, a specialized grid plugin is a better fit.

Questions About Configuring and Using Themify Tiles

Can I use Themify Tiles without Themify Builder?

No. The official documentation states that it depends on Themify Builder. The addon appears as a module inside the Builder panel, so without a working Builder, the setup workflow has no foundation.

Will Themify Tiles work with any WordPress theme?

The Themify Tiles plugin page says it is compatible with any WordPress theme, and the documentation clarifies that the addon can also work with third-party themes, although some Themify Page Options may be unavailable. In practice, you still need to test it on your own theme, especially for container width, typography, and optimization scripts.

How many tiles should I add to one section?

For most pages, 5 to 9 tiles is enough. Once the number grows beyond that, visitors stop reading the block as a quick navigation or meaning-driven element. Large catalogs, portfolios, and galleries are better built with dedicated tools.

Should I enable auto flip on every tile?

Usually not. Auto flip is useful for a short secondary message, but widespread automatic animation becomes distracting. Start without a timer, then enable it only on tiles where the back side is genuinely necessary.

Why should I avoid placing the module across multiple columns?

The Themify documentation directly recommends using a full-width column and not distributing individual Tiles across multiple columns. The masonry grid needs to be calculated as one unified block, or the sizing and wrapping may look wrong.

Can I insert shortcodes inside a tile?

The documentation says the text tile type supports shortcodes. Use that only for small elements. Complex forms, heavy tables, and critical interactive blocks are better kept outside the tile, where they are easier to test and maintain.

How can I tell whether the problem is in Themify Tiles or in cache or the theme?

Test on a simple page with one minimal tile, temporarily disable aggressive optimization, clear cache, and compare the result in the standard Builder workflow. If a simple tile works but the full section does not, the issue is more likely in the content, row structure, gallery scripts, map behavior, or external CSS.

Is there an official tutorial video specifically for Themify Tiles?

The official documentation mentions a demo video, but in the verified sources available for review, it was not possible to confirm a stable YouTube embed specifically for this product. For that reason, no video block was added to this guide, rather than embedding a random clip.

When Themify Tiles Is the Right Choice

Themify Tiles is a strong option when you need a small, manageable, visually expressive section inside a page: services, benefits, directions, a gallery, quick links, a promo block, or an interactive showcase. It is especially convenient on sites that already use Themify Builder and where editors are comfortable with a drag-and-drop workflow.

Do not choose it as a universal replacement for a portfolio, catalog, or gallery engine. The strength of the product is manual composition: tiles with different weight, type, and behavior arranged on purpose. If you assign roles to the tiles in advance, place the module in a full-width column, test the front and back sides, avoid overusing auto flip, and review the mobile layout carefully, the block will work as a clear visual navigator.

Before publishing, run one final check: is the row structure simple, are the colors readable, are the links clear, is critical information visible, are the images optimized, does the map behave properly, and does caching still work correctly? Once that is done, you can get the Themify Tiles file, install it on a test page, and decide whether this format is the right fit for your site.

By OceanTheme.org Editorial Team

 

You are not logged in to post comments.