April 25, 2023

Create an Elementor Loop Grid Layout with Flexbox

Play Video

Explore how to create an appealing Elementor loop grid layout for your WordPress website with Web Squadron. This layout features a unique design where the text slightly protrudes from the page, intersecting with the featured image. The best part? You don’t need any coding skills or additional plugins to achieve this.

Steps for Creating an Elementor Loop Grid Layout

  1. Start with a Container
    Begin by creating a container with a padding of 40 at the top.
  2. Add a Loop Grid
    Inside the container, add a loop grid. You can find this by typing “Loop” in the Elementor widgets search bar.
    Note: You need to have the Flexbox and Loop Grid features activated.
  3. Edit the Template
    Click on “Edit Template” to create a basic template for your loop grid.
  4. Set the Background Image
    lick on the container and set a background image. Instead of choosing an image from your media library, use the dynamic tag to select the featured image.
  5. Adjust the Image Position
    Set the image position to be centred and right-aligned. This ensures that the image is always pushed over to the right-hand side. Set the image to “No Repeat” and “Cover”.
  6. Set the Container Height
    Go back to the layout settings and set the container height to 350 pixels.
  7. Align Items
    While still in the container settings, align all items to the end.
  8. Add Padding
    Go to the Advanced tab and add a padding of 100 to the left. This creates a gap for your content.
  9. Add a Child Container
    Go back to the widgets and drop a container into your existing container.
  10. Set the Background Color
    For the child container, set the background colour to white to match the page colour.
  11. Add the Post Title
    Drop the post title into the child container. You can adjust the styling as per your preference.
  12. Add Padding to the Child Container
    Add padding to the child container to create some space around the post title.
  13. Set the Container as a Link
    Go to the container settings and change the HTML tag to a link. Click on the dynamic tags and select “Post URL”. This ensures that clicking anywhere on the container will take the user to the post.
  14. Adjust the Query
    Go back to the loop grid settings and adjust the query to display the desired number of posts.
  15. Save and Update
    Once you’re satisfied with the layout, save and update your changes.

Why you should use a Loop Grid Layout

It provides a unique way to enhance the visual appeal of your WordPress blog. A unique loop grid layout is not only aesthetically pleasing but also improves user experience by making navigation easier. By following this tutorial, you can create a blog layout that stands out from the crowd, potentially increasing your site’s traffic and engagement.

Tips for Customizing your Elementor Loop Grid Design

Here are a few tips to help you make the most of this feature and create a layout that truly reflects your style and brand:

  • Experiment with Image Position
    In this tutorial, we set the featured image to be centred and right-aligned. However, you can experiment with different positions to see what works best for your content.
  • Play with Padding
    Adjusting the padding can significantly change the look and feel of your layout. Don’t be afraid to play around with these settings to create the perfect balance between your text and images.
  • Customize the Post Title
    The post title is one of the first things your readers see, so make it count. Experiment with different fonts, sizes, and colours to make your titles stand out.
  • Add More Elements
    The loop grid layout doesn’t have to be limited to a featured image and title. Consider adding other elements like post excerpts, author names, or publication dates to provide more information to your readers.
  • Change the Background Color
    We used white for the background colour in this tutorial, but feel free to choose a colour that matches your website’s theme or brand identity.

Remember, the goal is to create a layout that is not only visually appealing but also provides a great user experience. Don’t be afraid to experiment and make the layout your own.

Common Issues with the Elementor Loop Grid Layout

  1. Repeated Images
    While working on the template, you might notice that the images are repeating. However, this is not an issue as the images will reset themselves once you exit the template and go back to the main page.
  2. Text Wrapping
    If the text in your post titles is wrapped or not evenly distributed, you can adjust the height of the child container to accommodate longer titles.
  3. Linking Issues
    If clicking on the container does not take you to the post, ensure that you have set the container’s HTML tag to a link and selected “Post URL” from the dynamic tags.

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.
Create an Elementor Loop Grid Layout with Flexbox
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.