Creative Elementor Loop Grid Layout for Recipes with ACF

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.