YOOtheme Grid Pro - WordPress Plugin

YOOtheme Grid Pro: A Detailed Guide to Grids, Filters, and Dynamic Content

YOOtheme Grid Pro is not meant to simply arrange identical cards into several columns. It becomes useful when a basic grid no longer tells visitors what they are looking at: a project portfolio, service directory, resource library, product list, or post archive. This guide walks through the element's practical workflow: how to prepare WordPress data, enable the plugin alongside YOOtheme Pro, build your first grid, separate the shared card framework from exceptions, add filtering, and verify the outcome on a real page.

The main challenge is not clicking the button to add an element. It is keeping four distinct tasks separate: selecting entries, displaying fields, establishing visual hierarchy, and defining what happens on click. YOOtheme Grid Pro provides many fields and nested areas, so without a plan it is easy to end up with an attractive but fragile setup: an author edits a WordPress post, but the card does not update as expected; a filter is visible but selects nothing; an image opens the wrong link; or the grid becomes unreadable on a narrow screen.

This guide does not cover purchasing, registration, or activation workarounds. It assumes that you obtained the installation archive legitimately and already have a working WordPress site with YOOtheme Pro. We will focus on configuration, troubleshooting, and safe verification. Two principles will be useful throughout: first build one card you can verify, then repeat it through a data source; first confirm behavior without caching, then optimize the page.

What an Advanced Grid Can Do Beyond a Simple Row of Cards

A standard grid works well when there are few items, the content is static, and every item has the same set of fields. For example, you can manually add six services to a page and give each one an image, title, and button. But that approach becomes difficult to manage when there are many cards, new content is added regularly, and visitors need to narrow down the selection quickly. At that point, the page should be treated as a small discovery interface: it has a dataset, selection rules, a way to present each item, and a clear path to the next action.

YOOtheme Grid Pro expands on the builder's basic grid concept. According to the official product page and edition comparison, the element can work with multiple filter groups, search, sorting, links that preselect filters, sublayouts, multiple nested grids, varied item widths, a lightbox gallery, and dynamic content. That does not mean you should enable everything at once. On the contrary, a good grid answers one visitor question per action: "Which projects belong to this category?", "Which products are available in the category I need?", or "Which resources are suitable for a beginner?"

A Portfolio, Resource Catalog, and Product Showcase Use Different Models

For a portfolio, the primary action is usually opening a case study or viewing a larger image. A clear title, category, image with the right focal point, and an understandable card link matter most here. In an article catalog, the subject, date, or difficulty level may matter more, along with search across the title and supporting text. WooCommerce cards follow a different path: visitors compare details and want either to open the product or use an add-to-cart button. Grid Pro advertises integration with an AJAX add-to-cart button, but that combination should be tested with your specific theme and extension stack rather than treated as a universal replacement for the standard store template.

A directory of services, instructors, real estate listings, or documents can also be built as a grid. In every case, however, you should identify the card's meaningful key in advance. For a property, it might be property type and neighborhood; for an instructor, subject and delivery format; for a document, category and file type. If some cards do not have that key, filtering will feel arbitrary. Do not try to compensate for missing structured data with lengthy descriptions inside the grid itself.

Who Grid Pro Is Especially Well Suited For

The plugin is a good fit for editors who already use YOOtheme Pro as their visual builder and want to make one list element more capable instead of moving the site to another builder. It is useful for agencies that create repeatable project archives and want clients to be able to add to them through regular WordPress posts or a selected custom post type. It can also work well for owners of smaller catalogs who need several independent ways to narrow down content without introducing a separate, heavyweight search system.

Grid Pro is less suitable if the task is limited to two static promotional cards on a landing page. In that case, a complex map of fields and filters creates more failure points than value. It also does not replace a full-featured search service for a very large catalog, an inventory management system, or an access-control mechanism for private posts. On-page filtering should not be confused with an access model: a hidden filter does not protect data.

Map Out the Setup Before Opening the Builder

Before configuring anything, create a short setup brief on paper or in a working document. It should contain five lines: where the items come from; which fields are always displayed; which attributes visitors use to filter the list; where the main click leads; and what you will show when no matching items exist. This map saves more time than experimenting with effects. If you cannot explain why you need a second filter group, do not display it yet.

• Source: posts, pages, custom post types, categories, tags, files, or another available YOOtheme Pro source.
• Always-visible fields: image, title, short explanation, category, price, or another relevant marker.
• Visitor controls: one search field, one or two filters, and sorting only when it genuinely changes the selection.
• Action: open the item, view an image, go to a product, or take one other clear next step.
• Empty state: a brief explanation and a way to reset the selection, rather than a blank white area.

Tip: if a card is planned to have a full-panel link, a button, and a lightbox image, assign a distinct area to each action first. Three different clicks on the same item rarely improve usability.

Preparing WordPress: Start with the Data and One Viewing Path

Grid Pro can only present data convincingly when the data itself is consistent. Before installing the plugin, open ten future entries and review editorial discipline rather than design. Do they all have clear titles, images, categories, permalinks, and short descriptions? Are half of the cards filled with blanks or placeholder text? If the source will be a custom post type, make sure it is registered, available in the admin area, and that editors can populate it without developer intervention.

Choose the Source Before Styling It

YOOtheme Pro documentation describes content sources as page data, custom queries, external sources, and parent-element context. In WordPress, these may include pages, posts, categories, tags, users, files, custom post types, and taxonomies. The most important distinction is between one item and many items. A single source is displayed once, while a source containing multiple entries repeats the element for every object returned. The second option is usually what you need for a catalog or archive.

Do not begin by manually filling out twenty identical cards if you expect to have one hundred a month from now. Build the element around a multi-item source from the start. Then create one sample entry with all fields filled out correctly and use it for testing. This approach makes it clear which fields actually reach the card and which remain blank because of incorrect mapping.

Structure the Attributes Visitors Will Filter By

Filtering only works convincingly with repeatable values. If project categories are stored sometimes in the title, sometimes in a freeform paragraph, and sometimes in a tag, you cannot honestly explain what the filter means. For a reliable setup, choose one taxonomy or one set of fields. For example, a portfolio might use categories such as "Branding," "Interfaces," and "Packaging," plus a separate "Year" field only if visitors genuinely need it. A knowledge base is easier to organize with "Level" and "Topic" taxonomies. For products, use WooCommerce's own attributes and categories for their intended purpose.

