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
🔗 daveden.co.uk/tutorials/build...
|| Recommended Videos
▶️ ACF Category Label in Loop Grid - • How to Use ACF TAXONOM...
▶️ Make Entire Loop Card Clickable - • 4 Ways to Make Your En...
▶️ Alternating Loop Template - • Alternating Posts usin...
Subscribe for more Elementor and Bricks tutorials:
www.youtube.com/@daveden2?sub...
|| 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
|| Recommended Resources:
🔗 Elementor Pro: daveden.co.uk/links/elementor...
🔗 Crocoblock: daveden.co.uk/links/crocoblock/
🔗 Dynamicooo: daveden.oc.uk/links/dynamicooo/
🔗 Bricksbuilder: bricksbuilder.io/
|| Let's Connect:
👉 Subscribe: / @daveden2
👉 Facebook: / daveden2
👉 Website: daveden.co.uk/
#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.

[@DaniTinez]

Very helpful, thanks Daveden!

[@DaniTinez]

Really helpful! Thank you Daveden!

[@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!

[@daveden2]

Thanks! I'll look into more design ideas

[@awakekat]

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

[@daveden2]

Thanks!! 🙌 I've been playing around with CSS Grid a lot recently

[@werasakkhemsuwan7159]

wow so cool i find like this so long time

[@daveden2]

I'm glad you found it useful

[@caknuckler]

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

[@daveden2]

You're welcome. Were you able to sort out the "orderby ACF event date"?

[@caknuckler]

I was not unfortunately @@daveden2

[@daveden2]

@caknuckler ah, I see. Could you be kind enough to email me the requirements ([e-mail]), and I'll look into it for you

[@multa7053]

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!

[@daveden2]

I love Elementor. It simplifies web design, and we're constantly learning. You're Julian, right? I'm glad I was able to help you out. I aim to create future tutorials with simpler solutions at a manageable pace, minimizing custom CSS to avoid overwhelming users.

[@multa7053]

@@daveden2 That's correct! Thanks a lot. If I get some ideas for tutorials then I'm going to message you as promised! Wish you a great day.

[@daveden2]

Here's the link to the article containing the Custom CSS - daveden.co.uk/tutorials/build-a-magazine-style-loop-grid-in-elementor/

[@grom6032]

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

[@daveden2]

Could you share a url to your page via email to info [at] daveden [dot] co [dot] uk. So that I can take a look properly.

[@grom6032]

@@daveden2 I just sent you an email

[@grom6032]

@@daveden2 all works fine a real pleasure to start my week with your help.

[@daveden2]

@@grom6032 awesome!!! I'm glad to hear that