Bento Loop Grid with CSS and ACF Overlay - Elementor Wordpress Tutorial

No video

Bento Loop Grid with CSS and ACF Overlay - Elementor Wordpress Tutorial

Рет қаралды 2,216

Күн бұрын

CSS Code:
selector .e-loop-item {
grid-column: span 1;
}
selector .e-loop-item:nth-of-type(6n-2) {
grid-column: span 2;
grid-row: span 2;
}
selector .e-loop-item:nth-of-type(6n-3) {
grid-column: span 2;
grid-row: span 2;
}
Elementor Hosting - managed wordpress hosting :
be.elementor.c...
Elementor Pro - The builder that will make you a pro
be.elementor.c...
Get our Awesome 'How to Build an Elementor Website Course' - Lifetime Updates and access to New Modules at no extra cost: learn.websquad...
Join our 'How to Start a Web Design Business' Course - and use strategies to grow, get clients, and generate recurring income: websquadron.co...
Book your 1-2-1 Consultation: websquadron.co...
We love to create - share - respond - and deliver.
🧐 Learn with our Mastery Modules: websquadron.co...
🔗 All of our Important Links: websquadron.co...
😃 Join our Facebook Group: / 3309523509284305
😃 Get Code Snippets Pro: r.freemius.com...
😃 Get Elementor Pro: be.elementor.c...
😃 Boost your KZfaq Analysis: www.tubebuddy....
👕 Get our Merchandise: websquadron.co...
🥹 Support us: paypal.me/Webs...
Hire us to work on your Website!
💌 info@websquadron.co.uk
👩‍💻 Visit websquadron.co.uk

Пікірлер: 12

@bamwinejeremiah7396 5 ай бұрын

I like this, every tutorial is so practical and thoughtful. ☺️

@websquadron 5 ай бұрын

Thank you! 😊

@ElementoryMyDearWatson 5 ай бұрын

Very cool Imran. This is the code for tablet and mobile (will appear as 2 columns on tablet and 1 column on mobile) @media (max-width: 1024px) { selector .e-loop-item { grid-column: span 1; } selector .e-loop-item:nth-of-type(6n-2) { grid-column: span 1; grid-row: span 1; } selector .e-loop-item:nth-of-type(6n-3) { grid-column: span 1; grid-row: span 1; }

@websquadron 5 ай бұрын

Exactly :)

@user-xc6ct8cz4z 5 ай бұрын

Thanks for the lesson 🔥

@websquadron 5 ай бұрын

No problem 👍

@DigitalrealtyApartment 5 ай бұрын

Great, but I will use offset (like you did in the previous bricks tutorial) if I have to make the bento like this

@websquadron 5 ай бұрын

That’s fine too

@dreamdisplaymedia759 5 ай бұрын

Hey Imran👋, great tutorial! I created similar grid for displaying loop for blog posts with post date and post title. By I have realized sometimes if the post title happens to be long, it deforms the grid. If you know a hack to prevent that issue, please make a tutorial on that🙏👍

@websquadron 5 ай бұрын

You could either set the Template to be a minimum height, or reduce the length of a title with some code: kzfaq.info/get/bejne/bqlnqc-D2tPMf6s.htmlfeature=shared