It helps to prepare a list of allowed values in advance. It should not include near-duplicates such as "Marketing," "marketing," "Marketing ", and "Marketing" in another language. The grid may accurately treat all of these as distinct values, but visitors will see duplicates and conclude that the catalog is poorly maintained. Normalizing your vocabulary matters more than making the filter look polished.

Images, Descriptions, and Card Accessibility

Prepare images as part of the data, not as a decorative layer. Each image should have meaningful alt text in the Media Library if it conveys information. Do not use a photo with the main subject accidentally cropped as the primary image: Grid Pro may offer image focal-point controls, but that setting will not fix a weak source image. For a catalog, establish a shared principle: the same aspect ratio, a similar subject scale, and clear title contrast against the background.

The short text in a card should work without requiring a visit to the detailed page. Do not copy the first paragraph of an article in full. One sentence is enough if it helps distinguish similar items. A text limit is not a way to hide unfinished editing. It is useful when source descriptions vary in length and the grid needs to remain visually even.

Technical Checks Before Adding the Element

Make sure WordPress and YOOtheme Pro are active, and that the builder can open the required page without red dynamic-content indicators. The official Grid Pro changelog tracks changes to requirements and compatibility, so do not rely on old videos when updating a live site. Also verify the PHP version supported by your plugin stack, and create a backup or work on a staging copy. This is a normal precaution for any extension that adds new builder elements.

During the initial setup, disable aggressive page caching only for the test URL, or make sure you have a clear way to clear the cache after saving. Otherwise, you may mistake old HTML for a Grid Pro issue. Do not disable security plugins or change server settings without a reason. For testing, it is enough to know where to clear the theme cache, optimization-plugin cache, and browser cache.

Installation and an Initial Check Without Risking a Live Page

Because this is an extension for YOOtheme Pro, it is best tested on a draft page or staging template rather than on an already published homepage. This approach preserves control: you can disable only the new element without breaking the existing showcase. The exact menu item for uploading an archive may differ depending on how the product was supplied, so use the standard WordPress plugin manager and the provider documentation that applies to your copy.

A Safe Activation Sequence

1. Create a backup or record a restore point for the staging site.
2. Verify that YOOtheme Pro is active and opens Builder on a test page.
3. Install the archive you received through the standard WordPress Plugins section and activate the extension.
4. Open Builder on a test page, add one Grid Pro element, and save the page without complex settings.
5. View the public page in a new window, then clear only the cache involved in serving that page.

The first test is intentionally simple. Its purpose is to separate an installation issue from a data issue. If the element appears in the Builder list and renders one manually created item, the basic chain is working. Only then should you connect a multi-item source, filters, sublayouts, or a store button.

How to Confirm That the Plugin Is Connected to Builder

Do not look for Grid Pro among standard WordPress editor blocks if the project is built with YOOtheme Pro. Open Builder on a page or template, create the area where the list should appear, and find the new element in the element library. The library's appearance and grouping can change after updates, so confirm the current interface section in your installed version instead of copying a path from an old video.

Add one test object manually and give it a title, image, and short text. Save, open the page, and confirm that all three parts are visible. If the card is missing at this stage, do not configure a filter yet: first check whether the page is published, whether the area is hidden by visibility settings, and whether the browser is returning a saved copy.

When to Stop and Roll Back the Installation

A rollback is appropriate if activation produces a fatal error, makes the admin area inaccessible, or unexpectedly changes a working layout. In that situation, disable the most recently added plugin through the normal method, restore the checkpoint if necessary, and review the hosting error log. Do not edit WordPress core, YOOtheme Pro, or Grid Pro files. If the error occurs only on the production site, repeat the installation on a copy where you can leave only YOOtheme Pro and Grid Pro active, then enable the remaining extensions in groups.

Critical check: after activation, open both the admin area and the public test page. A successful activation without a visible element does not yet prove that Builder received the new component.

Dynamic Sources: From a WordPress Entry to a Repeating Card

The strength of the YOOtheme Pro and Grid Pro combination is not decorative fields but the separation of content from presentation. A WordPress post stores the title, image, categories, and supplemental information. The Grid Pro element receives a collection of entries, maps the required fields to parts of a card, and repeats that card for every object returned by the source. When an editor updates the original entry, the public card can receive the new value the next time it is rendered, provided the field is mapped to a dynamic source rather than entered manually.

The Element Source and the Individual Card Source

YOOtheme Pro documentation notes that elements with multiple objects, including Grid, offer dynamic content both at the element level and at the individual list-item level. This matters for troubleshooting. If you expect twenty cards but see only one, first check the source at the Grid Pro level: it must return multiple objects. If the correct number of cards appears but one has the wrong image or text, inspect the mapping at the field or individual-card level.

This separation is also useful for exceptions. Imagine a course catalog: most cards use the post's image, title, and link, but one flagship course needs a different call to action. You do not need to break the entire dynamic list for that. First make sure the shared path works, then add a targeted override only where it is justified. The fewer exceptions you have, the easier it is for an author to understand why a card looks the way it does.

A Practical Field-Mapping Guide

Open Grid Pro and ask this question for every visible field: is this fixed template text or a value from the entry? The title should almost always use the post title. The image should use the featured image or a deliberately prepared field. The short text should use an excerpt or safely limited text from a selected field. The link should use the post or product URL. The category should use a taxonomy term if it helps the visitor. Do not map every option available in a dropdown into the card. Extra data makes the page harder to scan.

A minimal data map for a typical dynamic grid

What the visitor needs	Example source	Check after saving
Understand what the item is	Post or product title	The title matches the WordPress editor
Recognize it by its image	Featured image or selected field	No important subject is cropped accidentally
Quickly distinguish similar entries	Excerpt, term, or short custom field	The text does not cut off in the middle of a critical word
Continue to the next step	Link to a post, product, or preset URL	The expected address opens with a single click
Narrow the selection	Category, tag, or another consistent attribute	The value is written consistently across all relevant entries

Text Limits and the Order of Transformations

YOOtheme Pro's base documentation explains that text can be transformed by case and limited by length, while HTML tags are removed when the text is limited. The order of applied options matters: date formatting, content limiting, find and replace, then text added before and after the value. This may not fully represent every Grid Pro field, but it is a useful guide for working with Builder dynamic data. First make sure the source text is clean, then introduce presentation limits.

