One Loop Grid Bento Style Web Design for Posts or Products - Elementor Wordpress Tutorial

Elementor Hosting - managed wordpress hosting :

Elementor Pro - The builder that will make you a pro

We love to create - share - respond - and deliver.

Hire us to work on your Website!

[websquadron]

selector.e-loop-item {
grid-column: span 1;
}

grid-row: span 1;
{
grid-column: span 2;
grid-row: span 3;
}

{
grid-column: span 1;
grid-row: span 2;
}

{
grid-column: span 2;
grid-row: span 1;
}

[KieranMcCarthy]

Thanks, excellent tutorial. Here's the code:

selector.e-loop-item {
grid-column: span 1;
}

grid-row: span 1;
{
grid-column: span 2;
grid-row: span 3;
}

{
grid-column: span 1;
grid-row: span 2;
}

{
grid-column: span 2;
grid-row: span 1;
}

[LordJHouse]

Thanks so much for covering the Bento layout in detail for blog posts. Much appreciated!

[dots]

Thanks for taking time to break this down. Will definitely be using this on projects.

[OlaAdeposi]

Thanks very much but please I can't find the code in the video description

[nikasiradze]

how you did such a responsive loop item? what was width and height of the container?

[SamsonAdeyemi]

was wondering if we can bring this to bricks..it will be nice....lovely

[ri-lhzi]

code isn't in the description. love these vids by the way. I've using them with the flip box widget

[wehavewebsite]

users/ authors loop grid ...acf pls...

[moime]

Looks like it does not work and if check the code in the video is is different then pinned. Done now 4 times :)