Exploring Composite Elements in Oxygen 3.7

[Music] [Music] foreign [Music] do [Music] [Music] [Music] [Music] [Music] hello how's it going everybody we're back for another live stream episode so making sure everybody can hear me getting things warmed up glad you guys are here on such short notice seems like the streams are popular a lot of people have reached out and said that they like the format and of course people watch it so here we are again we're going to try this again and see how it goes so first of all before we get started just wanted to share with you guys uh a little bit just i sincerely appreciate all the support lately the channel is doing really well and i just appreciate so much the support it makes me more interested in doing stuff like this keeps it fun and engaging um and this is just a slightly different format the live streams are completely different than the polished videos i typically make and i really enjoy it so i'm kind of stoked that you guys are all responding so positively to it so if you haven't already of course go ahead and subscribe to the channel but i've been posting polls with questions on just different topics and stuff and the one that i posted yesterday was just asking if you wanted to see a live stream on the composite elements in oxygen 3.7 so this is what we're going to do today so we're going to cover the new composite elements kind of take a look at them play with them a bit see what we can muster up in terms of you know useful features out of them and then we'll go from there so we'll get started here in just a second i want to give everybody a minute to connect and get warmed up but i am excited to see everybody so hope you guys are all doing well uh kyle there is uh no no place for complaints um there's there's nowhere to share that because that that doesn't happen no i'm just kidding if you do have a complaint you can take it up with management but the manager is off duty today so not ready for that taylor thanks this is a this is a one of one hat i only printed one of these and i wear it all the time i take it out like on the boat and go swimming in it and it's gone all around the world with me so uh yeah all right so what i need to do real quick i just remembered is i believe i need to get my oxygen license added here so that i get my composite elements and i failed to do that ahead of time so look at me not being prepared again but i will get this sorted out real quick so oxygen license paste that in and then we should be good to go so if this will update then i will bring it back on screen for you guys do this happen last time now i will remember though and i will be prepared so taylor i actually was considering um i was considering doing like that printful ecommerce store like i said and i would just make some generic like mugs and like hats and you know maybe like the giant blanket because kyle actually did that for the admin bar did a couple like limited run products and uh people seemed to like it so i was considering doing it as well all right so let's see the test for any product is if you can go boating with it you're right i had a similar hat to this but for a different project and it blew off in the middle of the ocean and i lost it which was a very very sad day so all right in any case we should be good to go so the first thing i'm going to do here is go ahead and create some posts on this site so we have some stuff to play with in a little bit 25 is kind of a lot but i'm not really too worried about that we will go ahead and get some photos attached to these 502 that is not what i wanted maybe 25 is too much maybe i'll maybe i'll bump it down to 15. i don't want placeholder images i want actual lorem ipsum images kyle you're right honestly the dolphin probably ate it hey but i do my part you know those like ring things that like gatorade bottles come in i snip those bad boys every single time so my my uh oh yeah you guys are right i forget to change the screen avalon thank you all right here we go um yeah i forget to to change the screen screen so here we go all right so uh yeah but anyway i do my part kyle i do my part by snipping those little gatorade bottle things because uh i don't wanna i don't wanna be the person that you know endangers wildlife aquamarine life i guess you might say so we have the posts here on the site so let's just go ahead and hop into like our oxygen template real quick and we're just going to take a look at some of the composite elements so i've played with them a few a little bit here and there but i want to i want to explore the dynamic slider more the accordion kind of like toggle guy whatever that's called and then what else is there the flip box we i have a video on the mega menu but we can still play with that and then yeah we'll go from there so i'll just get rid of this default stuff pop in a section plastic bottles are murder i don't know what you mean but yes they are you're right that's why i have a reusable water bottle shout out to walmart five dollars on that in any case um let's take a look so the drop down button is pretty cool uh avalon if you're still watching this could be a replacement for the drop down buttons that we did on your site that might be a little bit more mobile friendly i guess because we had you know those issues like in the modal and stuff but like i think this would be a pretty reasonable solution for pretty much anybody that needs a drop down component now of course right out of the box is not the most interesting looking thing but i think the objective here is not so much to have something that looks amazing out of the box but it's just purely functional and then it's got all the classes and stuff for you to be able to style it so um kyle yes i i appreciate the heckle because it keeps me in line keeps the stream fun and lively so i i appreciate it doug i appreciate the shout out on snipping the little plastic bottle rings i do my part here and there you know i try to not use plastic water bottles and i snip my well actually that's not true because i'm buying a plastic product with gatorade so anyway forget what i'm saying uh but yeah so these are pretty these are pretty um flexible i would say because you can put pretty much anything nope you're not allowed to stop you're already you're already too deep in kyle yeah so these are pretty flexible and since they're just divs you can essentially put anything you want in them these are link wrappers but same thing as a div just with the link attached to it and then it would have the hover effects and stuff so this one is cool it's interesting that on the back end it does oh i didn't save it's interesting on the back end that it doesn't work like it doesn't actually function but on the front end it does i wonder if you can add a transition effect do you do it to the sub menu element let's see what class we're working with here so we have drop down button submenu and then maybe you would actually just want a class like you know your ps transition like we've been using and then go effects transition 0.2 ease and out so then if we save now we have a simple transition effect yeah so that that looks better already and then i think you know in a typical website let's pop in like an image and sort of make like a header because i envision this being fairly useful for header buttons for more simple sites so we'll use this example logo that i have set that to like 75 maybe 125 width it's pretty big let's go 100 and then let's go horizontal space between we'll be good and then let's just add some text links so text link we'll duplicate that a couple times and then home about us yeah you guys are super distracting but i appreciate it um locations and then i don't know contact or something so obviously this doesn't look very good but i just want to get like a simple menu because i think kind of like the video that i already made this would be useful for like a um i don't know like an account drop down [Laughter] please make the logo bigger elizabeth says done i'll do it let's go that big how about that so let's see if we can fit our menu links in here and then i set that to 25 width but we probably want it a bit bit wider to give us some space here it's like space between at 40 percent uh i'm going to drop this back down because that's kind of silly but i was going for the lulls so then i think i want my drop down button inside of this div and actually we probably want to make it bigger so uh what if we just let's go 60 and then middle align and then it's interesting because this yeah kyle so i think i think my channel slogans are this doesn't look good that's pretty cool what are my other catch phrases um which is pretty cool yeah i say that all the time i can hear that in my own head doug says now please get rid of all the wipes oh yeah what am i doing i'm not using grid i'm such a noob so column count three stretch i don't know what i'm oh well i guess i i have column count set to three but i would actually want it to be two because i have the image and the div so then my second one let's go columns band two oh no i need a three i need to column count three good point taylor i appreciate that so we want that to be call span two and then how do you change the alignment of one particular row so you go explicit i just want to align this on the right side can i just go margin left auto oh yeah there we go okay so all i wanted it to do is just stretch over to that right side yeah so anyway i'm getting kind of off subject here i was supposed to be looking at the um the drop down button but yeah so like what i would envision this to be used for is like you know account and then the drop down would probably be good and be like login sign up contact but i think you would want the sub menu first of all to be white as its background wherever the class is where is the color assigned on those sub menu oh is it on the individual link elements yeah it is okay so i actually don't want that i just want a hover color and that gray is super dark so maybe we'll bring that up a bit and then the sub menu let's go with maybe let's go like a light box shadow right at the beginning before you hover on an individual link so we'll go like ten percent opacity zero five ten zero uh android hydrogen keyboard shortcuts i actually don't have hydrogen on this demo site but i probably should add it because it would certainly be useful but um i try not to use that in tutorial videos just in case people don't actually have it i don't want it to be something that like i'm skipping steps that they're not sure how to do and so i try to use it myself but typically not in tutorial videos so then on hover we have that effect and yeah so then the other thing i would probably do is change some of these links so like the login you'd be like you know user logged in equals false and then i think i would duplicate this and change this to log out and then just switch that condition so condition user logged in equals true and then i forget off the top of my head what the um what the logout url is but it's like wp log in i don't know question mark log out or something like that i'm totally making this up but just as an example just make it link to the log out page unless you already have a um unless you have like a plugin that's handling that for you alan that's exactly it add-on agnostic is my idea uh taylor i would love to gift everybody a hydrogen license but i would go broke everybody deserves it though that's such a fantastic addition to the uh the sweet all right so login log out yeah so basically that's what i would do i'd probably change this button to be something a little bit more interesting looking where is the color on this so axle drop down button where is that coming from so the label is our gray color the trigger it doesn't have a background color set oh it's is it this oh yeah yeah so it's that whole drop down button not just the trigger okay so then i think i would go almost like the inverse of whatever your global colors are so like my border green i would do that like maybe two pixel width and then we would make our trigger typography let's see how it's actually set up is it yeah it's on these classes so we'd go text color hey stratos welcome in yeah i know there are a couple people doing lives today but um i'm doing it now so uh let's see what do we have so far also i'm going to change these text links to be text color of black and then our hover color of green to make it a bit more consistent and then let's go ps header links i need to copy those styles from the id to that class so i'm going to do that and then let's stick some margin on the right side here then let's add these classes to our other text links so we get a similar effect here i've never really used editor enhancer i know a lot of people do but it's not something i've played with all that much all right so then we're going to middle align this div and then i want some more spacing here so is that to do with my grid here let's see if i go column count of 4 and then i make this one go column span of three then my question from earlier was like for this row how do you change the item alignment so that it's centered or just takes up more width do i go flex grow one on this guy let's see hmm that's interesting because i don't have the flex option here what about if i take this off no so all i want it to do is basically just oh it's because i have margin left yeah okay okay it's because i had margin left auto on this and so it was pushing it interesting that's something i didn't know yeah so then i guess i would take that off and then i would make the horizontal item alignment right and then just essentially take my header link class and add some more spacing here maybe like what would be an interval from 15 maybe 30 is probably not quite enough so 45 something like that yeah stratos i've seen a lot of people complain about it but like i don't really understand the complaining if you consider how much we've gotten for free over the last few years especially if you bought oxygen back in like the 2.0 days or even prior to that like i did i've i've paid one time and have gotten everything so i don't know how you can feel justified and complaining in that sense maybe for people that barely missed it but like that's just the way deals go sometimes you just miss stuff it's like i don't know to each their own i guess the other thing i was working on before i got distracted was the hover effect here on these drop down buttons so right now on hover it doesn't do anything but what i want it to do is essentially inverse invert itself so on hover we're going to go background color will be our global green and then our trigger i guess actually we need to go to our text hover and that's going to go to white and then our icon hover is also going to switch to white and then let's see where we at now so we don't have we don't have a transition effect here so let's go back to our button and add ps transition so now there we go so looks like my icon hover is doing the same thing that i had before which was where that icon hover color doesn't take effect until you actually hover over it with css so i'm not going to worry about that right now i don't feel like getting off the reels with that uh taylor rubbing it in our face for a long time i bought oxygen and i didn't use it for like a year and that passed and i didn't touch it at all jean says people complained about acf pro when the price was increased months and months in advance yeah that's that's a great point that absolutely happened and if you missed it that's just the way it goes you just miss it sometimes all right so let's save real quick and take a look on the front end so the only the only issue is that um i guess i need to change the typography color on that button so that you can actually read it all the time but that makes the drop down look much much better so out of the box it's obviously totally functional but this looks better than it did before so let me go back to the drop down button and let's go i guess on this class to hover change the typography to white and then i think on the trigger we need to change the hover state that we said oh i guess i did it on the actual label itself not the trigger so on that label i'm just going to remove the hover style same thing for the icon remove that hover style and then i think that should do the trick no it didn't whoops do you have to go on the trigger itself hover typography white that's super annoying do you have to do it with css since there's two elements inside the link wrapper i want it to make both of them white and i'm trying to avoid css just because that would be nice stratos says personally i'd be happy to pay the extra cost of the composite elements because they're going to improve the elements and save us time yeah exactly there's going to be more of them to come so that to me makes it worth the money um and then they're just going to keep getting better and better so it's exciting for me and obviously that means that there's a recurring source of income for them uh which will help increase sustainability of the of the business overall i just think it's a i think it's a good move overall the the addiction that people have in the oxygen community to lifetime deals is kind of frustrating but i mean that's just the way it is so real quick let's go use hoverify inspect this guy and then i think we'll want to go with our div here and actually i'm just going to use chrome inspect real quick to see on this div where are we this one right here if we go to our hover state our color is already set to white so where is the disconnect happening is it on this actual code block i don't think it is so we're still let's set the hover state here so the trigger hover is already set to white you have to use dot drop down button hover icon let's see you have to use drop down button hover oh oh oh i see what you're saying taylor so i need to stick a class or no no the class already exists so the icon class drop down hover label class pods is a little limited yeah i don't actually know anything about pods that's a good question so hopefully somebody else can chime in there i wonder if there's oh no there's no css i was hoping it already existed there for us so what if we just take this class and then we go dot hover and then we would take the label and the icon and then comma right icon then this and then color fff is that what i'm looking for so basically i'm taking the class of the drop down button and on hover it's going to target the button label and the button icon and i want it to be white so in my head that should work oh let me get out of chrome inspect here there we go so almost almost perfect i guess i missed the icon something to do with the icon here axle drop down button icon not sure what i did there i guess maybe i have to do something else to the css but that's close enough maybe somebody can chime in oh oh okay so you got to do axle drop down button hover there as well cool that's not hard nope what did i do wrong also drop down button hover repeat the axle hover axle drop down button icon did i just not save maybe nope what is it what is it oh it's no comma now the comma breaks it aux drop down button hover button icon hey martin good to see you i actually don't even own swiss knife uh it's just not something i've really spent any time with i've seen videos on it but it just didn't didn't seem like something i needed to add to my personal arsenal i'm going to keep moving on because we don't need to spend two streams in a row fumbling around with css so let's go take a look at some of this other stuff now the icon button is interesting because this is essentially just a link wrapper that already has some classes and some structure attached to it so we have an icon that has a class we have some text that has a class inside of basically just a div that's been turned into a link wrapper element so that one's pretty basic to me but some people might find that useful because i'll admit it wasn't immediately clear when i first started using oxygen how you can create a button with an icon and in a lot of builders that is a standalone element so i guess that does make sense i'm just going to keep adding sections here so we have unique items on each row horizontal divider is also an interesting one because this one is not immediately apparent as to how you do it so let's take a look at how this is structured now we have this div that's kind of the container here it has a class which its width is set to 100 percent and that's about it there's pretty much nothing else set there then the left line is actually a code block i didn't know that so it has a class attached to it its background is whatever color you want in this case it's the composite global color of gray six which of course that's another good point is when you add these composite elements they actually bring in a whole set of global colors for you so you can see composite elements so realistically if we wanted we could change this to be gray six let's change it to some sort of green actually i'm going to go back to my other hover color that i have right here and just change it to this so there's a super cool example of how the global colors work easily able to override what was there before so that's kind of neat so in any case let's take a look through this code block there's no php the css is flex grow one which can you not do that straight in oxygen does it actually need to be flex grow one in this code block because if you go to layout like if you go to this div maybe you can't do it on a code block i guess you could do it on a div if you go here and go to layout and scroll down you have flex grow where you could realistically type in one but here it's not really going to do you any good because this is not the actual line itself it's the container but i'm sure they would have thought about that the oxygen people would not type in some code unnecessarily so in any case all this is doing is targeting the class of this code block and it's saying flex grow one which basically makes it take up all the available space which is cool and then there is no js in this then we have the center element which is just an icon and it inherited our global color change icon size is 16 and then is it just positioned in the center it must be yeah kind of neat all right and then the right line is going to essentially be the same thing except just on the left so that's actually relatively simple and it would be very flexible you could make these lines thicker i believe how would you do that oh it's just the height of the actual code block so that's kind of cool if you wanted to make it eight pixels instead of two you could certainly do that could you just use a div which has three pixel height and uses flex grow one i think you realistically could so what if we just take this class here inside this div we'll go div add that class and then layout why doesn't the flex grow options change i mean why don't they appear because like on this div the horizontal divider if you go to layout none of the display options are set but down here you have the flexbox child controls so those are there but on this one that i just added or can you not do it on a class no that doesn't have anything to do with it that's so weird flex scroll one is super useful addition to consider for your ongoing restaurant menu project as a header line between items and prices yep that is very true so i still don't quite understand why the flex grow options don't appear down here sometimes i wish elijah was here to answer that that would be nice in any case this is extremely flexible we don't really have to change all that much all we're dictating is the height so i was trying to reinvent the wheel there there's not really any point to do that but you certainly can do that martin says as far they said that the css code can be moved to a style sheet but to insert it as an element it has to be in that class oh okay that's why they're in code blocks instead of style sheets got it so next up after the horizontal divider what do we have is the icon list so again this one is relatively simple but it might not be immediately apparent to new oxygen users how you might build this so let's just take a look at this we have one wrapper div here and it has one class axle icon list and what do we have here so a filter there's actually nothing there even though the little little guy is lit up pedro says i think flex grow options only appear when the div has child elements oh so let's go back and add another div real quick and then i'll add in a text element so then div layout let me uncheck flex here still still nothing that's super weird i'll need to investigate that further i don't quite understand that in any case back down to the icon list there is almost no styling here but that class exists i think so it would make it easy for you to do something like change the width to 100 and then if you had two icon lists you could realistically change one you know add the margin beneath them change the width back to 50 something like that let's see all right so now over here let's take a look at how we're getting these alternating background colors so we have icon list row and then that has a width of 100 so it takes up all the available space in this container and then let's see so the alternating color here is another class so axle icon list row dark so that one is just basically a global color set so i guess you'd have to do this manually like you'd have to duplicate the rows that you want right because this is not dynamic so if you did it like this then you would essentially need to like reorder them which is not i should not have dragged this that's going to go horribly wrong so i guess you would have to go like this i wish they were labeled like row alternating color and then here's where hydrogen pack would come in handy with the drag and drop so this is this is less than ideal to say the absolute least oh my gosh what a mess what a mess yeah but i guess i guess you could just duplicate it a couple times and then if it's not supposed to be the alternating color you could just delete it and then you could just go like dark search for the word dark all my core classes are popping up there so row dark there you go so i guess the easiest way to be would not try to drag and drop them to reorder it would just be to re-add the classes but yeah that's a pretty useful element and then again because all of these are you know they come out of the box with classes attached to them if let's say you want to change the padding so you want to go like 16 left and right instead of 8 or you want to go 24 whatever you want to do that is all available for you if you want to add some margin beneath them then yeah you have all those options which is nice so i'm going to delete one of these icon lists and then let's go check out another one oh yeah martin says hydrogen has control up and down arrow yeah that is extremely useful you're totally right next up we have hover scrolling image so this one's going to be a fun one to play with because i actually haven't really played with this at all so what you need is a tall image and then it's going to scroll down the whole height of the image which is pretty sweet so let's take a look at how this is set up so we have a div and then its background image is just a super tall image now let's go to like oxygen builder dot com and then if we use hoverify we can go to take screenshot capture full page it's going to take this full page screenshot for us and then i guess i need to save it oh well i don't want to zip i think if i go to the bottom nope save take my dialog over here so you guys can't see the secret stuff i'm working on and then we're going to go back over here upload and then this one so this is going to be that full-size screenshot that we just took [Music] all right so now we have our own hover image here yep that's the screenshot we just took all right and then how is this actually working so there's the hover icon code so in our php there's nothing css has an opacity of zero and then a transform translate y so so this is actually when you hover over the image container that makes the icon go away it has a really nice fade effect that i just realized if you look as you hover it starts to fade and then it goes down and disappears and then if i let go of the mouse it comes back up that's pretty cool i didn't even notice that i like that quite a bit it's good to kind of go slow and take a look at this stuff so that is what's happening with this css right here and then what about in our javascript tab here there's not anything right there and then hover image scrolling icon so you can change this icon to whatever you want if you want it to be like a is there like a mouse cursor yeah i guess there is that would indicate to me a click though so mouse is probably not the best one but i was just thinking of some other icon we'll go with the heart if it's like a portfolio and you're like i love this one then you could totally have that so that is actually extremely simple that's pretty interesting very neat i expected that to be quite a bit more uh what's the word intricate i guess for a white image um then you might want to add like a border on the bottom maybe not i don't know if this is going to look good probably not all right so add another section strata says this can be done with the background of a div and a transition y on hover with slow speed cool that's neat i haven't tried that i mean since that's so simple i think you could recreate it in oxygen relatively easily and he says you cannot have flex options in a child div with flex option parent divs with elements have flex options oh okay okay gotcha so that that's why then they use the code block on that makes sense can the portfolio be wrapped inside of a device frame uh well yeah because that tutorial that i shared a while back for the device mockups all credit to taylor on that one it's essentially the same thing except it just has that frame so yeah you could totally stick this inside of that that device mockups that's a really interesting idea actually i like that i like that let me uh let me go look real quick and see if we can slap that together real quick it's funny because i actually reference my own tutorials fairly frequently which is funny so i was going to go look and see if it would be quick for us to toss that in can't exactly remember we got to add some custom code yeah i guess we'll do that another time code snippet scroll bar yeah we'll worry about that another time that's a really good idea though i like that quite a lot um maybe we'll come back to that in a little bit so hang on i'm not saying we won't do it today i'm just saying not at the moment so let's keep going what do we have up next so hover scrolling image that completes the basics tab so under helpers we have dashboard tabs this one's pretty cool this would be definitely useful for like an account panel you know like member press comes with a bunch of tabs but they don't look that good out of the box so this is just an adaptation of the actual oxygen tabs component which is pretty cool so let's see we have that translate effect so really there's there's not a whole lot to go over here because the tabs component is already in oxygen so what's going on here with this dashboard tabs code block so that's where the transition effect is coming from 0.3 seconds ease and out and then when it's hidden it goes to display flex position absolute then it transforms on the x-axis 100 of the viewport width and then when it's hidden it goes display initial okay so that's kind of cool relatively straightforward i wonder why that was added as a code block and not just attached to the classes maybe there's again some other reason you can't do that and then this is just a bit bit of js to show and hide those classes to make the content go away you can see it's tab content is the class that it's targeting and then it adds and removes the hidden class to that so pretty straightforward and then a spacer here i bet this is probably using oh it's css well no it says pointer events none what are we doing here to achieve that spacing flex girl one okay so same thing using that flex grow one to take up all the available space which interestingly doesn't seem to do anything which is kind of funny not sure why that is but oh well if you wanted it to be the same background color it's that composite gray one let's see where is it composite gray zero gray one so that would make your tabs on the left-hand side all have that same effect actually there's a little bit of that overlap there which looks super cool i want to refresh real quick and look on the front end i like that effect a lot the way that it sticks over the left-hand side like that that's neat the only annoyance there is just the height of the content in this first tab as compared to the second one means that there's a bit of a jump so i feel like you would probably want to go to your tab content set the tab like let's go minimum height i don't know like 350 400 maybe 400 would be good so it doesn't actually have that jump effect so downloads subscriptions support that looks really neat i like that quite a bit all right let's keep on keeping on so another section uh strata says this is perfect for woo user dashboard absolutely that is 100 useful completely agree there so next up is review box there already is a review component which is interesting uh where is it oh i guess it's called testimonial it's not review box let's add it real quick and compare so the review box one just looks a good bit better the testimonial is a bit more like i guess not not templatized but you know it's got a bit more of the oxygen way of controlling stuff which i guess is good and bad if you don't want to have to worry about completely customizing it that's what the old one looks like whereas this new one is done more in like a manually built way but it has all of the classes there attached for you so you could definitely just take this whole component if you like the way the review box looks and stick it in like an acf repeater and then you could have like a you know a review not slider but you know a review repeater i guess you would say so this one is pretty pretty uh self-explanatory there's one div i'm gonna delete this testimonial one so it's not confusing one div that wraps the content here that's set to a background color of gray one and then inside of that we have two rows first one and then second one we have just an example title you have your text for their name and then the review stars is just a series of icons so that might be hard to replicate without something that can stick in some reviews but i also don't know if you're using somebody in like a like a team slider you probably don't want want to rate rate people on your website i wouldn't think so there's that jason says one thing i noticed while using composite elements is when you want to use multiple if you want them to be different it becomes tricky any secrets for that um yeah so good point let's go to like this review box i'm going to stick some margin underneath it like 25 for example i use two accordions and i had to change all the classes and code it depends on how different you want them to be i mean i guess if you want to be completely different you might have to change the class names uh although like you could essentially copy the styles from one class to another and then just change it from there so you kind of have your baseline so uh let's see now what i was gonna do here is like you have your review box which has your background color of gray one but let's say you want to like invert the colors you could essentially just go like axle review box and let's call this one like like light so i'm just going to add another stacked class here so axle review box light add that and then our background color let's go wait do we want it light or dark i guess i guess this one is technically dark ish not really i'm just going to make this a darker color so then we're going to go back to our second one on the review box light i would change my background color to maybe one of these and then this is kind of a bad example basically what i'm doing is adding stacked classes so you can invert it pretty easily and then in this case you would probably want to add a class let's see so you have details details wrapper name and then maybe like light this is this is the wrong way to do this but hopefully you follow what i'm trying to say go light and then you would change this text color to like white or something same thing here take that class title underscore light is what we're going to do and then our text color like that so you basically just add stacked classes to achieve this layout and then that way you're not having to reinvent the wheel so then text color white something like that so in any case that is probably how i would do it um just depends on you know your particular use case if that makes the most sense for you so hopefully that's helpful let's see i just added jason says i i just added a two to everything and copied and pasted them just like you said yeah essentially the same thing however you want to name it your site completely up to you all right so next up review box is kind of um i don't know not not that interesting i guess but it might save you a little bit of time if you're building something like that so dynamic slider is pretty cool now i've made a video on this because it's essentially just swiper.js is what it's using to output this stuff i'm gonna basically collapse this whole structure panel and get into swiper here to make things a bit more clean for us fernando i appreciate you saying i'm the best i just uh just try to make cool stuff i hope i hope you guys enjoy the videos thank you so much i said at the beginning of the stream that i just appreciate all the support because um you guys continuing to watch and you know like and comment is the reason why this stuff is so exciting to me and it keeps me going so i appreciate it all right so in our code block here php is basically pulling in the swiper.js code so it's bringing in the stylesheet and the javascript code itself and then this is a bit of an explanation on how this works so let me actually go real quick to swiperjs.com and what it's doing in oxygen let's see where is the getting started i guess it's right here you can see this is what it's pulling in the code that we just looked at and then if we scroll down this is how it's actually creating the html layout so you need one div with a class of swipe or container then another one with swiper wrapper and then you have class of swiper slide so with that if we go take a look at our slider container you can see that this has the class of swiper container which of course you just saw it requires and then there's another one for the actual styling then if we expand this we get into the actual repeater component itself that has the class of swiper wrapper attached to it and then in this particular case where is the width actually set to define this okay so i step back up real quick to the swiper container and that's where the height of this particular div is set so if you wanted to change it to 250 or 750 you could certainly do it you do it right there on the swiper container except it's actually set on the dynamic slider class not the swiper container class so keep that in mind and then the repeater swiper wrapper what i was curious is where is it set to take up 100 of the width here oh it's this it's way back up here so it's actually the main uh div here axle dynamic slider that's set right there that width is set there okay moving back down we already looked at the swiper wrapper which is just a class attached to the repeater and then in this case the query is set to oops post type of post so in this case we do have some example posts on the site already because of course we added those in earlier and then the swiper slides this is just the main repeater div that has that class of swiper slide attached to it and then i don't think there's anything else tricky here again for some reason the filter is lit up but there is nothing actually on it and then you just have your content inside of that slide so we have our heading which is just the post title you know the dynamic data post title is what that's using and then if we go take a look at this on the front end i don't think it works in the back end no it doesn't so if we refresh real quick come down here then our slider is dynamic is this already set up as the post permalink yes it is and then it's hard to see on that particular image because it's dark but if you look down here you can see the dots so swiper.js has a bunch of configuration and you can look uh once you initialize the swiper if you go to api documentation and you scroll down pretty much everything you want this is a massive page but you can set how many slides are visible at one time [Music] i think it's slides per view if i'm not mistaken yeah slides per view you can basically set it to like 1.5 or 3 3.5 whatever you want uh so let's try that real quick we're gonna go over here to the dynamic slider code take a look at javascript and then you would need to add it roughly down here there is some uh kind of nuance to how this stuff stacks together so you'll need to read that documentation if you want to really start customizing this but if you go slides actually i think it's lowercase s slides per view let's go like i don't know 2.5 and then save this unfortunately it doesn't update in the back end without a page refresh i don't think but if we save then you can see we have two and a half slides per view with this layout configuration that we have of course it doesn't look that good but you can see that would be how you could set a slider like this now a realistic example would be if we set this section's width or sorry size and spacing if we set the section's width to full width and then let's kill the padding on the left and right side then it might actually look better yeah so 2.5 still probably isn't quite right maybe you would want to do like 2.2 so you see the far edge of like the beginning of the third slide if that makes sense but it's completely functional as is now there's a few more things to take a look at here so um where is where are those buttons coming from so our pagination and our nav is let's see there's the classes right here for styling the previous and next buttons as you can see then the pagination bullet color is set to black let's go to white because that seems like we have a lot of dark images on this website so the way that i've done this in the past is by setting up actual like divs that then become your pagination so trying to determine where those are actually coming from unless it's just automatically stuck in there for you last week i purchased the oxygen agency license i think you had to purchase it before february 12th if i'm not mistaken something like that let's see so this is a div but it doesn't have it doesn't have the uh oxygen ids attached to it so maybe these are added for you automatically let me go into the dynamic slider code in javascript and let's see so oh yeah yeah this is where it's coming from right here so you can see pagination and previous to next are added with those divs right there so that is pretty cool gene says can you try to remove the arrows down in a div and see if the slider moves um not sure what you mean by that sorry can you move the arrows down and it did oh you're saying like get them outside of the slider itself and like put them down below it for instance that is a good question uh it is probably positioned with this css here so previous to next color can you go i actually don't know i'd have to play with that that's a good question because i have i have had that asked of me where essentially you would have like all of your you know navigation down below the slider so could you go let's see i'm just going to try it out here just so i can kind of see it in real time without having to refresh a million times so on this could you go position absolute and then well no it wouldn't be yeah yeah that's a that's another good way to try it because by default i think the positioning is just going to happen there based on the css that you're importing so let's go with this section right here and then let's stick in a div this one is um what is that class name javascript swiper button previous is the first one we're going to start with so go back to this div stick this class on it and it positions it up there so that has to be the css from the code that you're importing you know through that code block but if we go div can we just set the layout to absolute bottom no fixed bottom zero now j1m says on this type of library you just create your div of arrow and then declare your div class name inside of your js yep that's essentially what it's already done you have to go to relative for auxil dynamic slider container and then go for positioning okay so layout relative and then this div here layout absolute no i think it's being overwritten isn't it that that is i'm going to make a note of that right now that's a good tutorial or future reference video on how to get dynamic slider uh nav outside of slider cool all right so i got that saved we'll come back to that because that's a that's a really interesting one but the other thing is i wanted to have some gap between these slides so somewhere in here is the word gap space between yeah okay so space between is the distance between slides in pixels uh so let's do that so we're going to go back over here to the javascript code for our dynamics lighter once again slides per view is 2.5 let's change that to three so then our space between let's go 30 pixels and then we need a comma not a semicolon uh seems like it's mad about pixels do i need to leave off the pixels if you use margin css property to do it's just the number okay i guess i don't need pixels so save that and then let's see what happens on the front end when we refresh this slider beautiful we would need to adjust the spacing of this stuff right here but this would be fantastic for like a product carousel at the top of your website you know you could show more than one product at the same time and then you still have all of this by default you can drag it with your mouse as you can see i'm moving it back and forth and i don't think keyboard controls is on by default but if you want keyboard then you have all of those options as well so keyboard is enable equal true so let's go with that real quick i want to toss that in so we're going to stick that like right below here except i forgot the k on keyboard so make sure you copy the whole thing so apply that save refresh and then as arrow keys working yes it is so you can see i'm going backward and forward with my arrow keys super neat ellen says off topic but idea for a video why i don't use oxygen for e-commerce what is missing um well i can answer that part of it is because i've not really built that many ecommerce stores and every well not every but a lot of projects that i've done end up going really wrong that involve e-commerce partly because of my own inexperience but also just client budget doesn't typically correlate and then woocommerce has always been very restricting i feel because prior to oxygen you know i was using pre-built themes and so it just never was really something i was very comfortable with so that is basically it in summary but i am going to spend some time with oxygen woocommerce i'm planning on doing a um a video here pretty soon probably live on stream so you guys can see some of the hurdles we run into but back to the dynamic slider here this thing is extremely cool um what else would be some other configuration we can do here so navigation events let's see auto play is one i think our auto play is already on if i'm not mistaken maybe is it not i thought it was i'm waiting yeah it is okay so it is on by default is it set here uh yeah the delay is 4000 and then there's a couple other transition effects none of them look very good except slide i don't think but the oxygen team was kind enough to document those here for us so slide fade cube cover flow and flip i don't think any of them look that good uh except slide to be honest then what else do we have lazy load fade cover flip those are the ones we just talked about thumbs that's pretty cool so in addition to controller component swiper comes with the thumbs that is designed to work with additional thumb's swiper in a more correct way than controller object with thumb's component parameters okay so i guess you have to have a separate variable here that is probably outside of my pay grade if i'm being perfectly honest but that's pretty cool that you do have that i want to play with that as well so what exactly do you do auto scroll offset slide thumb active class swiper swiper instance swiper used as thumbs or objects with a swiper parameter so that says constant where else do we have that i've already seen that in here somewhere i thought maybe not that's another thing for me to try to look at is the thumbnail component i wonder if there's an example um let's see let's go back to swiper uh the home page see if they have any examples because i want to see what they're talking about so navigation infinite loop dynamic slides thumbs gallery um yep we definitely need to get that working that's cool so once you change then the thumbnails also change that's pretty cool so what does this source code look like where is our js initialize swiper var gallery thumbs gallery top okay so you have to define two different galleries essentially ones for thumbs and ones for the actual like gallery component itself kind of cool we'll come back to that because i think that is worth some exploration considering you see the thumbnails in galleries i wonder if there's a way oh you can swipe them separately that's cool very cool i like it i like it i like it a lot all right moving on uh what else can we do with this slider that would be kind of interesting any other layouts i can think of i don't know seems like we've kind of covered that one all right i'm going to move on here yeah i mean i'm assuming it's kind of like nested sliders because see this one here says var swiper new swiper container and then i think you're basically adding another variable here that would add another slider underneath it essentially so i guess the question would be do you need a second repeater that'll be another thing for me to explore thumb thumb swiper of swipe or js okay so we're going to stick in our new section and continue the trend here so what do we have after dynamic slider so table of contents is a really cool one in this case we probably want to stick it up at the very top of our site and let's save and take a look on the front end so we can see what it picks up right out of the box back to the top here the only thing that picks up so far because it's looking for heading tags is welcome to your dashboard which is right here so is that the only heading tag we have across the entire site so that one's h2 let's go with let's go change some of this stuff here so let's stick in an h1 right here and we'll call this our list element add some margin underneath that and then what i'm going to do here is just duplicate this and change this one to an h2 and then we're going to go this is and h2 and then we're going to duplicate that this is another h2 i want you to see how these nest so then i'm going to duplicate this and change this to an h3 this this and h3 actually they're not the same case so i'm going to change that to be consistent so save this guy refresh and then you can see that basically it's going to categorize these so each ones actually aren't picked up i forgot about that for whatever reason i'm assuming you could change that in the code and then when you have an h2 it becomes kind of like your title here and then any other headings h3 4 and 5 underneath that are all sort of nested so let's go there's an h3 right there uh let's go h3 three i'm gonna change this one to a four and let's see how that behaves so this is an h4 this is an h3 also i just want to change these a little bit so you can see save that guy and refresh all right so here you go so that welcome to your dashboard is an h2 if we had h3s or h4s underneath that then those would pop up in here and then this is what we just did so all of these are linked if i click one of these it's going to take me down to that particular element there's a little bit of an offset because of the wp admin bar that makes it so it kind of covers it up ever so slightly but that table of contents element is pretty cool now just like everything we've seen so far today all of this stuff is um you know completely configurable so all of these have classes toc sub 2 sub 3 sub 4 etc and then you know if you want to change the primary item h2 let's say you don't like that that background color we could change it from ee to like the atomic blue and we could change the typography to something like white instead give it a little bit more delineation like that and those are all going to take place for you because of the fact that all of that stuff comes right out of the box with those classes as you can see stratos says does anyone know when the add i and the structure elements yeah i saw that recently i don't know when that was added actually good question it also puts the um the what is that the conditions icon there so that's kind of interesting and then it changed to a pencil instead of the hamburger at some point too i don't know i don't know when that was either so oh well kind of a neat addition the table of contents if we take another look as well you can see all of this stuff is basically just text elements that automatically become links and then the toc code here is a bunch of javascript that basically is scanning the page adding the ids and it works like magic now um the other thing is that i've looked at this when it first came out which is a cool demonstration of the um what do you call the stuff the composite elements it wasn't able to pick up content that was added through dynamic data initially but whatever change they made it has since been fixed so that's kind of cool so that was a demonstration where they didn't have to wait for a full release of oxygen to be able to fix that which i thought was pretty cool the other thing is that there's also toc skip so if you add this attribute to let's say like what's what would be a good example here so welcome to your dashboard if we go down to that heading if we go to attributes isn't it uh is it just toc skip is that all i have to do i actually haven't done this i just learned about this earlier so what is it looking for oh no not dashboard tabs code i want table of contents code it is if the heading itself or any part of its parents have the toc exclude attribute skip it so save refresh oh yeah okay cool so that's all you have to do so let me go back here because i did kind of jump around i wasn't sure exactly how this was going to work so on this heading let's say i don't want it to be picked up by the table of contents all i had to do was go to toc skip and then like add that attribute of toc skip and then it doesn't pick it up in the table of contents there was one other one in here i'm pretty sure one other attribute that we can play with uh what is it toc skip there was another one i thought i learned about maybe not maybe it was just that one either way that's a nice addition pretty cool there uh stratos says heads up croco blocks are working on oxygen integration uh to be honest with you i don't even know what cracker block is i haven't looked at it probably unwise of me for me not to have looked at it but that's just the reality of it okay so there's a bunch of other ones man we're already already in an hour and ten minutes so we're going to kind of move through a few of these so flip box this one is pretty self-explanatory in the back end you have the flip box front hover over this and see the effect i want to change these images real quick so how does this work this is just a div is it a background image where is it actually coming from oh the image is on the class itself interesting uh let's change it to this picture of like i don't know what that is maybe a train station and then the back one we're gonna do the same thing just change the image to be something a little bit more interesting uh we'll change it to the picture of this clock actually no we're going to go the cityscape that looks better and then let's take a look at how that behaves on the front end all right all the way down so all i had to do was hover when i move my mouse back off then it flips what does the click me do nothing oh it's just a button there's a button that doesn't go anywhere so there you go and then that one's pretty self-explanatory what else section indicator now this one is pretty cool although it would take some setup on your behalf so the section indicator is basically these tabs here so you basically need to put this which is just a div i believe you would basically need to take this and stick it like wherever you know at the top of your page and then i believe you need to nest these sections inside of it right i'm just going to nest some oh did i mess it up i broke something there's something over here i just probably need to save this and then refresh because it's going all sorts of wrong here and apparently croco block is an element or library ad oh okay i didn't realize that cool i don't even own an element or license if i'm being honest signed up for the free version so i can play with it uh i broke it our site is very broken now what did i do section indicator dot do you not actually need to nest it inside of here i thought you did don't put them in it oh that's kind of weird so is it just finding these sections for you i'll just get these back out so section let's see this section is actually our header so do i just put it in the page oh so it does it for us i did not know that and then also i don't remember having this um this pop-up label for us that is that is sweet i think somebody in the oxygen group i'm pretty sure it was amanda uh lucas was talking about wanting this so what else there's some there's some other section over here or is that our section indicator oh it's i have another section in there there we go so how is it finding the label here so s i skip oh okay so you could make a section skip so let's go well let me save this and then refresh real quick and take a look because this is going to be similar to the attribute that we just looked at to skip a table of contents heading let's say we want to skip um i don't know like this dashboard one any of them doesn't really matter we're gonna do essentially the same thing just pick a section go to the attributes and then it's s i skip i believe so then this one shouldn't be included in our section indicator over there so now oh it is what did i do wrong yes i skip i guess i did something wrong attributes si skip apply save refresh oh maybe it's because i'm already at that section i already had that in my nope it takes us right to it weird i'm totally it's totally possible i'm doing that wrong i don't know okay anyway the section indicator one is pretty cool what i wanted to know oh my dot is also outside of the code i wonder if that's having any impact there so in the back end there we go now it actually looks good the dot is just an icon right what's happening here so link wrapper looks like it's the icon so there's the label here and then the label text how is the text being generated for those labels is my question so id data label oh do we need to add let's just do it like on our first one here so is it attribute of label and then home button for instance i don't know that this is going to work but it looks like it's looking for an attribute maybe i'm using the wrong attribute ids label home button jquery this data label index i'll have to report back to you guys on that one not exactly sure why or where it's picking up that label from labels on hover let's see mouse enter dot remove class hidden far label jquery axle section indicator label hello from athens stratos i was actually curious where you live are you in athens as well jquery this find auxil section indicator label label add class label hidden i don't know oh well that's a topic for another time i really just wanted to go through these relatively quickly but i keep finding myself getting distracted um listening distracted but did you use toc skip i did i did use toc skip on the table of contents and then s i skip on the section but it didn't quite work so i'm gonna have to come back to that stuff i wanted to look at some of these others so section indicator circular counter is pretty self-explanatory um let's see how do these work exactly so circular counter code i don't think we need to play with that circular counter outer inner number percentage so that's just the content of it so the label and the sub label code block javascript counter start zero counter end number.html let's see here root threshold do number 100 what is it going to do on the front end does it basically just count up to 100 so am i just changing this number is that all you do let's change it to 85 and see if it counts up it briefly flashed 85 let's see if it stops there yeah it does wow that's cool that's super cool so all you got to do is change the number there i was thinking you would have to go modify that javascript but instead all you have to do is just simply change the number very cool i am a fan now i did notice in the code over here that you also have the counter start zero and then the counter speed 50 so maybe let's bump the speed up to like 75 and then let's start the counter at maybe 25 so you could create some animation on the way that those counters start to increase yeah so there it goes it started from 25 it doesn't really feel all that much faster to be honest but that's cool and then how is that ring color actually being determined is that a border ring inner top right bottom left number percentage label and sub label circular counter outer border says it's set but i don't see that is it the css of this no bg fill is background color class um again where is that coming from are just two circles i think one on top of the other oh okay so the outer circle says its background color is that so then it's not a hover state attributes data fill color black but it's not black it's that it's that color so axle circular counter is oh it's just color so axle circular counter so it's typography there it is okay so it's the typography color on that particular class interesting so then we'll change it to something that looks completely different so right now it's kind of that aqua color so then let's just switch it to like blue well not blue because that's just a slightly different variant of what we already had let's go orange save that guy and then refresh cool and now it uses orange very very neat strata says i think you can put the time for the counting like two seconds from start to end oh okay so counter speed is that 75 counter star i don't understand what the speed is though what if we wanted to go way faster i'm going to do 500 and crank that bad boy oh so then refresh oh okay so the bigger number makes it go slower so i don't i don't understand what the interval is though is it like milliseconds maybe it's milliseconds i guess that would make sense that's fast okay well cool so there we go we figured out how to change where the counter starts and also the counter speed so 50 is pretty reasonable and then counter start there is 25 so then what i want to do is duplicate this a couple of times and then i'm going to change these to space around let's play with these a little bit so our circular counter here this one we're going to change from orange which actually i don't think that was the right one so our typography from orange let's go blue of some kind and then i want to change this one to start at 0 and then maybe let's change this one to 100 and then this one this one here let's expand this guy go to typography and instead of oh wait i'm changing the class shoot i didn't mean to do that let's go to let's go to purple on that one and then i'm going to change the timing function here so we're going to go counter start [Music] let's just go with 0 and i'm going to change this one to 150 and then i guess i need to go back here real quick and change these colors because i was doing it on the class which you might want but in my case i don't want that so red that'll be fine all right now i just want to see what this looks like oh i changed the timing function it's super slow but at least you can kind of see it so now you can have multiple color bars you can make it stop at different places and change the timing function so that's pretty cool yeah neat definitely worth playing with all right moving on next up in our exploration here we have circular counter number counter i'm assuming is going to be essentially the same thing let's take a little look see here so number counter code yeah so counter start is zero counter speed is 50 and then you're just going to change this guy so i've helped 1 500 and i don't know 155 000 clients let's see how long it takes that to load there we go cool so that's going to take a super long time to load i didn't think about that but it is working so yeah neat next is the switcher now this one's cool because this would be like for your pricing plans and i don't know i don't know if stratos you use this in your recent video on the wp grid builder i can't remember but i think there's i think there's annual and lifetime plans for them but that's a perfect example of where this would be useful so you have a switcher for yearly and monthly and then these are going to be you know whatever you call them like your monthly plans and then these are going to be your yearly plans which makes it super flexible so let's just take a look at how it looks on the front end so then if we switch this guy yep looks good so there's a nice switch component looks kind of like the ios switch which is cool okay you copied the pricing tables only gotcha i was there for that video but i couldn't quite remember um yeah so let's see switch your code the javascript here so it's toggling an icon between active and then yeah so basically just adds that um basically just adds that active class i got a uh one eye on the time here let's see [Music] all right anyway so that one's kind of cool these are basically just divs nothing really special here in terms of layout so you can easily modify this stuff put it whatever you want inside of it since they're just regular oxygen divs which is pretty cool and then switcher back to top button not sure how this one is executed so that one floats down in the lower right which is really cool back to top code what is it doing here so scroll distance is 300 set this to the scroll distance at which you want the button to appear so that's neat and then it's looking for on scroll scroll distance window scroll to top okay so it's just going to do it for you automatically so let me delete this real quick and then we'll click our actually let's go all the way down and then let's click our back to top and oh it took us there i just didn't even notice it happened so fast i wonder how you could apply a transition oh okay so it works but it just takes you to the pound sign top yeah neat all right and then this is going a bit slower than i anticipated but image comparison let's take a look at this guy real quick um actually i don't want these counters really anymore so delete these guys all right so is it oh it is a global function to slow it down um i guess i guess maybe so now this is cool because i see this a lot i've been asked about these before how do you do a before and after image now it's here another use case where the um the composite elements are extremely cool comparison code i don't know what any of that means so i'm gonna leave it alone but basically we have a div on the left and then comparison icon before label and after label so you can change all of these if you want it to be like you know before renovation and then after renovation you can just type in that stuff pretty cool and then are the images inside of this class it looks like it is i don't think that actually has any impact do we have any interior shots of buildings here not really we'll go with this one before oh i want to change the cover let's go to cover and then this one over here let's find another picture of a house real quick and then we'll do that looks awful i'm not going to do that all right so let's take a look at how that looks on the front end perfect looks really nice i like that quite a lot that one's really neat and how does it look on mobile i wonder does it work uh my page is super jacked up but it looks like it does work just fine on mobile sweet all right let's see setting oh oh oh that um yeah i guess you could use the built-in scroll to hash links yep probably so image comparison and accordion is another cool one all right i'm going to get rid of this image comparison because it's taking up some space here so we have our accordions and these are cool because one toggle closes the other which i like quite a lot it keeps your page really compact i hope oxygen v4 does have lasers that would be pretty awesome um so accordion row we have just a div inside of it inside of that div is the icon and the actual text for the accordion name now the icon here is actually it's a chevron down with a hover effect which i believe takes place in the code yeah so axel accordion icon it's basically rotated 180 degrees and then on hover it flips that other direction which is cool one thing that i was able to do that i don't have time for today unfortunately is took this accordion and basically took one row and one content and stuck them inside of an acf repeater and then i was able to take that and turn it into like a dynamic accordion that like a client could go in and edit on the back end and not have to worry about you know messing with oxygen so that was pretty cool you could definitely keep that in mind uh let's see next up is the wordpress tab so the mega menu i already have an entire video on so unfortunately i don't have time for that today but um that is really cool so if you're interested in how the mega menu works and how you can get it to go from looking like oh not that i'm going to get rid of the accordion here make it look like this make it go from this to an entire you know like a cool looking mega menu like the one that exists on evernote then you can go check that other video out on the channel here and then i think that brings us to the end of the mega menu or the composite elements with the mega menu so there's a ton of really cool stuff here it's nice to have taken the time to look at how some of this stuff works because i played with quite a few of them but not all of them really in depth so it's nice to see how all this stuff works in particular some of the ones that kind of surprised me were the number counters and the section indicator it's pretty cool i like that and then image comparison is another cool one to have so i have made myself a list of other tutorials to make alan i definitely agree the accordion repeater is one that we can do uh let me know if you guys prefer to see this stuff like if we're gonna set up the accordion repeater for instance would you rather see that as a live video or as a proper you know like tutorial edited video uh i enjoy these lives and hopefully you guys do too so as always i appreciate every single one of you watching there's been a lot of you here the entire time and i sincerely appreciate that um so i do have to run i have some client work i need to get to and an appointment later today so i need to run for now but as always thank you guys so much for watching and i will see you in the very near future bye for now

Channel: Permaslug

Views: 4,440

Keywords:

Id: 4CpkVKKV-tY

Length: 94min 0sec (5640 seconds)

Published: Thu Feb 25 2021