Do not use automatic truncation as a way to postpone editing. If the first twenty characters do not explain the card, visitors will get a collection of fragments. Write concise opening phrases for excerpts in advance. For lengthy descriptions, it is better to display one clear attribute and leave the details on the post page or in a modal window.

How to Verify the Source Without Guessing

Create three test posts that differ in several ways at once: title, category, image, and short text. Do not use copies of the same template with identical data. Then change one field in one post and refresh the page. If only the expected part of the card changes, the mapping is correct. If the change affects every card, you may have edited static template text. If nothing changes, check the cache and the source.

In YOOtheme Pro, a red dynamic-content indicator means that the source or mapped field is invalid. Do not ignore it in the hope that the public page will render anyway. Return to the field, select an existing source, and make sure that post type actually has the required property. This short test is more reliable than changing ten settings at once.

Sublayouts and Nested Grids: Add Complexity Without Losing the Card's Purpose

The Grid Pro product page advertises sublayouts and up to six nested grids with multiple positions. In practical terms, this means a repeating card can contain more than one line of text: it can include a Builder-built area with a set of buttons, a feature list, an additional gallery, a status block, or content for a modal window. Freedom does not eliminate hierarchy, however. Visitors should first see the main object, then the key attribute, and only then additional actions.

Design One Straightforward Reading Path First

Before adding nested areas, write the viewing path in one line: image - title - key fact - action. Anything that does not fit that path should either move into a secondary layer or be removed. For example, a project card should first show the work, then the title and category, with "Case Study" and "Gallery" buttons at the bottom. For a product, the image, title, price, and action come first. Ratings, tags, and secondary links should not push out the price or button.

A nested grid is justified when its items serve a shared purpose. Three attributes can be combined into one compact area. Two actions can form a bottom row. Photos of one object can be placed in a mini-gallery. Do not add a nested grid simply so every row has its own column controls. That kind of setup becomes difficult to edit later and hard to verify at different screen widths.

Use a Sublayout as a Self-Contained Fragment, Not a Hiding Place for Everything

A sublayout is appropriate when you need a complete Builder structure inside a card or a modal display. The official comparison says that sublayouts let you place nested Builder elements in available card positions, and that the modal builder uses sublayouts for its content. Treat it as a reusable fragment rather than a container for a long article. Inside a card, a few well-grouped elements are enough.

A good use case is a service directory where the card shows a title, short benefit, and button, while the detailed-view sublayout contains a list of stages, additional images, and a contact form. A weak use case is putting every page of the site into a sublayout in the hope that a modal will replace navigation. Modal content should support the selection process, not prevent a normal visit to a standalone page.

Six Nested Grids Are Not a Required Standard

The maximum number of available areas is a reserve provided by the tool, not a design goal. In a practical card, one or two nested areas are often enough. Every additional area should answer a specific question: where secondary attributes belong, what separates actions, or how to show a set of images. If you cannot answer that question, it is better not to enable the setting.

Check the card after every new nested block: on a wide screen, at a medium window width, and on a narrow screen. The most common mistake is evaluating the grid only in Builder on a large monitor. In real use, long titles, varied images, and limited width reveal that bottom buttons jump around and properties no longer align. The plugin documentation advertises responsive and visibility settings, but hiding inconvenient content is not a substitute for choosing priorities.

Do Not Mix a Panel Link, Image Link, and Button Without a Plan

Grid Pro distinguishes between the panel element link, button link, and lightbox image link. This is useful, but it creates a risk of conflicts. First decide what should happen when someone clicks the card. If the entire panel leads to a detailed post, the main button should lead there too, or it should have a different, clearly labeled purpose. If the image opens a lightbox, visitors should understand that from an icon or visual cue rather than discovering it after an unexpected opening.

For accessibility, add clear labels and do not leave identical links without context. The Grid Pro changelog mentions aria-label fields and link attributes, as well as nofollow, noreferrer, noopener, sponsored, and ugc options. Use those settings only when they match the type of link. Do not turn technical attributes into a checklist without understanding their purpose.

Filters, Search, and URLs: Turn a Collection of Cards Into a Clear Choice

Filters are the most visible and also the most demanding part of Grid Pro. The official comparison lists support for up to twenty-one filter groups, dropdown styling with icons, sorting, search, and links that activate the relevant filters when the page loads. That many options does not mean visitors need a complex query builder. For most pages, one primary criterion and, if needed, one refining criterion are more useful.

Define What Each Filter Group Means

Do not use a filter group as attractive navigation if it is not connected to card data. Name it as a visitor-friendly question: "Category," "Format," "Level," or "Material." Confirm that every item has one or more allowed values. If a category is the only key, do not add a second group that repeats the same attribute using different words. Filters should reduce uncertainty, not create the illusion of a large catalog.

For multi-filter selection, define the intended behavior in advance. When combining two groups, visitors usually expect an intersection: for example, projects in "Interfaces" with the format "Mobile App." In some catalogs, however, a broader union may be useful. Test this using deliberately prepared posts that belong to different combinations. The plugin changelog mentions AND and Match group modes, so treat the mode label as part of the filtering behavior rather than cosmetic UI.

Search Within the Grid Needs Clearly Defined Fields

According to the official comparison page, search can find specific content inside Grid Pro, while the changelog records search across custom text and meta fields, link text, and a title-search setting. This provides flexibility, but first choose where visitors reasonably expect to find a match. For a resource catalog, that might be the title and short description. For products, it might be the name and understandable attributes. Do not enable search across every hidden technical string: users may see a match and have no idea why that card appeared in the results.

Search testing should include four cases: an exact word from a title; a word from an allowed supporting field; a query with no results; and clearing the query. The changelog notes that the search-clear button may reset active filters. Check whether that matches your expectations and whether the page offers a separate, understandable way to reset the selection. An empty state should not look like a malfunction.

Not Every Catalog Needs Sorting

Grid Pro supports ascending and descending sorting, and static and dynamic items can use different criteria, including titles, metadata, tags, and custom fields. But sorting only makes sense when the criterion is clear. Visitors understand "newest first" or "by name" when it is labeled and the data supports it. Sorting by an internal technical field that is not visible on the card creates a sense of randomness.

