Advanced Blog Layouts With CSS Grid and Oxygen Builder Repeaters [V3.7 TUTORIAL]

hey guys this is james from isotropic and in this video i'm going to show you how you can utilize the new css grid feature with 3.7 which is currently in its alpha uh but the oxygen builder 3.7 version will be released as a release candidate sometime soon hopefully soon and with it comes a powerful edition of a native integration with css grid and css grid is a layout tool that we can use to make very advanced layouts very simply it is a distant cousin of flexbox but there are some primary differences between grid and flexbox i'll link you in the description below if you would like to learn more about the differences and the use cases for each of them but basically you can use css grid and repeaters to create advanced repeater layouts that will showcase your posts or your pages or your categories or anything that repeats in a very unique way and the pagnation will also work so in this video i'm going to recreate this section of the abcnews.go.com website so here if you think in your head look at this section and you can go on the website and find this section as well if you think in your head about how you would do this with a oxygen oxygen builder version 3.6 or lower this is actually a pretty complex layout to do without grid and the reason being is that i would want this to be a single repeater because it would be a single query and every time we change the page um this whole thing would repopulate with the next page's posts but i would be very hard-pressed to do this using just basic flexbox and what i mean by that is that if i were to do this right now with 3.6 without the grid this would be a single repeater this would be a single repeater with an offset of two this would be a single repeater with an offset of three uh or five actually and then this would be a single repeater with another offset attached to it and this would all be done with quest custom queries and the problem here is that these would all be separate repeaters and the pagnation would have to be hidden because it just wouldn't work uh on what i'm trying to do here so all of these would be individual repeaters it would be kind of difficult to set up it would be very complex a lot of moving parts and this is a complex layout but it's also a simple layout if you think about it so i'm going to show you now how you can use grid to create this same layout with a repeater using a single repeater and it's just a lot cleaner and a lot simpler than pretty much any other solution out there so uh first i generated like 50 posts using faker press this is great if you're just developing and messing around i'm on a page right now if this was a production site i would probably be using an archive layout or an archive template or a blog page blog home page template and then apply it to the specific pages but this is just a post in this example uh this is oxygen builder version 3.7 this theme is not native to the oxygen builder i'm using swiss knife pro to add this theme the only additional add-on that i'm using is um hydrogen pack which adds right-click like so so i'm going to add a section and then i'm going to add a singular repeater first thing when we're making this type of layout is to figure out how many blocks i want in that layout and by blocks i mean these cards so each individual postcard is just going to be a block um as you can see single block this block is 66 wide this block is 33 wide i want to figure out how many blocks i'm going to be using on the page so in this example i think it's going to be eight one two three four uh one two three four five six seven eight there we go i can count to eight so these are gonna be eight posts and with these eight posts the smallest post is going to be 33 percent wide so with this knowledge we have eight posts and we have three columns within this grid layout so first we're gonna set up our query in a production website i would use a manual query but for this i'm using a custom query the reason i would use a manual query is because i can have more control over the offset of the posts and stuff like that we're gonna set up eight posts per page and here you can see we got eight posts there you go um before i do anything i'm just gonna make a basic post layout card because i think this might be a little difficult for you to see on the page and i'm going to do that by adding a div within the div taking this div making it 100 wide um making it actually a link setting that link to be a permalink to the post itself so this is a post div then i'm going to go ahead and make yeah we'll make the link wrapper have a height of 300. there you go within the link wrapper we're going to throw in some text we're going to align the text to the left and to the bottom we're going to add some padding in there let's say 30 30 pixels looks good we're going to actually make this text which is already linked because it's contained in a link wrapper into the title so we don't need to check off link uh and then if i was really doing this i'd add a uh excerpt but right now the excerpts are like 400 words long so it becomes very annoying to use here so i'm just going to add in our title and set the title to be have a color of white then finally background of the link wrapper is going to be the featured image there you go uh set it to be black background and then add in the data for the featured image set it to cover image overlay color it's going to be 100 black and then set the black to be halfway opaque there we go all right so now it is time to set up our layout and i'm not sure why these images aren't loading but they should there we go oh the final thing i'm going to do is make our typography right align there we go okay so now we have postcards and in these postcards it would be cool if our background applied to them whatever in these postcards each of these cards equals a individual post and on the front end if you click on one of these postcards it will bring you just like your normal repeater will bring you to whatever post you can see you can see at the bottom of the page each perimeter link changes because it's a repeater to the posts now we want to make our advanced layout so we want the advanced layout to be like so 66 33 100 33 33 66 33 the way we're going to do that is by using grid and to do that we're going to go to the overarching repeater which wraps around all of the divs in it we're going to set the grid layout to be grid we're going to set the column count to be 3 because the smallest column here is 3 and we're also going to make our text to be 1.75 rem so this one fits in there and then we're going to start building our grid layout so our column count is three because the smallest column on this page is 33 wide so because we have three columns these break down into a single column being 33 percent wide then we're going to build the grid and notice i'm keeping the gap at 20 so this is the gap the maximum width is one frame the minimum width is 200. the rows are kept the same same with their gap um the thing about grid is that it won't automatically collapse like your columns will in oxygen builder so once you get down to a page size that's under 200 times three in this instance because the minimum width is 200 for each individual block it starts pushing off the page like this so this is 200 pixels wide plus 20 20 200 it pushes off the page so i'm going to show you kind of how to be responsive with this grid as well but in this example um we just have our grid set up three columns because that's the way it needs to be we're keeping everything else standard now we're going to work with the grid children and working with the grid children very simple very easy process go left to right top to bottom so starting from the left to the right going up and down so first column is going to be our first child is going to be 2 wide because 2 times 33 equals 66 this is 66 wide this is now 33 wide it defaults down to one frame or one child or one one child defaults down to one the width of one column um now we want this one to be 100 wide so it becomes three columns wide then we want this one we won 33 33 33 then we want here are 33s then we want a 66 and a 33. 66 becomes two columns you stay at 33. um and there you go that's our layout you might notice that there's just an extra one down here um i'm pretty sure that's a bug with 3.7 because it's in the alpha version so not something to worry about here it'll probably be fixed by the time the rc comes out again i'm filming on the alpha version so there are some bugs but they'll be ironed out by the time the release candidate version rolls around so now i'm going to save let's see if we can get our our images working come on interesting that our rgb oh because we have an extra zero there you go alright so now we have an overlay the reason i have the overlay over the featured image over the background color is that first if the image doesn't load the background color will so you'll still see the where the post should be the image overlay makes the image darker so the content on top of it can be read more easily um sometimes in oxygen the background images just don't update but in the front end they'll probably update so now here we go this is our layout we completely copied this layout right here with a single repeater and i'm now going to show you why this is a really good thing to be doing and why using grid in oxygen is just a nice turn of events a nice nice change of scenery if you will here's our old grid here's the new grid new grid here's an advanced layout using a single repeater using not even adding anything in here this is just your single div in the repeater and then it stretches out to to fit into the grid elements um but the main thing that i like about this is that you can have your layout and you can have as many repeaters as or as many individual post divs as you want and you can work down the page and you have a million of these cards and have them change throughout the entire page and then you can click on the next page we're on blog page number two this is the same repeaters before but it's populated with new posts and all of the posts update into the layout that we want them to update into as opposed to using one repeater here one repeater here one repeater here you can't do pagnation when you're using multiple repeaters and you can't build this layout with flexbox you need css grid so that addition to oxygen and this is what i'm trying to show you it's very powerful because now all you need is one repeater we have this is the simplest page structure you can build i mean a single section a single repeater a single div in that repeater and then just set up the grid to be how you want it to be a grid and there you go that's how it works uh pretty simple pretty straightforward stuff and then one other thing i'm probably gonna regret this because it's uh we have that little bug here but if i want to go ahead and do um really do 2d as i was mentioning flexbox is a good one direction so if you're going up or up and down or left and right flexbox vertical horizontal but if you're doing 2d and you want to really go 2d with css grid setting up a row span to be 2 and the column span to be 1 becomes even more interesting and complex so now we'll just make our link wrapper become 100 tall and then we'll set our div to be to have its height instead and now look at this and actually we can make this fit with the number that we have as well go back to repeater go back to grid layout go to the grid layout go to the final element make you a hundred percent by adding three column spans saved and now we have a true multi-dimensional layout this is truly two dimensions instead of one dimension you're not going left or right up or down you're going up and down and left and right all in one this spans two up this is you're 100 wide and this is now a true css grid layout using a single repeater still and the pagnation works perfectly so that's kind of the power of grid you can create very advanced layouts like this that were simply impossible in the past using repeaters and flexbox in oxygen builder you can make these type of layouts really easily and these type of websites used to be limited to corporations that had many thousands of dollars to spend on custom development and hard-coding grid and grid wasn't even around until i think 2016 maybe so before that who knows how they did this i don't even know but that's what you can do here you can do multi-dimensional just exclude this from your your eyesight you can go multi-dimensional multi-dimensional left right up down advanced grid layouts and then you can just continue it onwards so right now we set the count to be eight posts uh but if you want this to be a full page thing you can set it to be a full page thing and i'll show you that too while we're at it i'm gonna add an uh how many more posts would we need we need a we need one more post one one two three we need three more posts so i'll show you kind of just going off what we have already we're going to add in three additional posts so our account is going to come to 11 and then oh we have to apply and then we'll go back to our grid and we'll do a little more of that multi-dimensional type thing where we go to grid layout and now we're going to hit the bottom child we're going to make you span 2 and the row will also be two there you go so now this is an even bigger one just based on the grid so uh i know the video is already long and nobody's probably watching this section anyway but basically this is what you can do with a single grid a single repeater css grid and oxygen 3.7 it's something to be excited about it's really easy to use with this interface even if you're not familiar with grid and how it really works it's something that you'll be able to figure out and it's something that you'll be able to actually put to use in your own websites because these type of layouts are very popular these type of layouts are great for your users and the pagnation works with the single repeater because it's still a single repeater it's not multiple repeaters all grouped together now it's just a single css grid works really well just a great setup i'm very pleased that oxygen added this in 3.7 i can't wait until the release candidate comes out uh little dirty secret the isotropic blog is actually using css grid and 3.7 on the production site right now so you can see this is grid right here all of this is grid all of this is grid so it's just just something to take a look at if you want to see 3.7 in the wild the final thing that i wanted to mention and i didn't mention this before for responsiveness right now the minimum width is 200 pixels um wide so for an individual column this is an individual element in in a column there are three columns the individual element in the column is 200 percent wide at the minimum then we have a gap of 20 then we have another 200 then another 20 gap then another 200 so basically what we have is 640 pixels wide so if we make our screen size drop below 640 pixels wide nothing like it's falling off the page because this is still 200 pixels wide so there's no automatic collapse with css grid like the columns are in oxygen so when you're building things to be responsive this is just something to be mindful of and of course you can't you can't really this doesn't really make any sense because if i wanted to add more content here it just wouldn't fit into my individual block and the way i would go about addressing this is really three columns under when you're when you're on this type of screen size having anything over two columns becomes annoying uh and an easy way to make this responsive and something that really requires no effort at all is just dropping it back to flexbox removing the grid at this break point making it flex box making it vertical just setting it to be vertical super simple the only other thing you would need to do is go to the actual div and add the applicable sizing and then i'll show you on the front end it remains as your grid but once you get to that specific break point it just breaks down into the single the single column so that's just something to show you kind of that's how i would make it responsive just something to keep in mind that it won't automatically collapse down but as we expand it out there you go we're back to grid and then we break down to your single column so hopefully that video was uh helpful for you if you're going to be building advanced repeater layouts and blogs which i hope you are with oxygen um this is the way to do it i mean use grid use a single repeater do advanced layouts use these these grids in your other layouts as well not just repeaters but i think repeaters probably the best application of grid if you like this video if you found it helpful give it a thumbs up uh if you like the content on this video platform of mine give it a subscription because i publish a lot on oxygen and supporting me through those subscriptions helps me keep motivated to publish more hopefully this was a helpful video if you enjoyed it again give it a thumbs up check out the associated blog post article linked in the description below and i will see you in the next video

Channel: Isotropic Design

Views: 6,423

Keywords: WordPress, oxygen builder, oxygen builder tutorial, CSS grid, flexbox, flexbox versus CSS grid, oxygen builder repeaters, oxygen builder blog, oxygen, builder, website design, website development, WordPress oxygen builder, WordPress page builder, pagebuilder, Isotropic

Id: ZdT1kS8MR5s

Length: 20min 28sec (1228 seconds)

Published: Tue Jan 05 2021