Oxygen 3.7 Review | What is new! (CSS Grid and Composite Elements)

in this video we're going to review the new features of the oxygen 3.7 alpha one hi my name is stratos and i'm constantly producing video tutorials about wordpress please subscribe to my channel for more videos like this so oxygen released yesterday the version 3.7 alpha one and with that some new features one of those is the css grid css grid is a layout and it's a two-dimensional layout so you can create something and play with the columns and with the rows in one single element so we were going to see some examples let's go first and here we have a portfolio and as you can see here you can create something like that using the css grid of course this can also be created using the mansory layout but if you're going to select the css grid you can choose yourself how many rows and how many columns you want for each photograph to take the space to occupy and if we go to a new smart theme and this is something very common in the news themes for wordpress you will see that this section has five posts for the from the same category and this can be done using the css grid also here we have some more posts these are six posts and it's using also something that you can create with a css grid and of course something like this also i'm going to close all of those and let's go to our page let's save that and start inside the section i'm going first to add some icon box and i'm going to duplicate that sometimes and now i'm going to click in the elements and i'm going to select the grid now when you select the grid you have some features here that we're going to see one by one but you have to know that i'm using here a static element and this is the icon box of course you can create something like like that with the grid but you can also create the layout that i'm going to create with columns and divs the grid is very easy to use and you can create faster than you could using the columns and the divs but it's better when you see it working with the dynamic elements like the easy post and the repeater which we're going to see later so let's go and first we're going to select the columns so here we're going to select three of course we have a number and a slider here and now as you can see all of those uh grabbed three columns and starting one by one and occupy the space that they need here we can select the minimum width of the column so we have 200 pixels and then we have the max width which is the whole row this one fr this fr unit is for the css grid and this means that it will take the whole row if it needs so it will occupy the three columns here next we have the gap for the columns and then we have the rows in the rows we have the author or the x split explicit and this means that if you choose explicit you will select your own rows and it will continue and have those rows no matter how many columns you select but if you leave it auto and select here to have five columns then you can see that we have three rows and if i select three columns i will have four rows so it will automatically create or remove some rows depending on the columns that you have and of course the elements the child elements that are inside here after that we have the gap for the rows and then we have the grid children elements that you can select see here and by clicking any of those i can select how many space i will want those child elements to occupy and let's see what we can do if i select here the first one and i'm going just to give it a red color to be more easy to see so let's go into the background and i'm going for the background color of red let's go back to the elements and let's go and click the first one now we have some column span and row span this will take some numbers now of course if i'm using one nothing will happen and this means that it will take one column and one row this of course depends on how many uh selection that you have here so how many columns and how many rows if we select here two this means that it will take two columns the it will occupy the space of two columns and one row if i had here four columns instead of three it will take fifty percent of the whole layout and not 60 c 66 as it is at this moment this particular example so here i'm going to select also three rows and it will take the whole space and as you can see it's grabbing the space of three rows and two columns this is only thing that is maybe difficult for some persons that haven't used a grid or something like that and it's the first time that they've seen it's very easy to understand i don't think it's something it's difficult and if i'm going to select here the shed grid children it will all go back as it were before so this is all that you need to know and you can start playing with that so we're going here and we're going to select three so we have one whole row for this element and then we can go and select the second one which will grab sorry not from that the second one is here and by selecting here i'm going to have it uh to go and two rows and here i'm going for sorry again my mistake here let's go for this one and it will grab two columns so we can create something like that if i had some backgrounds you would see how they looked but i think it's easy to understand now also we have the mobile version so if we're going to select uh for the less than 992 we can select another template another layout and it will grab this layout only for the uh only for the pixels that we have selected only for that view and if we go back to the pc for all devices we will see that it has the view that we have selected there so this is something really good let's go into the elements and let's go into the grid and i'm going here to select just to reset so i will have the standard version of three columns here okay let's go and see if it's going to happen no it's not not going to happen so let's go back and here and let's go one and one and then here one and one and here one and one and now i think i'm okay now this should work this is a bug clearly and i'll have to write it down just to tell oxygen what are all the bugs that i have found now probably the reset grid children or this view will just go back to how it was with the pc so it's not really back it's how they planned it to be so as you can see now let's go and select here one and one and here again one and one and here again one and one and if we go and click the reset and click ok we'll have now as it was for the pc so this is how they decided i think it's best if they have something to go and select everywhere one and know how you don't have to go one by one in the mobile and the tablet version and if we go and select something different for the other views for the other width you will have that exactly view and that exactly settings which is great so let's get rid of that again and we're going also to add a new section and we're going to add the easy post element now i'm using the easy post element because they have already created some presets for the grid layout so i'm going for the query i'm going to put here custom and post types i'm going to select to be posts apply and now i have some post elements as you can see i have about 10 posts and now we're going back and as you can see we have here the grid layout and inside here i'm going to select grid now i'm going to select three columns or four columns and how many you want and you can start playing with all the settings again now here if we go back for the easy post you can see that we have also some presets and we're going to select a preset to see here is a grid grid css grid glossy so let's select that and as you can see this is how they have created and let's go to another one let's go for a monsoory for a css grid and this is how we have the layout so as you can see it's very nice it's something very unique and you can create different layouts using the css grid now uh something that i would like to say is when you're using the repeater element let's go and use the repeater elements set ins instead of the easy post so let's go for the repeater and inside the repeater i'm going to create something for the posts so let's go here let's open the div inside the div and i'm going to select here to have an image first so let's go for an image and let's go and select data and featured image for the image let's go for a medium large insert and after that i'm going for the title so let's go to wordpress dynamic data and a title and after that we're going for a button and the button will be here button and after that in the button i'm going to select that and i'm going to have it to be the permalink okay so back to our repeater i'm going to select the query to be custom and of course to be the posts okay apply and now let's going to save so we have created something that uses the featured image after that the title and after that the button if i go into the div and select all of those to be centered so we have something like that and then i can go to the grid and select to have three columns again let's save that and that was not inside the repeater so i don't want here to be to have the grid i want here to have those vertical but inside the repeater i want to go into the grid layout and i'm going to select grid and three columns so now i have the grid that i want now keep in mind that if you select images right here then you will have to go and select to be 100 width and 100 percent height every time if you don't you will have something like space because it will not go beneath the aspect ratio of the image so let's see how it looks and let's go here and put here two so it will grab all the available space and here if we go to the second one and you select here to have two rows two rows you will see that it will not go beneath this even though it should take all the available space here it will not go beneath here and this is because the image will not go after the aspect radio now of course this is something that it has to be done because if i go into the image and select for let's go to a primer here and if i select here 100 pixels 100 and height 100 it will be an awful image you will see that this is not something that is quite right something is wrong with that so uh if you want to select something like that with images it's better to create a div here and have the images to be as a background so i'm going to add here a div let's add a div okay i'm going to remove the image and i'm going to select the div also remember that div doesn't have any height or width it's empty so i'm going to select inside the advanced i'm going for the background i'm going to select the image to be of course the featured image this size should be medium large insert and then i'm going for no repeat i'm going to select cover so it will always have the correct aspect ratio of the image it will not fail for the aspect radio let's go for 50 here in the left let's go for 50 on the top and now let's go back and i have to go and give some space to the div so i'm going for the width 100 the the space of the width and let's go for height 100 of height okay so now i can go into my repeater element and i can select something to play with so let's go and let's put here four and basically it grabbed that and as you can see it expanded way bigger that what i would like but uh it doesn't change the aspect ratio of the image of course i have to go into the div and select here to have some more space inside here or i can select this div and give it some static height so i can go here and select size and spacing and let's go for 300 pixels in height so i have always something nice let's go for 400 to be a little bit better 400 400 pixels so as you can see here is the height and as you can see this will have the same aspect ratio now it's not the perfect example but you can see that doesn't uh destroys our images and this is how you can use the repeater element and this is how you can use posts but because if you are going to use images it will not go well if you are used starting images or something like that okay so the next thing that we're going to talk about is the composite elements library so basically oxygen team creates some elements that are ready for us to use there are elements that are created for the elements that we already have so they grabbed divs they grabbed code elements they grabbed images icons text and everything else that they already have they added css they added javascript they added html code and they created something for us to be ready to add in our pages so it's not something that it's created from the beginning it's something that they have already created in some of those videos and we're going to see one of those and they are they have created those elements to be ready for us to use so you don't have to see how it's done and recreate it from the start which is great now if you are going to read all of those that they say here uh you will see that the code the composite elements library will be available for everyone in the alpha phase so once we are beneath the alpha phase and of course the beta phase and we reach the released candidate then the composite elements will be no longer available except if you have already the agency license so if you have the agency license you can use that and of course in the final release the 3.7 version you will be able to use those elements if you don't have the agency license until the final version of the 3.7 is released then no matter if you buy it after that you will not get this composite elements you will have to buy it separately so as you can see here the composite lms library will be a separate percentage for all new customers for if if you are going to buy oxygen after the final version of the 3.7 if you're going to buy the agency you will not have included the composite elements so if you're going to buy oxygen please do it right now or else before the final version of course of the 3.7 now uh in my opinion i don't know if i'm correct or not let's see the get now prices when they released the four version of the oxygen i think that they will go for the normally price so the discount will stop uh after the fourth version of course i don't know anything i don't have any information this is my opinion so if you do like oxygen and you haven't bite yet please go and do that if you do not do by the version 3.7 you will have to go and grab something extra and this is same you can do that right now by grabbing the agency plan let's go back and let's go here into the composite elements and as you can see at this moment they have 17 composite elements they're going to add more of course and they are going to improve all of those let's go and see as you can see here we have a documentation and if we can click here we will see that we have the documentation of those elements some of those may have a configuration and those configuration may be a little tricky for you to find so you can go here and you can see that the condition will have uh how if you want to have those open at the same time so if you want two of those accordions accordions i don't know how they are named to be open at the same time you have to select here true if not it will only uh one of those will be opened every time so once once you open one the previous one or the other one that it's opened it's going to close if we select here then says back to the top you will see that this says that we have the var scroll distance with three pixels and this means that we will scroll down three pixels and then we will see the the icon it's very easy to understand what they mean and of course there are some elements that don't have any other configuration options so they say that the dashboard tabs composite has no special configuration options and we're going to see of course some of those also here or anywhere else you can select the view demo and this will go to elijah website i hopefully i said that correct i'm sharing every time that i see the video but i cannot remember his name and as you can see here we have all the elements that we have uh if you hover to any of those you will see a tooltip and here i'm going to select the nutmega menu let's go for number counter it will go to the number counter and as you can see this is how it looks if we go and scroll up it will have the mega menu with the green bullet here and if we go here we have the image comparison everything is working as you can see and this is how it will look once you add them on your website we're going to add one some of those not of course everything because it will be a very long video so let's go into the repeater i'm going to delete that and let's go and add the section and let's click add now once you click add you will see that some icons have here the icon the logo of oxygen and this means that they are the composite elements and we're not going to select the mega menu from the beginning let's go to the basics and let's go and select the drop down button so let's go here as you can see this is what we have now i would like also to point out that we have also something new here as you can see here in the right pane we have the pencil instead of the bars of the three bars and once you click the pencil we have the same thing here but also we have here and an icon of an eye now if you hover here you will see that it says always hide and this means that it will hide from the back end because you want to do something and you don't want to be distracted or there is something that it's in your way because you have a hover effect or you have a effect that it will go up on the top of one element or the other so let's go and add another picture down there an image not a picture okay image so once i select here the image and i'm going to select something for the image let's select this one and i'm going to select this image i'm going to save it i'm going to see how it looks in the front end front end and as you can see i have the image here and i'm going to select the image again and i'm going into the selections and here i'm going to hide it as you can see now i'm going to save it and i'm going to refresh let's see it's saved okay let's refresh and as you will see this is not to hide an element if you want to hide it you will have to go inside the layout and hide it this is only for the back end and for you when you're using something to create and you want don't want to be distracted or something another element is in it in your way so it's very good that they added here now as you can see this is uh the element is the drop down button and once you add that we will see now let's close the image first let's hide it since we have it so here we have the drop down button as it says here and the drop down button is basically a div as you can see here this is the structure this is the div this is uh the code the code block and then we have the trigger which is another div and inside here we have the label which is the text and we have the icon which is this one after that we have the sub menu which is the div and then we have the sub button which is a link wrapper now everything are created and named so it's very good that we have here to know what we're dealing with and if you see they already have also created the class that you want to use so if you select the class here you can change the font the color of the letters or anything else and it will go for the same layout for all of those child elements and this will be done for all the uh composite elements that they have they have already created and add the classes and everything else so if something is not working it's probably be a bug because they are doing the best and they are creating something as they supposed to do so i really like that once you add here the action and let's go and select not image let's go and save that and refresh if you go into the actions and select here it will not push the image down it will just uh stay on top of the image and it's very nice to see that in first i was curious if it would push the image down so it doesn't and here of course you can select anything that you want and change the text instead of login let's say that we want an icon or we want to add something else you you can do that by just triple click it and change what you want sign up now and after that of course i can also select inside the sub button and i can add here an icon and i can give this icon a class and let's see the class of this to keep it straight so i'm going here and triple click it triple click it okay it's a little bit difficult to do okay and now i'm going into here and i'm going to select here and see how they have it named oxyl okay drop down button yeah sub menu button and instead of label i'm going here for an icon icon so i'm keeping the same layout as they have in the css and here i have already created my class i'm going to add that class and now i can just duplicate that icon two times and i'm going to add this inside all of those elements so let's go here and this icon inside here and we're good to go so let's start by changing the color so i'm going for a red and i'm going of course for an icon size of 10 no 10 and now i can select for the sign up now to have something like a person a user user okay for the login i can select something for i don't know enter do we have enter login something like that and for the contact me i can go and select an envelope so they're very easy to use as you can see just play without a little bit and you can do many more things they are very expendable and that is not the correct word expansible expansionable i don't know sorry about that so i'm going to delete that and we're going to add another element let's go and delete that and let's unhide the image just to have it around here and let's go for another one as you can see we have the icon button which is something that you can create very easily using just a div an icon and a text also this has a link wrapper but it's something that it's ready to use and if you add this uh four or five times you will see that everything are linked together so i'm going into this icon i'm going to select the class because it's not already created and i'm going to change the color to something else let's go for something like green and we're going to see that it changes everywhere which is great let's go and delete that and let's go another other one also we have the horimone horizontal divider which is using uh if we select here we will see that it's using the code block uh some icon and a cone block for code block for the right line so we have let's select here we're going to the advanced and we're going into custom css have a selected code block no left line okay let's go for the css and we're going to see that it grabs the flow flex flow one it means that it's going for the whole space that it can it will go full width and now we just give it a height because the code block doesn't have any height and a background so let's go for the sizing and spacing and let's go for the divider here i think here is the height sizing spacing here is the margin 16 okay it's not the height here let's go for the background and see if it's here no it's not here so have i select the background yeah this is the one so let's go and select the color let's go to advanced and i'm going to select myself the color so let's go for background background color for red and let's go for a size of the height sizing and spacing and let's go for height three pixels so you have something like that let's save that and now you will see that you can see that i have something like that also if i edit that in the class i i it will always take the uh layout here also let's delete that let's go for another one let's go for the uh hover scrolling image so we can see here that we have a div we have the code block and here we have a hover scrolling image icon in the icon i can select of course the color so i can give it a little bit of blue and you will see that it will go for blue and i can also change the background and everything else the the size and everything else if we go to the hover scrolling image code we'll see the css and of course the i think the html does have an html now it does have an html and if we go here we can select another background now keep in mind that once you duplicate that and we have two of the same elements if we're using here the scroll limits and select the class and change the background here it will go for both of those so here you want to select the the id and here you can go into the background and just delete that and change it with something else like that so it will not go for both of those let's delete that and let's add a mega menu i think it's time so you can see how it looks section and let's go for the mega menu add and mega menu okay of course once you start playing with an element you should always see first inside here if you need something to do to change the configuration so if we go here to the mega menu we will see that here we have some configuration options if we want to add more than one mega menu link so let's go and add one more link and see what we mean so i'm going to duplicate that uh the whole mega menu so as you can see here we have the mega menu here in the mega menu here now here i'm going i can change anything that i want i can change here the background color i can change let's go for blue and also it will go here because i want to have something like that in the same menu and of course the text now is awful so i have to go and change the text color to white and this because it's the id so let's delete that and let's go for the class and here i'm going to select the white so i have it in both elements now let's go here and i'm going to select here heading 1 and menu item one let's save that and let's go in the front end and as you can see i have the mega menu link one and the mega menu link 2. now as you can see no matter what server i hover i will not get anything changed so i don't have the menu heading 1 and the menu item 1. this is not a bug if you go and read the configuration options that they have here is because you have two mega menu links and you have not changed anything for the configuration so you have to go first inside the mega menu link here make a menu label you have to go into the advanced attribute select here another number no not here in the parent here and then go to advanced go to attribute and here we have the one okay this is the one and this also element is the one the mega menu wrapper then we're going to the second one which is the uh mega menu link and here we're going to put the number two because this is the second one if you have three you're going to put the next one to b3 and after that we're going also to the mega menu wrapper into the advanced into the attributes and we're going here to put also two so it knows that once you hover this link it will open this uh layout this div save and then if we go and refresh here we will see now here that we have the menu heading one and the menu item one of course since we having divs we can select anything that we want and we can change however we want this mega menu elements we have three columns and we have divs remember to of course see how it looks in the mobile version and i would recommend to create another menu just for the mobile version because the mega menu doesn't look good in the mobile so let's save that and let's open one or two more elements and then we're going to wrap up the video so let's go and add let's go for another one in helpers we're going to add a dynamic slider and in this dynamic slider you can add the easy post elements or the repeater elements so you will have dynamic lm dynamic slider sorry for something that it's not static of course since it's dynamic so as you can see here the slide is only one if you have created a slider you you may remember that you have to create two or three slides and then go inside the slides and change anything that you want but here you can just have inside the slide container in a repeater and then a slide and then change whatever you want in the slide it will go inside and then go inside the repeater and select what you want to grab so you want to grab the post go ahead and select the post here it's very easy to play with and create something let's go also here let's go and delete that dynamic slider and let's go and also select something like a switcher okay and as you can see here we have the year and the monthly now here we have uh let's see what we have here we have the code this is the code block which is what it takes for all of those to work so we have the css here and if we go here we will see also the javascripts here so they have already created everything for us you can see of course those two from the back end but if we go in the front end we will see only what we're supposed to see and if we change here to monthly we will see the other tab so this is only for you to change collapse editor so if you make here a change let's go and not change the color for everything else let's go for red one let's save that and we're going to see here that it's changed only inside here the yearly and as you can see it's working very well so this is where we're going to stop the video and i'm very excited for this update it's something that we have and it's unique to play with the cs grid and of course the composite elements that we are going to help you create something unique and now if we go and read about the composite elements you will see that of course they are marked with oxygen log as it says they insert and pull from the server similar way design works sets so they have the classes we have the menu the sorry the the names for the divs and everything else and they have some via code blocks so they have some html some javascripts and some css some of those of course now one thing i would like to point out is because they are something that are created from already elements from oxygen if you find somewhere a bug or something else in most cases it will be fixed by adding something inside the code so if this doesn't work in a mobile or if you find that once you add an element here it will go and make something different elsewhere this means that in inside the code there is a problem so maybe the you will contact oxygen and they will go inside the switcher code which is the code block and inside the javascript they will go and fix some line or add something else once they do that it will be fixed and you will not have to wait for the next release or the next update of oxygen for that to be fixed which is amazing now one thing that i would like to see from oxygen is another link inside the whop the website some posts or something else that will say what they have fixed before the release before the release version so the if someone contacts them and say that this switcher has a problem and they fix the problem for that person they should have somewhere documentation or something else that they could say that the switcher has a problem so everyone just copy this code and go and paste it inside the javascript and everything will be fixed so it will be a lot faster for you not to go and reinvent the wheel and see what it has for bugs and everything else so if someone already has found a bug and it was fixed for him you will just go into a source page into a documentation you will see that you have uh something to add inside the code of an element you will go copy the code and paste it inside the network hopefully i was cleared about that i will of course send that idea into oxygen and hopefully they will think about it so that was all for the video uh in this release uh by this release they added here some elements and they just destroyed two videos that i have already created and i will have to recreate again i created a video how to add a table of content inside the single post and plate by using another plugin and i i will have to recreate it and also i create a video about how you can grab a code from another website an html css and have it paste it inside your page inside an element and recreate something amazing so i'm going to recreate both of those videos sadly okay so thanks for watching guys uh hopefully i will see you all in the next video give us a thumbs up if you like it and if you want any more details or you want to see any of those elements a specific video about those elements please leave it down in the comments below thanks for watching and i will put all of those links about oxygen in the description of the video thanks guys and bye

Channel: Stratos Tutorials

Views: 2,370

Keywords: Oxygen builder, Oxygen review, Oxygen builder for wordpress, Oxygen 3.7, Oxygen 3.7 review, oxygen 3.7 what is new, oxygen tutorial, oxygen builder tutorial, how to use oxygen builder

Id: VbUZHXx7Vvg

Length: 40min 22sec (2422 seconds)

Published: Tue Dec 08 2020