If editors set the order manually, test two similar paths separately: the dynamic content source order and the additional Grid Pro order. The official description says that the element's own order works on top of dynamic-content sorting. This is convenient for targeted adjustments, but risky when several editors try to control the same sequence in different places. Assign one primary owner for ordering and document that decision for the team.

Links to a Preselected Filter

A filter link is useful when another part of the site should send a visitor not merely to the catalog page, but to an already narrowed selection. For example, a service page can link to projects in that category. The Grid Pro comparison confirms the ability to activate specific filter items on page load and, if needed, scroll to the element. The changelog also mentions external buttons and URL activation.

Create this kind of link only after the filter itself has been tested in the interface. Open it in a private browser window, refresh the page, and check the return path using a normal link. Do not manually build a collection of similar URLs until you have confirmed the correct identifier and the behavior of multiple filters. The changelog contains fixes related to case-sensitive URL hashes and custom-navigation identifiers, so it is wise to run a verification test after a plugin update.

An Empty State Is Part of the Interface, Not an Exception

The plugin advertises no-results messages and image options for that state. Use this feature with restraint. Visitors should receive three clear signals: nothing matches the selected conditions; what they can do next; and how to restore the full list. A brief message, a reset button or link, and, where appropriate, a neutral illustration are enough. Do not use accusatory copy such as "You entered the wrong search query."

Test the empty state with one group, multiple groups, and after clearing search. If the page includes several Grid Pro elements, also make sure the message belongs to the correct grid. The changelog specifically mentions displaying a message with multiple instances, and that is exactly the kind of situation often missed during manual testing.

Images, Lightbox, Buttons, and WooCommerce: Choose One Primary Action

A card almost always asks the visitor to take a step. That means appearance cannot be separated from behavior. Grid Pro advertises support for lightbox, image focal points, ratings, advanced buttons, and WooCommerce AJAX add to cart. Each capability should be used as a distinct use case rather than as one combined set of decorations.

When It Is Better to Open a Detailed Page

A standalone page is needed when an item has its own story, technical details, options, related materials, or inquiry form. The card only needs to show enough context for a decision and provide an accessible route forward. Do not try to fit the full case study into the grid. Long blocks make card heights unpredictable and filtering less understandable.

Check the clickable area with both keyboard and mouse. If the entire panel is a link, it should not contain another interactive link unless the areas are meaningfully separated. If that separation is necessary, disable the panel link and leave individual actions instead. Users should understand that the image opens a view and the button leads to details.

When a Lightbox Is Appropriate

A lightbox works well for photography, illustrations, and portfolios where viewing a larger image is valuable by itself. It works poorly for text, complex documentation, and products where the visitor needs to select an option or read conditions after viewing the image. The Grid Pro changelog notes that only images visible after filtering should be included in the lightbox and that a grid lightbox is isolated from a sublayout lightbox. In practice, this means you need to check two states: the full list and the filtered list. Visitors should not browse hidden images unrelated to their current selection.

Set meaningful alt and title values wherever an image conveys information. The plugin changelog mentions image attributes and focal points. Technical attributes do not replace a well-maintained source media library, however. A poor image with an incomplete title does not become useful simply because lightbox is enabled.

Buttons in a Product Grid

If the project uses WooCommerce, first decide what matters more at this stage: quick add to cart or a visit to the product page. An AJAX button is useful for simple items where the visitor does not need to select a variation, personalization, or additional option. For a variable product, going to the product page is often more honest because required choices are visible there. Do not imply that a button can complete an action the store cannot actually perform until attributes are selected.

Test a product card as a visitor would: with a clean session, on a category page, using one button click, confirming the cart changes, and refreshing the page. Then check whether the button conflicts with caching or a third-party wishlist module. WordPress.org includes a user report where adding an item to a wishlist through a shortcode in a text element did not work as expected alongside Grid Pro; the suggested general troubleshooting path was to update components, temporarily use a standard theme, and enable plugins in groups. This is not evidence of a Grid Pro defect, but it is a useful example of why integrations need to be tested within the real extension stack.

A Safe Improvement Without Code

Sometimes cards look uneven because titles have different lengths. Do not rush to insert CSS into plugin files. First use the built-in text-limiting settings, well-written excerpts, a consistent title approach, and, if needed, height or alignment settings available in the current Builder version. Rolling back this change is simple: restore the original value in the element setting. Only then consider a small adjustment in a child theme or custom CSS based on a real selector you have confirmed in the browser inspector. This guide intentionally does not include a universal CSS snippet: without confirmed markup, it could affect another element.

Practical Example: A Case Study Catalog with Two Filters and a Sublayout

Let us build a concrete example that shows how to use YOOtheme Grid Pro without mechanically cycling through every option. Imagine a studio publishing case studies. Visitors need to select a project category and format, view several images, and open a page for a specific case study. WordPress already has a custom post type called "Case Studies." Each entry has a title, featured image, excerpt, "Category" taxonomy, "Format" taxonomy, and permalink.

Goal and Example Preparation

The goal is to show a grid of all published case studies that can be filtered by two attributes. Each card should contain an image, title, category, short excerpt, and a button to open the item. The image should open in a lightbox only when the photos themselves help visitors choose a project. Additional details are not needed above the fold in this example, so they will not overload the card.

Before starting, prepare at least six posts across different combinations. For example, two branding case studies, two interface projects, one website, and one mobile product. One case study should belong to two different attributes at once so you can test the intersection of filters. Give one case study a long title and a long excerpt to see the grid's actual limits before publication.

Step 1. Build the Framework and Connect Multiple Posts

On a test page, open Builder and add Grid Pro in the required area. In the advanced settings, choose dynamic content for the element itself and assign a multi-item source from the "Case Studies" custom post type. If the list lets you limit the selection to published objects, use that predictable option. Do not set random ordering or add filters yet.

Save the page and check the number of cards. If there are fewer than expected, do not try to compensate by changing column settings. Return to the WordPress posts: are they published, do they belong to the right type, and is the source itself constrained? The first output should be unexciting but accurate: every prepared case study appears exactly once.

Step 2. Map the Five Required Fields

Set the title as a dynamic field using the post title. Use the featured image for the image. Link the short text to an excerpt or a deliberately prepared field, not the full article. Display the category through the matching taxonomy if it genuinely helps people navigate. Set the main action to link to the post page. Then open every test case study on the public page.

