Loop Grid with ACF Fields – Elementor Pro WordPress Tutorial

Creating a visually appealing and functional website often means going beyond the basics of WordPress and exploring powerful tools that enable customisation. One such tool is the combination of Advanced Custom Fields (ACF) with Elementor Pro’s Loop Grid feature. In this comprehensive guide, we’ll walk through how to build a custom post type with custom fields, and then display it elegantly using Elementor’s Loop Grid, just as demonstrated by Web Squadron.

This tutorial dives deep into setting up a custom post type called “Food” with related taxonomies and custom fields, and then styling the output in a unique card layout with images and dynamic content. Whether you’re a web designer looking to create a menu, a portfolio, or any custom listing, this step-by-step guide will help you harness the power of ACF and Elementor Pro to build flexible, dynamic content grids.

Why Use Advanced Custom Fields and Elementor Pro Loop Grid?

WordPress, by default, offers posts and pages to manage content, but sometimes you need something more tailored — like a menu of food items, a product catalog, or a portfolio. This is where Custom Post Types (CPTs) come in handy. ACF extends this by allowing you to add custom fields to these CPTs, such as meal type, cooking time, servings, or any other details specific to your content.

Once you have your data structured, Elementor Pro’s Loop Grid feature lets you display this content in a dynamic, repeatable layout. This means you can design a card-like grid layout that pulls in your custom fields and images automatically, creating an engaging and easy-to-maintain section on your site.

Step 1: Setting Up the Custom Post Type and Taxonomy

The first step is to create your custom post type (CPT). In this example, we’ll create a CPT called Food, which will hold our menu items. We also create a custom taxonomy called Food Type to categorise these items, like Indian, Mexican, or Italian cuisines.

1. Install and activate the Advanced Custom Fields plugin: You can get the free version from the WordPress repository. This plugin is essential for adding custom fields to your CPT.
2. Create a new post type: Navigate to ACF’s Post Types section and add a new post type called Food. Set the singular and plural labels accordingly.
3. Create a new taxonomy: Under the Taxonomy section, add a new taxonomy called Food Type. Assign it to your Food post type so you can categorise your menu items effectively.
4. Assign taxonomy to post types: Ensure your taxonomy is linked to your Food CPT and save your changes.

This setup allows you to organise your food items neatly, making it easier to filter and display items based on their categories later.

Step 2: Preparing Your Media Assets

Before adding custom fields, it’s helpful to gather your images. For this layout, images sized around 200×200 pixels work well, especially for grid layouts. Using images with transparent backgrounds and formats like WebP can improve site performance, as these images tend to be lightweight (around 15-17 KB each).

For example, you might prepare circular food icons or photos designed in a tool like Canva, saved with transparent backgrounds to create a clean, professional look on your cards.

Step 3: Creating Custom Fields with ACF

With your post type and taxonomy ready, the next step is to add custom fields that will capture extra information about each menu item. These fields could include:

• Meal Type: e.g., breakfast, lunch, dinner
• Time to Cook: number of minutes needed to prepare the dish
• Serves: number of servings the dish provides

Here’s how to create these fields:

1. Go to the Field Groups section in ACF and add a new group named Food Items.
2. Add a field called Meal Type. Instead of a free text field, choose a Select field type to limit user input to predefined options like “Breakfast,” “Lunch,” and “Dinner.” This prevents typos and inconsistency.
3. Add a Time to Cook field of type Number. In the presentation tab, append “mins” so that when users enter a number, it automatically shows as, for example, “30 mins.”
4. Add a Serves field also of type Number to specify how many people the dish serves.
5. Set the Field Group to display only on the Food post type to keep things organised.
6. Save your changes.

Now, when you create a new Food post, you’ll see these extra fields ready to be filled in alongside the title and content editor.

Step 4: Adding Food Items

With everything configured, you can start adding your menu items. Here’s a quick example:

• Title: Hot Balti
• Meal Type: Dinner
• Time to Cook: 30 mins
• Serves: 4
• Featured Image: Select an appropriate image from your media library
• Food Type: Indian

Repeat this process for as many menu items as you like. For instance, other examples might be “Tortilla Wraps” or “Pea Pod Veg” with their respective details.

Step 5: Building the Loop Grid Layout in Elementor Pro

Now comes the exciting part: displaying your Food posts in a stylish, dynamic grid using Elementor Pro’s Loop Grid widget. This allows you to design a card-style layout that pulls in your custom fields and featured images automatically.

Follow these steps:

