Magazine-style Loop Layout in Elementor | Loop Grid

In this video, learn how to use an alternate template and custom CSS in Elementor's Loop Grid, to create a magazine-style layout.

|| Custom Snippet

|| Recommended Videos

Subscribe for more Elementor and Bricks tutorials:

► Connect with me: ◄

► Recommended Tools (Affiliate Links - Support the Channel!) ◄

|| TIMESTAMP
0:00 Intro
0:49 Adding demo posts and categories
1:02 Plugins required
1:25 Adding dynamic background colour to category
2:02 Activate the Flexbox and Grid Container feature
2:30 First Method: Using two separate loops
3:54 Creating the first loop template
18:44 Creating the second loop template
23: 59 Second Method: Using only one loop grid with an alternate template
2625 Conclusion

#elementor #loopgrid #elementorpro

|| Disclaimer:
Links included in this description might be affiliate links. If you purchase a product or service with my links, I may receive a small commission. There is no additional charge to you! Thank you for supporting me so I can continue providing free content each week!

|| Soundtrack
🎵 Life is a Dream- Michael Ramir C.

[awakekat]

Very nice video!! Love the overrides you added. 😎 Nice! 👍

[lungdoctortn]

I very much enjoyed your tutorial on grid / flexbox templated system for post articles. This information is very difficult to find as so many just use the post grid supplied as a default by Elementor which is very limiting. Please, please do more of these as this information is very interesting and needed to make more diverse presentations of blog articles. Thanks Again!

[caknuckler]

This was great. Very useful. Thanks. Also thanks for your comment on a recent websquadron live stream

[multa]

Nice tutorial! I love that you're showing two methods. I'd personally go with the first method because it's much easier. I started with Elementor and website building in general a months ago and the learning curve is nice to see. In the beginning, you don't understand flexboxes. You get used to them. Then you slowly start using custom CSS because a lot of times it's quite easy to modify spacing, colours, hover effects with CSS when specific widgets don't offer them as styling options.

That's where I'm currently at I'd say. I love flexboxes and I fully understand them and I try to use as less containers as possible by assigning widgets custom width etc. for speed reasons. I got used to CSS but not yet to the grid stuff CSS etc. that you were using in the 2nd method.

Last time I also used a loop grid instead of a posts widget because of the flexibility it gives you and I re-built my previous blog page. It was easier and faster done than I thought.

And thank you for helping me out last time via mail. Maybe you still remember helping out someone with the typing effect. That was me! I learned a lot of it!

[werasakkhemsuwan]

wow so cool
i find like this so long time

[grom]

hello there nice tuto but I have a problem with the css selector :is(.elementor-loop-container, .e-loop-item, .e-parent){
height: 100%;
} nothing happens and i repeat maybe 20 times the steps and nothing happens any ways to get fix on this