At this stage, it is especially helpful to verify the mapping: change the title of one case study, refresh the page, and confirm that only its title changes. Change the featured image of another case study and check the crop. These small changes validate the full chain: "post - source - field - card." If you add the sublayout and filters immediately, the source of a problem becomes unclear.

Step 3. Set Hierarchy, Not the Maximum Number of Columns

Choose the number of columns so titles and images remain readable. Three cards per row may work on a wide screen, but that is not a required value. Then define behavior at narrower widths using real text as your reference. Do not hide the title just to preserve the image. It is better to move to fewer columns or shorten a secondary excerpt.

If you need to visually separate the category from the title, place the label in one compact nested area. If you need two buttons, create a bottom action area. Do not split the card into many independent grids. After every change, open the page in a regular browser, not only in Builder preview.

Step 4. Add Two Clearly Named Filters

Create the first group connected to the "Category" taxonomy and label it with a word visitors can understand. Create the second for "Format." Do not add dropdowns, icons, and sorting right away. First test the basic choices. Click one filter, then one from the other group. Confirm that the list shows the intersection if that is the behavior you selected. Then reset each filter and verify that the full set returns.

After the test succeeds, you can choose the navigation format: a row of buttons for a short set of categories or a dropdown for a long vocabulary. Prefer the format that makes the current selection visible. A compact, attractive control that hides the active value is worse than a plain list where the state is obvious.

Step 5. Decide Whether Search Is Needed

In this catalog, search is useful if visitors remember the case study title, client, or technology named in an allowed excerpt. Enable search only for fields where a meaningful match is expected. Test a title query, a word from the short description, a query with no matches, and clearing the search. If search produces too many accidental matches, it is better to keep only filters and improve navigation.

For the no-results message, use calm wording, for example: "No case studies match the selected criteria. Reset the filters or choose another category." Add a reset action if the current settings provide one. Visitors should not have to guess manually which of two active filters caused the empty state.

Step 6. Add a Sublayout Only for the Detailed View

If case studies contain several important images, use a sublayout or separate modal content for additional images instead of putting every photo in the main card. In the sublayout, keep the title, large image, short description, and one link to the full case study. If you open a modal, test closing it with the keyboard, focus return, and behavior on a small screen. Do not use a modal for content that should be indexed and have its own URL.

You can now enable lightbox for images if it does not compete with the modal approach. Test the filtered set: after selecting a category, the gallery should open only the visible projects. This is one reason the test should use real posts rather than three identical placeholders.

Step 7. Record the Pre-Publication Check

Open a new tab in private mode. Check the full list, every filter group, their combined behavior, search, the empty state, reset behavior, and the card link. Then view the page at wide and narrow window widths. Add one new test case study in WordPress and confirm that it appears without manually adding it to the grid. This final check proves that you built a dynamic catalog rather than a static snapshot of the data.

Quick takeaway: Grid Pro becomes manageable when every layer is tested separately - source, card fields, responsive layout, filters, and secondary actions. This order reduces false errors.

Verifying the Finished Setup: What Editors and Visitors Should See

A saved page is not automatically a finished catalog. Verification has two distinct purposes. Editors check whether WordPress data can be changed safely. Visitors check whether the grid helps them choose the right item in a few actions. If you only look for visual agreement with the layout, it is easy to miss an error in a link, filter, or empty state.

Check the Editorial Data Chain

Change the title, image, category, and excerpt in different test posts. After every change, confirm that only the required part of the page changes. Add a new post and check that it appears according to the source rules. Unpublish a test post and confirm that its card disappears. This sequence confirms that the dynamic source has not lost its connection to WordPress data.

If a card contains a custom field, leave one of those fields empty in a test post. This shows how real incomplete data will look. Sometimes an optional area should be hidden; sometimes it is better to introduce an editorial rule stating that the field is required. It is far worse to discover an empty label after visitors have already seen the page.

Check Visitor Behavior

Ask a colleague who did not participate in the setup to find one specific item. Do not tell them which filter to click. Watch whether they understand the group labels, notice active states, and can reset their selection. Then ask them to open details and return to the catalog. If they lose their selected filters, you may need to reconsider the link flow or add a route back to the filtered selection.

Check keyboard navigation. Focus should move in sequence through search, filters, links, and buttons, and the visible state should not disappear. Do not use color as the only indicator of an active state. Official Grid Pro materials advertise WCAG support, but page accessibility still depends on your content, contrast, labels, actions, and nested setups.

Check Performance Without Making False Promises

A grid with many large images, sublayouts, and interactive features can become heavier than a simple page. Do not promise automatic speed improvements from Grid Pro itself. Instead, measure the public page before and after adding a complex grid, review image sizes, count visible items, and observe behavior on a standard connection. Keep the initial set to a reasonable number of cards. If visitors need a large archive, plan pagination or an integration with an appropriate loading extension.

Do not enable lazy loading or high image priority blindly. The Grid Pro changelog notes image-loading and priority settings. The practical goal is simple: the main image in the above-the-fold area should not be delayed, while images lower on the page should not interfere with the initial render. Compare behavior with the theme's current configuration and optimization tools.

Check SEO and Links

A grid does not replace a substantive archive or case-study page. Every important card should have a real destination page with a clear title and permanent address. Do not repeat the same anchor text dozens of times without distinguishing the item. If special link attributes are enabled, use them for their intended purpose: for example, relationships for user-generated or sponsored content apply only when they match the link type.

Check addresses in a new tab and in private browsing mode. If the grid uses a filter link, make sure it does not point to an outdated or empty identifier. A filter is useful for visitor navigation, but it should not be the only way to discover important content on the site.

Troubleshooting Grid Pro: Symptom, Cause, Check, and Safe Fix

Grid Pro issues are best investigated as a chain: plugin activation - data source - field mapping - filter state - cache - conflict with another extension. Do not change several levels at the same time. Record the symptom, run one short test, and only then apply a fix.

The Element Is Not Visible in the Builder Library

Symptom: Grid Pro cannot be found in Builder after installation. Likely cause: the plugin is not active, YOOtheme Pro is not active, you are using the wrong site, or Builder is opening from a cached state. Check: open the Plugins list, verify extension status, then open Builder on a clean test page. Fix: activate the required components normally and refresh the screen. If that does not help, temporarily disable only the most recently added plugin and repeat the test on a site copy.