1. Open the page where you want to display the grid (e.g., a test page or a menu page) in Elementor.
2. Add a container to hold your grid and set its width to around 900px with some padding (e.g., 100px top and bottom) to give breathing room.
3. Drag and drop the Loop Grid widget inside this container.
4. In the Loop Grid settings, set the Query to your custom post type (Food). This ensures only Food posts are displayed.
5. Create a new Loop Item template that controls how each card looks.

Designing the Loop Item Template

Within the Loop Item template, you build the structure of each card. Here’s an approach that works well:

• Parent Container: Set as a column layout with padding and optional border or shadow for a card effect.
• Child Container: This will hold the custom fields like Meal Type, Time to Cook, and Serves. Zero out margins/padding here for precise control.
• Featured Image: Add an image widget outside the child container but inside the parent container. Set this to dynamically pull the Featured Image from the post.

Position the image absolutely within the parent container, for example, aligned to the bottom left, with some padding to separate it from the text. This creates a visually interesting layout where the image overlaps part of the card.

Adding Dynamic Content for Custom Fields

For the textual content inside the child container:

• Add a Post Title widget to display the food item’s name.
• Add Heading or Text Editor widgets that use Dynamic Tags to pull in the ACF fields:
  • Meal Type: Display with a prefix like “Meal Type: Dinner” for clarity.
  • Time to Cook: Show as “Time to Cook: 30 mins”.
  • Serves: Indicate as “Serves: 4”.

You can style these elements with font sizes, weights, and colours to create hierarchy and improve readability. For example, make the title bolder and larger than the other fields.

Styling Tips

• Use padding and margins thoughtfully to avoid clutter and give content room to breathe.
• Add a subtle border or shadow to the card container to make it stand out.
• Consider reducing text sizes on mobile devices or stacking cards vertically rather than side-by-side for better responsiveness.
• Experiment with CSS for advanced effects like glassmorphism if desired.

Step 6: Adding Interactivity and Filtering

To enhance user experience, you can add a taxonomy filter above the Loop Grid. This allows visitors to filter menu items by Food Type (e.g., Indian, Mexican).

Simply use the Taxonomy widget, connect it to your Food Type taxonomy, and place it above the Loop Grid. Styling it to align left or centre is a matter of preference.

Step 7: Linking Cards to Individual Posts

To make each card clickable and lead visitors to a detailed page about the menu item, set the parent container’s HTML tag to “Link” and assign the link dynamically to the post URL. This way, clicking anywhere on the card opens the single post template for that food item.

Note: You will need to create a single post template for your Food post type if you want to control how individual menu items appear.

Optimising for Mobile

While the desktop layout can be visually rich, mobile views require extra attention. Here are some tips:

• Reduce padding and margins to fit smaller screens.
• Consider stacking cards vertically instead of side-by-side to improve readability.
• Adjust font sizes using responsive typography techniques such as CSS clamp or Elementor’s built-in responsive controls.
• Test on various devices to ensure images and text scale properly.

Summary and Final Thoughts

Combining Advanced Custom Fields with Elementor Pro’s Loop Grid widget is a powerful way to create custom, dynamic content that looks great and is easy to manage. By creating a custom post type for your content, adding relevant custom fields, and designing a card layout with dynamic content and images, you can build engaging sections like a food menu or product showcase.

This approach not only improves site organisation but also enhances user experience by presenting information clearly and attractively. The flexibility of Elementor Pro and ACF means you can tailor the design and functionality to fit virtually any type of content.

Remember to plan your custom fields carefully, use consistent categories, and pay attention to responsive design to ensure your Loop Grid looks great on all devices.

Hopefully, this tutorial sparks ideas for your next WordPress project and helps you create stunning custom layouts with ease.

Frequently Asked Questions (FAQ)

What is a Custom Post Type (CPT) in WordPress?

A Custom Post Type is a content type you can create in WordPress beyond the default posts and pages. It allows you to organise and manage different types of content separately, such as products, portfolios, or menus.

Why Should I Use Advanced Custom Fields (ACF)?

ACF lets you add extra fields to your posts, pages, or custom post types. This means you can capture and display more detailed, structured information like numbers, dates, images, or select options, making your content more dynamic and useful.

Do I Need Elementor Pro for Loop Grid?

Yes, the Loop Grid widget is part of Elementor Pro, which offers advanced features for building dynamic, repeatable content layouts. The free version of Elementor does not include Loop Grid functionality.

Can I Filter Loop Grid Items by Category or Taxonomy?

Yes, you can add taxonomy filters (such as Food Type) to your Loop Grid. This lets users filter displayed content dynamically based on categories or tags, improving navigation and user experience.

How Can I Make My Loop Grid Responsive?

Use Elementor’s responsive controls to adjust padding, margins, font sizes, and layout for different screen sizes. Consider stacking cards vertically on mobile and reducing text sizes to maintain readability.