Hey this is elijah with the oxygen team and in this video we're, going to take a look at what's new in oxygen 3.7. Oxygen 3.7 introduces a new css grid, feature that allows you to use css grid to lay out easy posts, repeaters galleries and sections and divs.
We've, also introduced a new paid add-on called composite elements and we'll. Take a look at that in a minute, but first let's. Take a look at the css grid integration. So if we scroll down here in the builder, i have an easy post element which is using one of our grid, presets to show a newspaper style layout.
So if we click the easy post element and go over to the properties pane, we have this new grid layout tab here. So we're, going to click that, and here we have all of our grid options, including our child span, override control, which allows you to visually layout elements on the grid, and i'll dive into that a little bit deeper here.
In a minute, but first let's, go back and take a look at some of these other presets. We have several grid presets available. I like the newspaper one, which is the one we have here, probably the most because it's.
Really a unique layout compared to what you could previously achieve with just flexbox. We also have glossy and then another favorite is this masonry layout, which just looks really nice when you have some nice featured images as the background image there, so using easy post and getting a nice grid layout is now super easy.
You don't even have to manipulate the css grid options, but they're available there if you want to so let's scroll on down and look at a gallery. So here i have a gallery that i've, set up with a grid layout.
That lets me achieve a unique layout that wouldn ' T have been possible before, and this will give the gallery a bit more flexibility, especially when it comes to setting things up responsively now, to show you how our grid controls work.
Let's, go ahead and take this div, which has just some other divs with an icon in them, and we're going to set up a grid for this div. So in the properties pane under the layout options, you'll, see vertical horizontal and the new grid option.
So let's check that and now this is using css grid to layout the child elements. If we're, not too picky about the way the grid is laid out, and we don't want to like manually size, the child elements, we can use autofit columns, which is really cool for uh responsiveness, because it'S going to use your min width basically to decide how many columns there are, and we can step this up to where we have.
You know a four or five column layout and then what happens is as we collapse our viewport down the grid actually collapses intelligently and moves things to the next row when needed. So that's, a pretty quick and easy way to set up a basic grid that's very, very responsive.
Now, if we want to set things up a little bit more manually, we can go over here and define how many columns we have and note. If you have a bunch of columns, you're going to want to reduce this minimum width.
So i usually set it to something like 10. If i'm using, you know 7 to 12 columns or something like that, and then you can kind of adjust it up and down and get the number of columns you want. I'm gonna.
Do something real, quick and go ahead and just center those icons in there and then uh. We go back to our grid controls, and here we have the ability to control the minimum width and maximum width, which normally you won't need to manipulate those, though the defaults typically will be okay, unless you need to reduce that minimum width for Layouts with more columns, then we have the column gap, so we can reduce the gap between columns, so we'll, set it to 10 or something like that we can adjust.
The horizontal item. Alignment within each column, typically stretch is going to be what you want and then on rows. We have auto and explicit. Now explicit is really handy. If you know exactly how many rows you want and how big you want them to be, but a lot of times you're, not going to know, especially when working with dynamic content.
How many rows you need so auto is probably going to be your go to here. So we're, going to do auto, match height of tallest child just make sure all of the rows have the same height, and then we can adjust the row gap here, set that to 10 as well, and then we also have vertical item alignment Which will have more of an impact if we have different row heights so for now let's scroll down and take a look at the child span controls.
So this is where you get into laying your grid out. We can set a default column span and row span here. So if you want all of your child elements to span two columns, you could just put that in here and then you still have six columns, but each child element is spanning two.
This can be nice for cases where you know you want most of your child elements to span two columns, but some of them will span more or less, but for now let's, go ahead and just lay this out a little more custom.
So we're gonna go over here to the child span override section, and what we have here is a visual representation of each of the children in the grid and when we select one we can define its column span and row span.
So in this case, i want the first element to span two columns and two rows. I want the second element to span two columns. I want the third element to span two columns and two rows, and then i want this element to span two columns and you can see kind of what we're doing here.
So we're visually, manipulating the grid, and this allows us to achieve some really really cool layouts. That previously would not have been possible with flexbox, so that's, a look at css grid and all of the possibilities it unlocks, and it truly is a powerhouse for achieving really unique layouts.
Now the next new thing in oxygen 3.7 is not a core feature: it's, actually a paid add-on called composite elements. This is a collection of new elements in oxygen that are available. If you have a composite element's license or if you owned an agency equivalent license prior to february 12 2021, and you '
Ll find these new elements in the add pane and they're denoted by the little oxygen symbol up at the top left. Now composite elements are different than any element. We've ever added to the builder because they are comprised of individual oxygen building blocks.
So let me just add a new section down here and we ' Ll drop some composite elements in here and take a look. Let's, go ahead and change the height to 100 vh so that we have some room to work and now let's, add a composite.
So, for example, we might want a drop down button. This is just a simple button that expands when you click it to show some other links now note that, as i hover over each of these, they highlight as if i built this myself in oxygen.
Each individual element within this composite is a true oxygen element, so we can drill down and select or replace the text element link wrappers the wrapper itself. It's, driven by a code block, which means all the code is visible to you, and you can actually change it and modify it to your needs.
So because of the way these are built, they're, much much more flexible than a typical element that is added to the builder, either by us or by a third party. So let's, jump down and add another one of these.
Like a horizontal, divider, really simple, but it might take a few minutes to build this yourself at least the first time for a site build. So instead you can just click once and add a horizontal divider.
The styles are pretty unopinionated. We use lots of grays so that you can replace them in the global style. So we go to manage settings global styles, colors and you'll, find a composite elements color set in here, and you can go ahead and adjust all these grays that we use and, for instance, with this horizontal divider.
If we want to go ahead and just change this icon, we just click it because it's, just an icon element. Now we have quite a few elements 16 plus at launch, and some of them are not just simple convenience items, some of them actually pack a lot of power like the dynamic slider, which is something that oxygen previously hasn't been able to do With its built-in slider element, but now with composite elements, you can insert a dynamic slider with one click and because everything is an individual oxygen element, you can insert your own dynamic data elements within the slider to achieve your own layout.
Now this slider is driven by some code, which is in a code block here, and you can again manipulate the javascript that drives it all that you want and it's using the swiper.js slider. So if you're familiar with that, you'll, be really comfortable, jumping in there and making modifications.
But if we drill down into the slider container, you'll find a repeater, and that is where we can set our query on which posts we want to fetch and all those configuration options that you normally would have with a repeater.
But it drives the slider in this case and gives us our posts which we cycle through. So let's, just save that and jump to the front end and we'll scroll down through our grids, and you can see here that we can now click through a selection of posts which are returned by the repeater and then Rendered by our special composite element now, like i mentioned the composite elements, library is a separate purchase unless you own an oxygen agency equivalent license prior to february 12.
2021.. Now, if you didn't automatically get composite elements for free. It is 29 a year for full access to all composite elements that we have now and any that we add in the future to get composite elements simply go out to oxygenbuilder.
com pricing and scroll on down past the normal pricing packages. And here you'll, see a purchase, link plus a link to the composite elements, tour page, which will explain a little bit more about what composite elements is and why you might want it.
Besides these new features, we also fixed quite a few bugs, so we continue to push towards more stability and making oxygen more rock solid. With every release, you can find a full change log for oxygen 3.
7 on our blog. Thank you very much for watching