A rollback is needed if activation makes the admin area inaccessible or produces a fatal error. In that case, do not edit extension files. Disable the most recent plugin through safe WordPress access or restore a backup point, then investigate the error in a test environment.

There Is Only One Card, or None at All

Symptom: a list of entries is expected, but only one card or an empty area is visible. Likely cause: a single source was chosen instead of a multi-item source, the source is not set at the element level, the entries are not published, or the post type does not match the query. Check: temporarily display a simple title and assign a known set of three published posts. Fix: choose a multi-item source at the Grid Pro level and check the selection conditions one at a time.

Do not try to solve this issue by manually copying cards. That turns a dynamic catalog into a static one. Rolling back the source setting is safe: restore the prior working source, save, and retest it using three reference posts.

Cards Show Incorrect Text or Images

Symptom: the number of cards is correct, but they share the same image, have blank text, or show the wrong title. Likely cause: part of a field was entered manually instead of being connected to a dynamic field, or the mapping was configured in a different nested area. Check: change one title and one image in WordPress. If the public card does not reflect the change, inspect the dynamic-content indicator and the mapped field. Fix: assign the correct field again, save, and clear only the required cache.

If a field is optional, do not display an empty decorative area for it. Remove it from the shared framework or create a conditional setup only after confirming that the current element version supports your method.

A Filter Is Visible, but the Results Do Not Change or Become Empty

Symptom: clicking a filter option does not change the cards, or every combination produces an empty result. Likely cause: values in posts are not normalized, the filter is tied to the wrong field, the selected group behavior does not match expectations, or the page is showing an old cache. Check: create three reference posts with deliberately different attributes and test the filter on each one individually. Then test a combination of two groups.

Fix: normalize terms into one vocabulary, check the group-to-data connection, and only then change the matching mode. Test reset behavior. If you use URL activation, open the link in a private window. A safe rollback is to disable the second filter group, save the working single group, and reintroduce complexity after testing.

Search Does Not Find an Expected Word

Symptom: a word is visible to visitors on a card, but search does not find it. Likely cause: the field is not included in the search scope, the text is displayed from another source, or the match is hidden in metadata that should not participate in search. Check: test an exact word from the title and a separate word from an allowed excerpt. Fix: configure search only for fields where matches are expected, then repeat the test after clearing search.

Do not broaden search to every technical field simply to increase the number of results. It is better to add one understandable attribute to the card or improve categories than make visitors guess why an item was selected.

The Site Still Shows the Old Grid After a Builder Change

Symptom: the setting is saved, but the public page still looks unchanged. Likely cause: browser, optimization-plugin, theme, or server cache. In a similar FAQ, Flart Studio recommends clearing optimizer caches, clearing the theme cache through Settings - Advanced - Clear Cache, then refreshing the browser and rebuilding styles through Builder if needed. Check: first open the page in a private window, then clear one cache layer at a time.

Fix: clear the relevant cache and document which layer serves the page for your team. Do not delete all cached data on a production server without a reason. If clearing the cache breaks the appearance, restore the last working Grid Pro setting and investigate the conflict on a staging copy.

A Product Button or External Extension Behaves Differently Than Expected

Symptom: an AJAX action does not update the cart, a wishlist button does not work inside a card, or behavior differs by theme. Likely cause: a JavaScript conflict, another extension's markup requirements, caching, or an unsuitable product type. Check: update compatible components, test with a temporary default theme on a site copy, and enable third-party plugins in small groups. This approach matches the general advice in a WordPress support discussion about a related use case.

Fix: identify the specific conflict and choose a simpler card flow if the component expects different markup. If a product requires variation selection, send visitors back to the product page instead of trying to add it with one AJAX button. The rollback is to disable only the integration feature in Grid Pro while preserving the basic product link.

What to Use Instead of Grid Pro, or Alongside It

Video: Building a Basic Grid Pro Setup

Flart Studio's official video list includes a focused tutorial called Grid Pro - Basics. It is useful as a visual continuation of the sections on adding the element and building an initial setup: you can compare the overall workflow before introducing filters and complex sublayouts. Watch it beside your test page and repeat only the steps that match the current interface version and your data model.

At the beginning of the video, it is worth comparing the process of adding the element and building the basic card, then pausing at field selection and checking the same output with one of your test posts. Do not copy every setting from the video: your grid should retain only the features that help visitors filter or open the item they need.

Questions That Commonly Come Up When Working with Grid Pro

Can I Use YOOtheme Grid Pro Without YOOtheme Pro?

It does not make sense to consider it separately from YOOtheme Pro Builder: Grid Pro is presented as an element for that builder. It adds capabilities to an existing environment rather than creating an independent WordPress card editor. Before installation, make sure Builder opens a test page without errors.

Do I Need to Create Cards Manually?

That is possible for a one-time static block, but for a catalog it is better to connect a multi-item dynamic source. Grid Pro then repeats one card structure for WordPress entries while authors maintain the data itself. Manual cards are appropriate only when a list is small and definitely will not grow.

Why Does a Filter Show Zero Results When Cards Are Visible on the Page?

The most common causes are inconsistent attribute spelling, an incorrect filter-group connection, or the way multiple groups are combined. Create three reference posts with known values and test filters one by one, then as a pair. Also clear the cache and open the page in a private window so you do not mistake old HTML for a configuration error.

Can I Display Several Filters and Search at the Same Time?

Official materials indicate support for multiple filter groups and search inside Grid Pro. It is technically possible, but the interface should only become more complex when the data is clear. Start with one filter. Add a second filter and search when each solves a distinct visitor need and you are ready to test empty states and resetting every active state.

Is Grid Pro Suitable for a WooCommerce Catalog?

The feature list includes WooCommerce AJAX add-to-cart integration. It can be useful for simple products, but it does not remove the need to test with your theme, variations, caching, and other commerce extensions. For a product that requires option selection, it is safer to send visitors to its own product page.

Can I Use a Lightbox and a Card Link at the Same Time?

You can build that kind of flow because Grid Pro distinguishes between a panel link, button link, and image view. But first separate the clickable areas and explain the action visually. If the full panel leads to a post, an image with a lightbox should not unexpectedly perform a competing navigation action.

Will Grid Pro Automatically Improve Speed and Search Visibility?

