September 27, 2023

Creative Elementor Loop Grid Layout for Recipes with ACF

Play Video
Tutorial Walkthrough
This video tutorial provides an in-depth walkthrough, and we recommend following along with the video to grasp the concept fully. Below, you'll find a summary of the tutorial, but please note that it may leave out some detailed steps, so watching the video will give you the most comprehensive understanding.

With the help of Advanced Custom Fields (ACF) you can create a visually appealing Elementor loop grid layout for recipes. In this tutorial, we’ll walk you through the process of setting up a creative Loop Grid layout for your recipe feed.

Setting Up ACF and Custom Post Types

Install Advanced Custom Fields (ACF) Plugin

Advanced Custom Fields (ACF) can be downloaded for free from the WordPress repository.

Create a Custom Post Type

  1. Navigate to ACF and select ‘Post Types’.
  2. Click ‘Add New’ and name it (e.g., “food”).
  3. Define your singular and plural labels (e.g., “food” and “foods”).

Create a Taxonomy

  1. Navigate to ‘Taxonomy’ and click ‘Add New’.
  2. Name it (e.g., “food type”).
  3. Assign it to the custom post type you created (e.g., “food”).

Add Custom Fields

  1. Navigate to ‘Field Group’ and create a new group (e.g., “food items”).
  2. Add fields such as “meal type”, “time to cook”, and “serves”.
  3. For more control, use the ‘Select’ field type to provide predefined options (e.g., breakfast, lunch, dinner for “meal type”).

Creating the Loop Grid in Elementor

  1. Add a Container
    Place a container on your Elementor page.
  2. Insert the Loop Grid Widget
    Add the loop grid widget and ensure it’s set to the custom post type you created (e.g., “food”).
  3. Design the Card Layout:
    • Add a child container inside the main container.
    • Insert the post title, and then add custom fields using the dynamic tags feature.
    • For a unique look, you can style each field differently. For instance, make the title bolder or add prefixes/suffixes to the custom fields.
    • Add the featured image outside the child container and set its position to ‘absolute’. This allows for more creative layouts.
  4. Stylize the Grid
    Adjust the gaps between columns and rows to your liking.
  5. Add Taxonomy Filter
    Using the taxonomy widget, you can add a filter based on the taxonomy you created (e.g., “food type”).
  6. Preview and Adjust for Mobile
    Ensure the layout looks good on mobile devices. Adjust padding, text size, and other styles as needed.

Elementor Loop Grid Layout for Recipes – Conclusion

With Elementor’s Loop Grid and ACF, you can create dynamic and visually appealing grid layouts for recipes or any other content type. This combination allows for flexibility in design and functionality, making your website stand out.

Required Resources

Elementor Logo
Free Options
Credit to Web Squadron
Web Squadron is a popular YouTube channel dedicated to providing informative tutorials, tips, and insights on web development and design. With a strong focus on WordPress and website builders like Bricks Builder, the channel aims to help users of all skill levels, from beginners to advanced developers, create and optimize their websites. By offering easy-to-understand, step-by-step guidance, Web Squadron provides practical and valuable content.
Creative Elementor Loop Grid Layout for Recipes with ACF
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.