September 28, 2023

Dynamic Elementor Hero Section Meal Layout with Loop Grid and ACF

Play Video

Creating a dynamic Elementor Hero Section that updates automatically can keep your website fresh and engaging. This tutorial walks you through the process of setting up a dynamic hero section using the Elementor Loop Grid and Advanced Custom Fields (ACF). This setup is especially useful for websites that feature daily menu items or products.

Setting Up the Hero Banner

Create a Boxed Width Container

  1. Create a new container with a boxed width of 1140 pixels.
  2. In the Advanced tab, set the padding to 100px top, 20px right, 100px bottom, and 20px left.

Add Child Containers

  1. Inside the parent container, add two child containers.
  2. Set the first child container to occupy 40% of the parent container’s width.
  3. Set the second child container to occupy the remaining 60%.

Adding the Loop Grid

Configure the Query

  1. Copy the existing Loop Grid from the previous tutorial and paste it into the second child container.
  2. Go to the Loop Grid settings and navigate to the Query section.
  3. Set the query to show the latest two items, sorted by date in ascending order.

Adjust the Layout

  1. In the Loop Grid settings, navigate to the Layout section.
  2. Set the layout to display two columns and only show two items.

Styling the Hero Section

Add an Image

  1. Inside the second child container, add an image.
  2. Set the image to full width and adjust its size to fit your design.

Position the Loop Grid

  1. Go to the Loop Grid settings and set its position to “Absolute.”
  2. Align it to the bottom of the container.

Adding Text and Buttons

  1. In the first child container, add a headline, sub-headline, and a button.
  2. Style them according to your website’s design guidelines.

Mobile Responsiveness

  1. Adjust the size and position of the elements for mobile view.
  2. Test the layout to ensure it looks good on various devices.


Creating a dynamic Elementor Hero Section with the Loop Grid and Advanced Custom Fields (ACF) can add a unique, ever-changing element to your website. This setup is useful for websites that want to feature new content regularly, such as daily menu items or featured products.

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.
Dynamic Elementor Hero Section Meal Layout with Loop Grid and 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.