The Developer of Recoda for Oxygen Builder Built this Webflow style Grid Builder for Oxygen and posted a video 6 days ago. It is on the Recoda RUclips Channel, titled: "Creating grid layouts in WordPress has never been easier?" There, Renato Ćorluka builds common grids, and covers an example that includes Overlapping. Nice to see this feature offered in Bricks through Advanced Themer. I suspect that these Grid Builders may become integrated natively at some point. I like how the Grid Builder can co-exist without affecting the current workflow where we insert Grid Values into fields, including variables. If you want an advanced Grid, just turn it on with a button and drag away. This is super cool.
If you ask me, what is the best modern WP builder. Bricks or BreakDance. I'd say its Bricks. Having pretty much the same potential as BD it has a much more powerful ecosystem.
I was wonderin until the end did they add an overlap feature.. and they did! Thats amazing! So it creates areas, prolly. Wanna test it as soon as possible. It gives a designers a real boost designin modern grids layouts 🎉🎉🎉
Using overlap in CSS grid layouts is incredibly powerful, allowing for more than just arranging cards. Think of it as akin to working with layers in Figma or Photoshop. With this approach, elements can overlay each other, especially in grids with numerous rows and columns. This capability facilitates partial overlays, unlocking the potential for creating more visually compelling and intricate designs. It's a game-changer for web layout design, offering a level of flexibility and creativity similar to graphic design tools.
@@WPTuts Totally, this is all about getting away from the usual boxy layout thing. Take a simple example: you've got a featured image in your grid that's half the width but stretches all the way up and down. Then, let's say you throw a headline and some text on top, starting at the quarter mark and stretching right across the image to the edge. You can even play around with where to put the text to make it pop. And that's just the start. You could use this to add cool rounded corners, big bold text, or other funky design bits without messing around with absolute positioning. It's like giving your web layout a whole new playground.
This is amazing! Maxime is so talented and release after release he is spinning up Bricks!! 🤯 This one is great! Wonder why Bricks hasn't add Maxime to the team yet... 😮 All that he has done with AT would really be great native features!
A part of me misses the good old days of creating layouts with nested tables in Dreamweaver (seems like a lifetime ago now!), but the simplicity, flexibility and potential are mindblowing with the Advanced Themer extension for Bricks. Looking to see what else we can do with it. #Bravo
can you name each individual grid giving them there own unique name different class? therefore, you can copy and past the same individual grid somewhere else typing the class therefore you can just look the class up and changed the content or the grid such as the colour of the grid for a client if they changed there mind but you need do all across the website at the same time?
In some cases, you want to have overlapping grid cells. For example, you have a person without background you want to have stick out, and you have content where it glitches out from. Then you can put the text in the box below and the person in the overlapping one.
How does this work with a query look? Don't you have to run the query loop at the block level? If you are having to define the size of the blocks at the block level I am not sure how you could handle this.
@wptuts One purpose for overlapping grid cells / items, isn't so much the 'cells' overlapping, but so the html / content INSIDE the cell can overlap the html / content of another cell (visually). For example, in a 3x3 grid, you could make the first row span all 3 columns. That top row could have big bold Magazine Title Text, spanning left to right (all 3 columns) with a 30% transparent background color. Now rows 2 & 3 with col 1 & 2 Being paragraph text about a subject Now column 3 can be an image fitting the whole column. This gives you a "Magazine layout".. and because row 1 spans all the columns and higher z-index on columns 3, the html Big Text and semi transparent background now sits on top of the top of the full image that is in column 3. So basically, visualize just about any Magazine Cover.. many times you have the Magazine Name at the top ( top row and 3 column span) and under that, text about the magazine on the left with a big image on the right (column 3).. That top row's Magazine Title will be OVER (higher z-index) that big Image on the right (visually). . thus the reason for the use of overlapping cells / items.
Dang I have FOMO! Was on the edge for getting AT's Black Friday deal, and just thought i'd cool off the wallet a bit - if it was LTD I would have gotten it. Ah well, amazing update and really looking forward to how it develops.
So where do I set AT so that I can see the new grid option. I followed your exmaple with container and blocks. Container to show grid but I do not see the new option along the display. what am I doing wrong?
Im guessing elementor will need to have their version of this...as mentioned by others, just like the old days where you drew your layout in Dreamweaver...
I'm sure at some point Elementor will implement something similar. Fortunately, unlike the old days with Dreamweaver, we now have full flexibility and resposiveness with minimal effort. ;)
It is not my first rodeo with WP or page builders but when I had to watch a video to figure out how to set up a navigation I instantly knew Bricks wasn't for me. It is not intuitive, it is a fact. They will be great in the future, not now.
I can only be biased if I choose to ignore tools - I'm not a Cwicly user, so don't cover each of their releases. They already do a great job of covering the new features, and I don't think I could add anything of value to that existing content. No bias, I just use Bricks and AT and am more familiar with it.
While the visual part of dragging boxes is not in Bricks, you can do this exact thing in Bricks itself. If you look closely at Paul's demo, you can see the Bricks values for grid template columns and rows (on the top container) updating, as well as the grid-item grid column and grid row updating to match what Paul is doing visually. So the functionality is there already
With all these extensions and other plugins, wordpress becomes more expensive than other solutions like Webflow. Which makes me wonder, why even use wordpress.
Maxime is an absolute animal. He is lightning speed and creative. A breath of fresh air!
Yes he is
The Developer of Recoda for Oxygen Builder Built this Webflow style Grid Builder for Oxygen and posted a video 6 days ago. It is on the Recoda RUclips Channel, titled: "Creating grid layouts in WordPress has never been easier?" There, Renato Ćorluka builds common grids, and covers an example that includes Overlapping. Nice to see this feature offered in Bricks through Advanced Themer. I suspect that these Grid Builders may become integrated natively at some point. I like how the Grid Builder can co-exist without affecting the current workflow where we insert Grid Values into fields, including variables. If you want an advanced Grid, just turn it on with a button and drag away. This is super cool.
Glad to see overlapping offered. Imagine a simple example of two image cells being overlapped by a full width hero text cell.
Great job on how fast you came up with the video!
I don't want to give him in any ideas - but this is worth a plugin on it's own. Really looking forward to this.
If you ask me, what is the best modern WP builder. Bricks or BreakDance. I'd say its Bricks. Having pretty much the same potential as BD it has a much more powerful ecosystem.
I was wonderin until the end did they add an overlap feature.. and they did! Thats amazing! So it creates areas, prolly. Wanna test it as soon as possible. It gives a designers a real boost designin modern grids layouts 🎉🎉🎉
Using overlap in CSS grid layouts is incredibly powerful, allowing for more than just arranging cards. Think of it as akin to working with layers in Figma or Photoshop. With this approach, elements can overlay each other, especially in grids with numerous rows and columns. This capability facilitates partial overlays, unlocking the potential for creating more visually compelling and intricate designs. It's a game-changer for web layout design, offering a level of flexibility and creativity similar to graphic design tools.
I’ll have to look into some designs using the overlapping technique to get a feel for its potential. 😁👍
@@WPTuts Totally, this is all about getting away from the usual boxy layout thing. Take a simple example: you've got a featured image in your grid that's half the width but stretches all the way up and down. Then, let's say you throw a headline and some text on top, starting at the quarter mark and stretching right across the image to the edge. You can even play around with where to put the text to make it pop. And that's just the start. You could use this to add cool rounded corners, big bold text, or other funky design bits without messing around with absolute positioning. It's like giving your web layout a whole new playground.
This is amazing! Maxime is so talented and release after release he is spinning up Bricks!! 🤯 This one is great! Wonder why Bricks hasn't add Maxime to the team yet... 😮 All that he has done with AT would really be great native features!
A part of me misses the good old days of creating layouts with nested tables in Dreamweaver (seems like a lifetime ago now!), but the simplicity, flexibility and potential are mindblowing with the Advanced Themer extension for Bricks. Looking to see what else we can do with it. #Bravo
Same feeling, I even started with Microsoft Frontpage, then moved to Dreamweaver 😂
Advanced Themer is one of the best plugins I bought🎉
How can you miss that! 🤣
@@BneiAnusim everything seemed so straightforward then. Not necessarily better. I used to build my own CMS too #GoodOldDays.
This add on to Bricks become's a must have to any webmaster as i am...
can you name each individual grid giving them there own unique name different class? therefore, you can copy and past the same individual grid somewhere else typing the class therefore you can just look the class up and changed the content or the grid such as the colour of the grid for a client if they changed there mind but you need do all across the website at the same time?
Looks very interesting, going to watch it NOW :)
In some cases, you want to have overlapping grid cells. For example, you have a person without background you want to have stick out, and you have content where it glitches out from. Then you can put the text in the box below and the person in the overlapping one.
How does this work with a query look? Don't you have to run the query loop at the block level? If you are having to define the size of the blocks at the block level I am not sure how you could handle this.
@wptuts One purpose for overlapping grid cells / items, isn't so much the 'cells' overlapping, but so the html / content INSIDE the cell can overlap the html / content of another cell (visually).
For example, in a 3x3 grid, you could make the first row span all 3 columns.
That top row could have big bold Magazine Title Text, spanning left to right (all 3 columns) with a 30% transparent background color.
Now rows 2 & 3 with col 1 & 2 Being paragraph text about a subject
Now column 3 can be an image fitting the whole column.
This gives you a "Magazine layout".. and because row 1 spans all the columns and higher z-index on columns 3, the html Big Text and semi transparent background now sits on top of the top of the full image that is in column 3.
So basically, visualize just about any Magazine Cover.. many times you have the Magazine Name at the top ( top row and 3 column span)
and under that, text about the magazine on the left with a big image on the right (column 3).. That top row's Magazine Title will be OVER (higher z-index) that big Image on the right (visually). .
thus the reason for the use of overlapping cells / items.
A very good point. :)
Love the review…
Does this work with Automatic CSS and Frames?
Dang I have FOMO! Was on the edge for getting AT's Black Friday deal, and just thought i'd cool off the wallet a bit - if it was LTD I would have gotten it. Ah well, amazing update and really looking forward to how it develops.
Nice use of MoType plugin for FCP :)
Overlap for design elements, several images, mask, maybe?
This looks extremely promising...
would like to see how this layout would translate in mobile view.
thanks Paul.
You can create different layouts for each breakpoint. So, getting it to scale on mobile shouldn’t be an issue. 👍
Responsive not working for me. The media queries are not exporting in the css somehow. I have to look into it…
So where do I set AT so that I can see the new grid option. I followed your exmaple with container and blocks. Container to show grid but I do not see the new option along the display. what am I doing wrong?
It’s only available in the 2.3-alpha release atm. You’ll have to manually download the zip file from your account page.
@@maximebeguin4346 Thank you for quik reply. Now time to play and learn.
sir is it similar to cwickly builder grid system.
It' similar to several CSS Grid visual builders (no need to reinvent the wheel), but it's great that it's going to available to Brick users.
1:21 → A small tip: px is the default unit in Bricks. So you could simply write 30.
Can you apply a query to this as well
I don’t believe so at this stage.
thank you @@WPTuts
@@morozara4962yes, Maxime just added query loop today!
Im guessing elementor will need to have their version of this...as mentioned by others, just like the old days where you drew your layout in Dreamweaver...
I'm sure at some point Elementor will implement something similar.
Fortunately, unlike the old days with Dreamweaver, we now have full flexibility and resposiveness with minimal effort. ;)
It is not my first rodeo with WP or page builders but when I had to watch a video to figure out how to set up a navigation I instantly knew Bricks wasn't for me. It is not intuitive, it is a fact. They will be great in the future, not now.
A simple nav menu with links or a mega menu?
If this is released its an autobuy for me.
I believe it goes into beta next week and I would say it will be released soon after.
funny cwicly has the BEST grid builder but no mention? why so biased paul?
I can only be biased if I choose to ignore tools - I'm not a Cwicly user, so don't cover each of their releases. They already do a great job of covering the new features, and I don't think I could add anything of value to that existing content.
No bias, I just use Bricks and AT and am more familiar with it.
this should be bricks default feature.
While the visual part of dragging boxes is not in Bricks, you can do this exact thing in Bricks itself. If you look closely at Paul's demo, you can see the Bricks values for grid template columns and rows (on the top container) updating, as well as the grid-item grid column and grid row updating to match what Paul is doing visually. So the functionality is there already
@@mayanikolova8353 thanks
With all these extensions and other plugins, wordpress becomes more expensive than other solutions like Webflow. Which makes me wonder, why even use wordpress.
Ther era no obligation to use any additional tools or plugins. If you want to keep costs to a minimum there are thousands of options
use the "Core Framework" or "Advanced Themer for Bricks" or both together?