No. Performance depends on the number of items, image sizes, nested content, active features, and caching. Search visibility depends on real card destination pages, logical links, and content. Test the actual page before and after implementation instead of relying on universal promises.

How Can I Update Grid Pro Safely?

First review the changelog, create a backup, or update on a staging copy. After updating, test one dynamic grid, a filter, search, lightbox, and a product action if you use one. Pay particular attention to filter URL activation, custom fields, and complex sublayouts.

A Grid Pro Settings Map: Avoid Turning Configuration into a Random Collection

Grid Pro has many capabilities, which is exactly why configuration is easier when organized by output layers rather than interface tabs. One layer determines which objects appear in the grid. The second determines which fields are visible for each object. The third controls layout and responsiveness. The fourth defines the click action. The fifth gives visitors filtering and search. The sixth contains individual exceptions: an image in another format, a sublayout, a special button, or a different order. If you change these layers in a mixed sequence, it eventually becomes difficult to explain why one card behaves differently from another.

Start from a clean state and save the page after completing each layer. Name saved states in the team working log: "source output," "card fields," "filters," "sublayout," and "verification." There is no need to duplicate every page in Builder. It is enough to record exactly what changed so another editor does not remove a required setting through misunderstanding. This is especially useful on sites where an editor manages content while a developer or designer builds the Grid Pro structure.

The Source Layer: It Defines the Collection, Not the Appearance

The source layer specifies post types, selection conditions, order, limit, and dependence on the current page or template. In YOOtheme Pro, a source can be linked to the current archive, a custom query, or the parent-element context. First decide whether the catalog should show the same collection on every page or change based on a category or template. A general service showcase usually needs a consistent custom source. An archive template needs data from the current context.

This is where a conceptual mistake is especially easy to make: using Grid Pro filtering as a replacement for a WordPress query. If the page needs to show only published case studies of a specific type, start with a source that returns exactly those items. A Grid Pro filter should help visitors work with the available collection, not compensate for a source query that is too broad or unclear. This sequence reduces visual clutter and makes troubleshooting easier.

The item limit is also part of the workflow. If the first page shows only nine cards, visitors should not conclude that the catalog ends at nine. Either provide a clear route to more content or make the limit appropriate for that specific collection. The Grid Pro changelog mentions static-order and limit settings, and the Flart Studio ecosystem includes a separate Load More Element. Do not enable both an artificial limit and incremental loading until you have decided which mechanism is responsible for continuing the list.

The Field Layer: Show What Helps People Compare Items

Once the collection is found, work with fields by priority. Most catalogs have one primary identification field, one visual proof point, and one short distinguishing attribute. For example: title, photo, and category. Price, author, date, rating, format, duration, or number of seats should be added only when they help visitors choose. Grid Pro advertises additional text, multiline text, image, and link field sets. That gives you freedom, but it does not require turning every card into a mini-table.

A useful check is to cover the image with your hand or mentally replace it with a neutral rectangle. Is it still clear what the item is? Then hide the text and look only at the images. If the image set offers no meaningful distinction, the primary decision may not happen where you expect it to. This check helps determine which fields belong in the first layer and which should move into a sublayout.

If you display custom fields, define editorial rules for them. A "Duration" field should either be filled in for every item or hidden without leaving an empty label. A "Role" field should use one vocabulary rather than freeform variations from different authors. Grid Pro can display many things, but it cannot establish internal data discipline for you.

The Layout Layer: Columns Follow Content

The number of columns should be chosen for readability, not density. Four columns may look good with wide showcase imagery, but fail with a long title, labels, and two actions. Three columns often provide more breathing room and handle varied images more reliably. At medium widths, think beyond the technical shift to two columns: confirm that labels remain connected to titles and actions remain associated with the correct card.

Grid Pro advertises mixed item widths and nested areas. This is a strong technique for an editorial selection where one item should stand out, but it should not become arbitrary decoration. Choose a rule: for example, one featured case study at the start of a collection, or larger cards only for resources with longer descriptions. If width changes without a reason, visitors do not understand the hierarchy and editors do not know who deserves special sizing.

Always test mixed widths with real images. A wide card that uses a small source photo can emphasize weaknesses in the media library. If necessary, keep a consistent width and give the featured item another, more editorially honest way to stand out: a label, order, a separate top block, or a link from surrounding text.

The Action Layer: Every Action Has a Predictable Outcome

For every interactive item, define its outcome with one verb: "opens the case study," "enlarges the photo," "adds a simple product," or "shows details." If you cannot define the action that way, the button or link does not belong in the card. Grid Pro offers advanced link settings, but visitors do not see attributes; they see the button's promise and the actual outcome.

Test actions with a mouse, keyboard, and touch device. If an image enlarges while the entire panel is also clickable, users should not accidentally leave the page. If a button opens a product page, do not place another button beside it with an unclear label. A clear interface usually benefits more from one strong action than from three nearly identical ones.

The Exceptions Layer: Keep a Reason for Every Override

Grid Pro advertises override features, including nested-grid and image settings at the individual-item level. This function is intended not for constant manual polishing, but for occasional meaningful exceptions. For example, one case study has an additional gallery, another has a special call to action, and a third has an image with a different proportion that cannot be replaced. Record the reason for an exception in an editorial note. If there are twenty such exceptions a month later, that is a sign that the shared card template should be rebuilt.

A safe way to roll back an exception is to remove it from one test card first and see whether a reasonable shared appearance returns. Do not edit plugin source files for an individual card. The shared rule should live in the element setting, while data for a specific object belongs in WordPress.

Mixed Widths, Ordering, and Text Fields: Managing Editorial Hierarchy

One of Grid Pro's distinctive features is the ability to make a grid uneven through mixed widths, additional fields, manual ordering, and nested areas. In the right use case, this turns a list into an editorial selection. In the wrong one, it makes scanning harder because visitors spend time figuring out why one item looks more important than another. The goal is not to show the maximum number of settings, but to make the order intentional.

When Mixed Widths Actually Help

Mixed widths are useful when a collection has one main item and several supporting items. For example, on a "New Case Studies" collection page, the first project may use a wider format because it introduces the month's key theme. In an educational resource catalog, only series with multiple lessons may use wider cards. In a photo gallery, width can follow the image's natural format if that does not harm accessibility and the cards remain comparable.

