Dynamic Elementor Hero Section Meal Layout with Loop Grid and ACF

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.

Conclusion

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.