How to Create Universal Cards with Loop Grid in Elementor

What Is Loop Grid and When Is It Needed?

Loop Grid is an Elementor widget for displaying repeating items in a grid. It uses a separate Loop Item template: you create the card design once, and Elementor then applies it to all items returned by the query.

A card can display a title, image, excerpt, author, category, price, date, and other dynamic data. The content changes depending on the current item, while the structure and visual style remain consistent.

Loop Grid is particularly useful for blogs, WooCommerce catalogs, portfolios, case study pages, job listings, real estate websites, and custom post types. If different content types have completely different fields and interaction logic, using one template may not be appropriate. In that case, create several Loop Item templates or separate templates.

• one design for all cards;
• edit the structure in one place;
• less duplication of elements and styles;
• more convenient responsive configuration;
• the ability to use cards for different queries.

Preparing Content Before Creating the Card

Before configuring Loop Grid, determine which data the card should display. For a blog post, this might include an image, title, date, category, and short description. For a product, it might include a photo, name, price, rating, and button. For a case study, it could include a cover image, client, industry, and a link to the full page.

It is important that the required fields are completed for all or most items. If one product has a subtitle and another leaves this field empty, decide in advance what should happen: should the element be hidden, should default text be inserted, or should the space remain empty?

For WooCommerce, check that products have images, prices, a publication status, and an available product page. For a custom post type, make sure its fields are registered and available for dynamic output in Elementor or through a compatible extension.

• define the minimum set of card fields;
• use consistent image and title formats;
• check whether all items have a URL;
• plan the behavior of empty fields in advance;
• do not add fields to the card that users do not need to choose an item or navigate to its page.

How to Create a Loop Item Template

First, create a Loop Item template in Elementor and build the structure of a single card. It is usually convenient to start with a container responsible for the background, inner spacing, borders, and corner radius. Place the image, text block, and button inside it.

For the title, use the Heading widget and connect a dynamic post title tag. Each card will then automatically receive the name of the current post, product, or case study. Do not enter the title manually, otherwise every grid item will display the same text.

Connect the image through Featured Image. For products, this is usually the main product image; for posts, it is the featured image; and for case studies, it is the cover image. Set a clear size and aspect ratio so that images of different proportions do not cause card heights to become inconsistent.

Connect the description, author, category, date, and other fields through Dynamic Tags as well. For standard fields, Elementor usually provides the relevant dynamic sources. Data from additional fields may require a compatible plugin or a separate widget.

• Heading — for the dynamic title;
• Featured Image — for the main image;
• Post Excerpt or another dynamic field — for a short description;
• price, category, or author — through the relevant dynamic source;
• Post URL or Product URL — for the button link.

How to Configure the Button

The button should lead to the page of the current item rather than to one static address. For posts, use the current post URL; for products, use the product URL. This ensures that every card has its own correct link.

Also check whether the entire card should be clickable. If only the button is clickable, its text should be clear, such as “View case study,” “Learn more,” or “View product.” Avoid duplicating several identical links unnecessarily, especially if this makes keyboard navigation more difficult.

• do not leave a test or static URL in place;
• check links on published and draft items;
• for external links, define the page-opening behavior separately.

Configuring Loop Grid and the Query

After creating the Loop Item, add Loop Grid to the required page and select the card template you created. Then configure the query that determines which items should be displayed. Depending on the website structure, these may be blog posts, WooCommerce products, or a custom post type.

For a blog, you can limit the selection by category, tag, author, or other available query parameters. For a product catalog, it is important to consider categories, publication status, visibility, and sorting order. For a custom post type, check that the required type is available in the source selector.

Do not combine content with different display rules in one query without a clear reason. For example, a product card may contain a price, while a regular post does not. If one template is used for different content types, every field should have a clear fallback or a display condition.

• select the correct content type;
• add category or taxonomy filters when necessary;
• define the number of columns for large and small screens;
• configure sorting and pagination if the grid is long;
• check that only published items appear in the results.

Empty Fields, Fallbacks, and Different Content Lengths

The most common problem with universal cards is empty dynamic fields. If some items do not have a price, subtitle, or category, the card may contain unnecessary spacing, confusing text, or inconsistent heights.

For optional data, use a fallback if the relevant dynamic tag supports it. For example, instead of leaving an empty subtitle, you can display neutral text or hide the entire row. For prices, it is better not to display an invented value: if a product is free, the price should follow a specific rule, and if it has not yet been set, the user should be able to understand that.

Also test long titles and descriptions. Limit the number of lines only when doing so does not hide important information, and make sure that buttons align predictably across cards.

• do not leave labels without values, such as “Price:” with no price;
• use an appropriate fallback image when the main image is missing;
• test cards with both short and very long titles;
• make sure a missing field does not create a large empty block;
• do not use a fallback that could mislead the user.

Responsive Design, Accessibility, and Performance

Loop Grid simplifies responsive design, but it does not configure everything automatically. Check the number of columns, gaps, image sizes, heading sizes, and button sizes on wide screens, tablets, and smartphones. Cards should not become too narrow or force users to scroll horizontally.

Provide meaningful alternative text for images. If the text is taken from the media file, check it in the WordPress Media Library. Decorative images should not repeat the card title in their alt text.

Do not load substantially more items into the grid than are needed for the first screen. Use pagination or another approach if the page contains a large catalog. Optimize images and avoid adding excessive heavy widgets and effects to every card.

• check the grid on real mobile devices;
• ensure sufficient contrast for text and buttons;
• maintain a logical order for the title, description, and link;
• do not rely on color alone to indicate a category or status;
• check page loading speed after adding a large number of images.

Common Mistakes When Working with Loop Grid

Static data errors occur when a manually entered title, price, or URL is accidentally left in the template. As a result, all cards display the same value. Check every text element and make sure it uses a dynamic source.

Another common issue is an incorrect query type. If the grid is empty, check whether published items exist, whether the correct content type is selected, and whether the filters are too restrictive. It is also worth checking access permissions and product visibility.

After editing the Loop Item, review several different items rather than only the first card. This helps identify issues with long titles, missing images, different price formats, and unusual field values.

• all cards have the same static title;
• buttons lead to the same page;
• the price or category is not displayed because the wrong field is being used;
• cards have different heights because text is not limited;
• the mobile version was not checked after changing the template.