Do not use width as a hidden rating if editors do not understand the rule. Visitors may interpret a large card as sponsored content or the only available option. If hierarchy matters, add visible textual context such as "Featured Case Study," "New Series," or another honest marker. Do not use such labels merely to create artificial urgency.

Manual Order and Source Order

First identify who owns the ordering. If the catalog should follow publication date, let the WordPress source handle it. If an editor curates the collection, use a clear manual order and keep it in one agreed-upon place. If the order is based on a meta field, it must be filled in for every item and use one consistent format. Mixing these approaches without documentation leads to a new entry appearing somewhere other than where its author expects.

The official comparison states that Grid Pro can sort both static and dynamic items by title, meta fields, tags, custom fields, or randomly. Random order can work for an inspirational collection, but it is poorly suited to a catalog where visitors need to find an item they saw yesterday. In that case, offer explicit sorting or a saved filter link instead.

Custom Text Fields as a Short Showcase, Not a Duplicate of the Post

Additional text fields are especially useful when a card needs a brief fact that does not exist in the standard post: a studio role, course level, material, timeline, or status. But they should not become an alternative database containing copies of titles and descriptions. Separate responsibilities: the main name remains the post title, long text remains the post content, and the Grid Pro field adds only the attribute needed specifically in the grid.

Create a formatting rule. For example, the "Duration" field should say "6 lessons," not "6 lessons" in one place, "Six" in another, and "6 sessions" somewhere else. For a "Status" field, use a small controlled set such as "New," "Updated," and "Archive." This approach not only improves the appearance of cards, but also makes filtering and search predictable when those fields participate in them.

How to Test Hierarchy, Not Just Layout

After configuring mixed widths and ordering, ask a reviewer to identify within ten seconds which item is primary, which items are similar, and where the relevant action is. If the answer depends on an explanation you gave beforehand, the visual hierarchy is not working. Then change the order of two source posts and confirm that the outcome matches your chosen order owner. This reveals hidden overrides before publication.

Finally, confirm that cards with different heights do not disrupt the integrity of later rows. If labels, buttons, or images visibly jump, do not mask the issue with many fixed heights. First shorten secondary text, bring images into a shared pattern, and review nested-area settings. A fixed height is appropriate only when content is deliberately limited and you have tested overflow.

Compatibility, Caching, and Team Roles: Keeping the Grid Understandable After Updates

A large grid does not break only because of a technical conflict. It often becomes difficult to understand because one person changes the source, another manually edits a card, a third clears the cache, and a fourth adds another filter. A reliable Grid Pro implementation requires a short agreement on roles and a simple post-update verification routine.

Separate Responsibilities for Data, Structure, and Publishing

The content author is responsible for accurate titles, images, taxonomies, excerpts, and required custom fields. The grid editor is responsible for the source, field mapping, card structure, filters, and actions. The technical administrator is responsible for updates, backups, caching, and conflict troubleshooting. In a small team, one person may handle all of these roles, but the distinction remains useful because it shows where to look for the cause of an issue.

Create a short reference note: where to edit a card, where text must not be changed manually, how to add a new allowed filter term, how to clear safe caches, and which states to check before publication. You do not need a long policy document. A few precise actions are enough. This reduces the risk of a content author manually overriding every card because they do not know how to add a field to the original post.

What to Test After an Update

The Grid Pro changelog shows that changes can affect the WordPress installation flow, PHP warnings, search, dynamic field assignment, filter identifiers, lightbox, and YOOtheme Pro compatibility settings. So do not limit verification to checking whether the plugin is active. On a site copy or during a short maintenance window, test one simple dynamic grid, one filter, search, a direct filter link, a lightbox image, and a sublayout if one is used.

For a product grid, also test a typical simple product. For a catalog with URL filters, check the link from a fresh private window. For mixed-width cards, check medium and narrow browser widths. This set of tests takes less time than investigating the cause after visitors notice an empty catalog.

Cache: Clear It in Sequence, Not at Random

Caching is not Grid Pro's enemy. It becomes a problem when a team does not know which layer is serving the old version. A typical project may involve browser cache, optimization-plugin cache, Builder theme cache, and server cache. Start with a private browser window. Then clear the cache only for the tool that serves the page. If the theme or Builder has its own cache-clearing option, use it deliberately. After every action, reopen the same reference page.

Do not update Grid Pro, the theme, ten other plugins, and optimization settings at the same time. If the outcome changes, you will not be able to connect it reliably to a cause. The sequence "backup point - one change - test - clear the specific cache - retest" may seem slower, but it is faster in practice because it preserves evidence.

Working Alongside YOOtheme Pro and Other Extensions

Grid Pro extends Builder, so the main compatibility boundary lies between your content source, the YOOtheme Pro theme, and every extension that changes markup, links, images, or WooCommerce actions. The official provider offers related elements such as Modal and Load More, and the YOOtheme catalog describes them as separate extensions with their own functions. Connect them one at a time. First make sure Grid Pro renders cards reliably, then add modal content or incremental loading.

Do not transfer Joomla guidance into a WordPress project, even if the product exists on both platforms. What matters here are WordPress conventions: the admin area, plugins, post types, taxonomies, permalinks, theme cache, and Builder. If documentation refers to another CMS, use it only as context for the general feature, not as a ready-made interface path.

A Minimal Change Log for One Grid

For a complex page, it is enough to keep five records alongside the project: the page or template address; source name; card fields; filter groups; and actions plus related extensions. Add the date of the internal check and the responsible person's name, but do not include technical details in public copy. If an issue appears, this will restore the setup more quickly than trying to remember every Builder click.

If you use a nonstandard field or card override, state why it exists. For example: "The featured case study uses a wide card because it begins the editorial collection." When the reason is no longer clear, the exception should be removed or replaced with a shared rule.

When YOOtheme Grid Pro Is the Right Choice

YOOtheme Grid Pro is worth its complexity when your site already runs on YOOtheme Pro and the object list needs to be more than attractive: it needs to help people choose. Strong output comes from a clear data model, one reliable card, meaningful filters, and required verification of every state. Do not try to use every available option. Keep only the mechanisms that shorten the visitor's path to the right resource, product, or case study.

Start with a test page and one dynamic grid. Once the source, fields, and links are verified, add filters, search, a sublayout, or lightbox in that order. If your task truly requires this kind of manageable showcase, you can download the ZIP archive and implement the element on a site copy while maintaining the verification sequence described above.