September 21, 2023

Craft a Newspaper Loop Grid Design for Elementor

Play Video

Creating a Newspaper Loop Grid Design for your website can be a transformative experience. It not only adds a unique aesthetic but also enhances user engagement. With Elementor, achieving this design is easier than you might think. This guide will walk you through the process, step by step, to help you create a stunning Newspaper Loop Grid Design using Elementor.

Understand the Loop Grid Feature

Elementor‘s Loop Grid feature allows you to display your posts in a grid layout. This is particularly useful for creating magazine or newspaper-style layouts. The Loop Grid feature requires you to activate certain Elementor features like flexbox containers, Loop grid, and grid containers.

How to Activate Features

  1. Navigate to Elementor settings.
  2. Look for the features section.
  3. Activate flexbox containers, Loop grid, and grid containers.

Create a Basic Loop Grid

  1. Go to the page where you want to add the Loop Grid.
  2. Add a new Loop Grid element.
  3. Click on “Create Template.”
  4. Add the post title and post excerpt widgets to the template.

Note: At this point, you’ll have a basic Loop Grid with post titles and excerpts. You can customize it further to match your desired layout.

Create an Alternate Template

Creating an alternate template allows you to add variety to your Loop Grid. Here’s how to do it:

  1. Copy the container of your existing Loop Grid template.
  2. Click on “Apply an Alternate Template.”
  3. Paste the copied container into the new template.
  4. Add a featured image widget between the title and the excerpt.
  5. Style the image as needed.

Tip: Always check the mobile and tablet responsiveness of your alternate template.

Apply the Alternate Template

  1. Go back to your Loop Grid settings.
  2. Choose the alternate template you just created.
  3. Specify its position in the grid.

Note: You can set the alternate template to appear only once or at specific intervals in the grid.

Customize the Image Style

  1. Edit the alternate template.
  2. Go to the image widget’s style settings.
  3. Apply a CSS filter to saturate the image.
  4. Optionally, adjust the brightness.

Final Adjustments

  1. Go back to your Loop Grid settings.
  2. Apply a masonry effect to the grid.
  3. Adjust the number of posts and columns as needed.

Tip: You can also adjust the padding and margins to fine-tune your design.

Newspaper Loop Grid Design Conclusion

Creating a Newspaper Loop Grid Design with Elementor is a straightforward process if you follow these steps carefully. The alternate template feature allows you to add a unique touch to your grid, making it more engaging for your audience. Happy designing!

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.
Craft a Newspaper Loop Grid Design for Elementor
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.