Building a Hero Section With a Full Screen Off-Canvas Section using Oxygen Builder.

hey what's up this is temura blazis and this is another oxygen builder tutorial before i start i would like to thank you so much for the positive comments and likes and also i want to mention that the purpose of my tutorials is to level up your css skills and make you more confident with topics like css transforms and transitions so you can use them effectively in your oxygen builder projects so in this tutorial we are going to learn how to create this hero section with a menu icon which is just made by css and an off-campus section which has really cool css transitions so without further ado let's get started in this tutorial let's start by adding a section i'll give it a class of hero to the advanced size and spacing and i will set the height to 100 vh which is the viewport height now i will go to the background let's add the background image then i will set an overlay color of this dark blue and i'll reduce the opacity to 60. make sure that the background size is cover no repeat and the position of the background is 50 from the left and 50 from the top just to make sure that the background image is centered now i will add our heading here i will give it a class of hero heading change the text color to white and the size to something like 80 80 is fine then from the typography i will set the text align to center i will go back to the to the hero section then i will set the layout to vertical center and from the layout panel here i will set the justify content to flex end just to make sure that it will be at the bottom of the page now uh if i back to the design file here you will see that we have a vertical line here so we will add this vertical line i will add an empty div i will give it a class of vertical line from the size and spacing i was i will set the the width to one pixel the height to 60 pixels and the background to white and as i said before that the empty divs in the oxygen editor any empty has a minimum width and minimum height of 80 pixels so to overcome this we have to add the the pseudo element of empty so add new state empty and i will set the minimum width and height to 1 pixels so as you can see we can have now the original width of 1 pixel and the height of 60 pixels one last thing to do is to add a top margin here which is at least 25 or 30 that's it save now let's preview the front end here's our hero section with the heading and the vertical line now let's add the header i'll select the body then i will add div i will give it a class of header and i'll change the tag to header i'll go to the advanced size and spacing and i will set the width to 90 percent then the layout i will make the position absolute the top zero the left and right zero and to make this header centered we have to go back to the to the size and spacing and set the margin of the left and right to auto so as you can see it's now centered one last thing to do here is to add a padding of 40 pixels from the top 60 from the left and right and also 40 from the bottom and to make sure that this header will be on top of all the other elements in the page we have to go to the layout and give it a z index of 2. that's it for the header now let's add the logo as you can see here in the design file we have the logo and we have the icon the menu button i will select the header now and i will add a link grabber i'll give it a default for the url for the home page then this link grabber i will add an image inside this link grabber then i will select the logo from the media library that's it now i will add the the menu button this menu button i will add the menu button i will select the header then i will add an empty div inside this header and as you can see the the layout of the header is set to vertical i will back to the header and change the layout to horizontal the vertical alignment to middle and the horizontal to space between so as you can see we have now they have the logo here and the menu button here i'll select this empty div and i will give it a class of menu button i'll go to the advanced size and spacing and give it a width and height of 40 pixels now i will add the menu bars or the lines as you can see here in the design so the idea is to to to make uh this three lines we will create one empty div with uh with a width of percent and two pixels then we will create the other two lines by using the pseudo elements of before and after so with one div we will create this uh icon so okay i will select the menu button here then i will add another div inside i will give it a class of menu bar so this menu bar will be i will go to the size and spacing will be a hundred percent width and two pixels height i will go back to the background color here and i will give it a white background and because if we we are going to make the pseudo elements an absolute position so we have to make sure that this menu bar has the position of relative that's it now as you can see now we have we set the width and height to to two pixels and hundred percent but still it takes the default uh 80 pixels of the empty div so again to override this we have to add this is just for the back end it's fine in the in the front end but for the back end we have to add this so we can see the actual look of this bar so i will add an empty div here empty state sorry then again i will set the minimum width and height to one so as you can see now we have this line now we have the first line and to make this line in the middle i will select the menu button and change the alignment to vertical to middle so you can see now we have the first line in in the middle if i save and refresh now we have the first line here okay we will create the other two lines by using the sudo elements so i will select the menu bar from here i'll select the menu bar then i will add the before and after suru elements the first thing i'll start with the before i will go to the advanced size and spacing the same thing i will set the words to 100 percent the height to 2 pixels then i will go back to the background and set the background to white and i will go to the layout and make the position absolute to move this up we will go to the to the effects here then the transform then i will add the translate transform and i want to move this up in the in the y axis not in the x and the y axis i want to move it up so to move it up you have to give a negative value of 10 pixels save refresh so as you can see now we have the second line above which is the before sudo element i will do the same repeat the same process with the after sudo element exactly the same i will go to the size and spacing set this one to 100 the width 200 pixels 100 the height to 2 pixels then i will go back to the background i will give it a white background then the layout i will set the layout to absolute then finally i will go to the effects transform and move this before uh after sudo element below the original menu bar to move it down i will select translate and in the y axis now i will give a positive value not negative because negative it will move it up positive it will push it down uh of 10 pixels yes translate y 10 pixels save refresh so as you can see now we have the three lines of our menu button uh if you notice now if i uh hover over this uh it's it's a normal cursor i want this like a hand cursor so just to indicate that this is a clickable area or an active link i will go back to the menu button the menu button the container the parent i will go back to the menu button advanced then i will go to the custom css then i will add this property which is cursor pointer save refresh so as you can see now we have this hand pointer or a cursor just to indicate that this is a clickable link or clickable icon then now we will add the the hover effect to our menu bars if i go back to the design if i preview the design now you will see that when i hover over this the before and after lines will move back to their original position be like this with a transition so let's do this i will select the uh the menu button here in this case i will select the menu button so when i hover over the menu button which is 40 pixels width and 40 pixels height the menu button the parent i want to add or i want to target the the before and after elements of the menu bar when i hover over the menu button so to do this i will select the menu button then i will add a custom state here i will go to the states at custom states then when i hover over when i hover over the menu button i want to select the before sudo element of the menu bar so space dot menu bar before so this line when i hover over the menu button i will select this one and change the css properties of this class click ok then what we want to change because we we moved this 10 pixels up we want to return it back to its original position i will select advanced here we can from the effects and from the transform return to zero but as i mentioned in my last video that there's a little bug in the oxygen builder when you set the uh the transform property of translate back to zero it gives a new it gives you an empty value so we will add this manually by going to the custom css then i will type transform transform property then the value will be translate y zero okay i will do the same thing i will add another custom state to the menu button to target the after element of the menu bar so add state on however when i hover over the menu button i want to change the menu bar the the after element of the menu bar so menu bar column after the same thing i will go to the custom css and make the transform we translate y back to zero so if i hit save now and return to the front page or front end when i hover see when i hover the before and after bars return to the original position one last thing to do is to add a transition when we add a transition we will have this uh smooth move or smooth uh hover effect so to add a transition we will add a transition as you you will add transition to the to the before and after pseudo element elements and to the menu bar and in this tutorial or in this video i'm going to use the transition in in a lot in many on in many elements so instead of adding the transition to each and every element uh i will create um a modifier class or a helper class just to perform this task this which is the transition so to do this our i will select the menu bar then i will add a custom here class and give it the name of transition to do this i will go to the advanced effects transition then i will set the transition to something like 0.4 seconds the timing functions to ease the css properties uh you can write all which will animate all the css properties but it's better to write exactly what do you want to animate uh it's better for the performance because it's you know when you tell the browser to animate two or three properties or five properties it's better than telling the browser to animate all the css properties i know already that i'm going to animate the the uh the transform the opacity and the background that's it no delay so this is it for uh for our uh transition and speaking about the timing function uh you may notice that i'm just using ease or easing out or ezen let's let me show you a website here called easings.net this website will show you some of the default examples of the easing or the timing functions you can preview the timing function of some of the default values here and if you want to create your own your custom timing function you can go to the which is called cubic bezier you can go to the cubicbezier.com here and you can play with the handlers here just to create your own uh movement or your own timing function and you can test it here by against the ease or the linear you can test your function here and if you are satisfied about the result you can just copy this line and add it to the timing function so i'll return to the easings.net and i will pick this one instead of just ease i will pick this one and add it as a timing function so this is the default this this the transition class will add the transition to the default state and in some cases we want to add a transition to the sudo elements to the before and after so to make sure that this helper class will work on all the scenarios so we have to add the before and after the transition to the before and after so the same transition class here i will add the before again i will add the same values 0.4 the css properties and then the i'll copy this one which is the timing function and i will add the same thing to the after here 0.4 and i will copy this function so now as you can see our transition class works on the original and the before and after sudo element if i save now go back and refresh you'll see now we have a perfect transition to our menu icon or menu button now let's go back to the uh to the editor here and let's add the of canvas section if i go back to the design here you can see that we have this of canvas section here if i preview the design you will see that when i click on the menu i will have this full page or full width and height of canvas section so i will create this i will select the body here then i will add a section i will give it a class of off canvas then i will go to the size and spacing i'll set the height to 100vh then i will go to the layout and make the position fixed i will set the top to zero the left to zero the right to zero then i will go back to the to the background and as you can see in the design here i have a gradient background so i will add a gradient background i will go down here to the gradients i will add the first color then the second color of the gradient then i will move it or give it a an angle 45 angle like this save refresh we have now or off canvas section like this uh if i go back to the design you will notice that there is a line here in the middle there is a line so i will add this line as a pseudo element to to the section to the off canvas section so i will go and add the before suit element here then i will go to the size and spacing set the width to 1 pixel the height to 100 then i will go back to the background and set the background color to white and reduce the opacity to something like 15 is fine then finally i will go to the layout and make the position absolute the top to zero and to to to make it uh in the middle here in the center i will give it a left of lift position to 50 percent so you see that it's now in the center of the off canvas file preview now you'll see that we have this line now in the middle of the of canvas now let's go back to the editor and add content to the off canvas section here so as you can see in the design here we have a menu and we have uh this contact information so to add this i will select the uh of canvas section uh then i will add i will add columns okay two columns here then i'll go back to the section and make the layout horizontal and middle just to make those two columns in the middle uh i will change the let me change the the width of the two columns i want extra batting between the columns so i will select each one of them and i will go back to the size and spacing and change the width to 40. i'll select the second one the same thing 40 then i will select the parent here and go to this to the layout and make the justify content um space around like this or space between now i will add the menu links here to uh to this the first column i will add the menu links here i will add a text link then we have four links here you can apply the same examples by the way you can apply the same example on the default menu of the of the wordpress menu or the menu from the oxygen helper but just to make things simpler i will add the links manually here so i will add a text link i will give it a class of menu link i'll change the text to about us okay then i'll go to the advanced typography i'll give it the white color the font size uh maybe 60 or 60 is fine then the line height one just to make sure that uh it will not go beyond this one means 100 of the height of this text so that's it i'll go now to the padding here i will add 25 from the top and bottom padding then finally i will add as you can see here in the design we have a line like a transparent line here in the bottom so i will add a border border bottom white and i'll change the opacity to 16 or 15. the width 1 solid so we have this line but this line on only under the the text about us i want this line to go till the end of the column to make full width so i will select the parent which is this column then i will go to the layout and add this stretch so the the uh the child element will have this stretch of full width file save now refresh you'll see that we have a full width now i will repeat this i will copy this three or four times portfolio services and finally careers so that's it save this is our menu now i want to add a hover effect but before that you can as you notice now we have a line in the last element here the last child we have a line i don't want this line because as you can see in the design we don't have this line here i will go back and select this menu link icon then i will add a state here custom state which is the last child this state will select the last child and in our case is the careers here then i will go to the last child then advanced borders then i will just remove the border set the border to none there's no line now save refresh okay fine i want to add a hover now hover effect to to this menu but i don't want to move i want to move this to the right in a smooth transition to the right but not the whole block with the line only the text inside okay if i set the move this menu link now if i set the menu link to move it will move the whole line to the to the right i don't want this i i want the the border to be fixed and only the text here to move to the right so to do this i have to wrap the text to the span so i have to select here select the text and add a span here again i will select the text add spam select the text add span again i'll select the text also add spam so now we have the menu link which is anchor tag if you see the structure here we have the menu link and we have a span inside this way we can target this span on hover so to do this i will select now the menu link and i will add this hover effect now or i will add a custom hover effect a custom state for the hover i will add custom state here i will type hover then space span so when i hover over the menu link i want to change things in the span okay i will add okay hit okay then go back to the advanced effects transform then i will move this span translate in the x direction in the x axis something like 30 30 pixels save firefresh now you will see now we have this hover effect to make it uh smooth we have to add a transition and as you can see we we created already a transition class for this purpose so i will select the span of the whole menu link only the span here the span from the from the structure panel i'll select the span then i will add the transition class to the spans here transition transition transition here and finally the last one i will add a transition here so if i save now refresh you'll see now we have this smooth transition to our menu links that's it now i will add i'll continue and i will add the contact information here and because it's a straightforward process i will just fast forward this part because it's just adding some image with text i will fast forward this [Music] um now i have finished adding the contact information to this as you can see if i save now and refresh you'll see now we have the menu and we have our contact info section uh the next step now is to activate this menu button so when we click on this it will show the the off campus section then when we click again it will hide this section so let's activate this link by adding a couple of javascript or jquery lines here we want to add the click functionality here to this button the idea here is to hide this entire of canvas section in its initial state then when we click on this button we want to add a class to the body tag we want to add a class to our body tag this class will trigger this of canvas section to show or to hide so to do that i will select the menu button make sure that you are selecting the menu button here then i will go to the advanced javascript then i will add a jquery code just a very simple straightforward code just to toggle a class when we click on this button so jquery i will select the first thing i will select the the menu button our menu button then when we click we will add the click listener or the click function when we click on the menu button we want to run a function okay we want to run this function so this is it when we click on the menu button we want to select the body our body tag jquery to select it and we want to toggle a class and let's give the name of the class which is uh in this example let's say off canvas opened so when we click on the menu button this class will be added or removed from the our body tag i'll apply the code save now let's check refresh let me just inspect here so let's focus on the body tag here our body here when i click on this see we have this off canvas opened class added to the body i will click again it's removed so this is the toggle class function so when this class exists in the body we want to show this off canvas section and when it's not we want to hide this of canvas section very easy and straightforward process i will go back now the first thing to do here is to hide this entirely in the initial state so i will select the off canvas section here then i will go to the to the advanced effects transform then i will add a transform here which is the translate i will move this entire section the of canvas section up i will hide it up so to move it in the y-axis up you have to give a minus value or negative value which in this case hundred percent minus hundred percent it means hundred percent of its width to move something entirely out of the viewport you have to give it a hundred percent okay so in this case you see that it's hidden now so we want to show this section when this menu i can click or when the off campus open class exists in the body so to do this i will add a custom selector here i will go to the manage selectors and i will add a custom selector here and which is dot class which is opened off canvas opened so when this class exists i want to change things on the of canvas section then what to change we hide it by setting the translate to minus 100 now we want to return the translate again so i go to the custom css and make the transform i'll return the translate to translate y to zero save so refresh let's test how this works when i click it shows the the off canvas click again it hides the off canvas one last thing to do is to add the transition and um in this case we already created a class for the transition so i will select the off canvas section here of canvas and i will add the transition class to the off canvas save refresh as you can see now it shows the of canvas in a smooth transition but if you notice that the entrance of the off canvas is a bit fast i want the entrance to be slower and the exit is fast like this so it's okay so to do this i will override the one of the transition classes here in the state in the class opened in the uh of canvas opened here i will return to the this selector which is the off canvas opened of canvas class section then i will go to the advanced effects transition then i will make the duration to a bit longer and the entrance save refresh so as you can see now it's it's better now it's in slow then it goes faster cool so that's it for the uh for the off canvas and for the menu button let's now add uh continue working on the transitions here so before i add the transition to the menu and to the contact information here let me just make this x icon here so when this class opened or this of canvas opened class exists i want to change this icon so to do this i will add again a custom selector here which will be active when the oh of canvas opened class exists in the body so of canvas so when we have this class in the body let's change things in the menu bar class so in our case the first thing to do here in the menu bar this middle line the the middle bar i will hide the middle bar just by setting the the background to transparent i set the background to transparent save refresh so as you can see the middle part now disappeared just by setting the background to transparent now what to do i will rotate the before and after bars here i will go to the uh the same the same i will add the before state here then i will just go to the [Music] to the effects transform then i will add the rotate of 45 pixels this is for the before and i will go to the after i will do the same and i will add the rotate of minus 45 okay save refresh so this is the normal state of the for the button when i click as you can see we have now this this close or x icon cool let's continue now uh adding the transition to the menu so when we open i want to have some kind of animation to the menu and to the uh contact information okay i will go back now to the uh to the menu what want to do now i want to add this transition as i said the transition of the menu i will go to the structure here then i will select the text link what to do i want to hide and move the menu links here those menu links and the initial state and when we click on this when this off canvas open class exists we want to add some animation and animation to the menu links here so to do this i have to set the initial state of the menu link this is the menu link and its initial state i will go to the advanced effects then reduce the opacity to zero then i will go to the transform and move it down like move it down 100 percent of its width so 100 percent of the link with height sorry height okay uh that's it this is the initial state now what i want to do i will go to the custom selectors here then i want to modify the menu link when we have this off canvas open open class exist so to do this i will add custom selector here and i will say of canvas opened then i will target when we have this class i will target the menu link i'll target the menu link so the first thing to do here is to uh return i'll go to the effects i will return the opacity to one then i will return the transform translate y to zero okay then i will add a transition to this process which is the 0.8 transition let me check now save refresh so when i open this actually it appears on the same time with with the uh the same time this off canvas section it uh this this transition takes the same time exactly runs at the same time with the transition of the off canvas so we have to set a delay here so i will if i added a delay here of let's say one second save refresh we have this delay but what i want to achieve here i want not the whole block to appear at the same time but i want each and every one to move uh with different times okay so to do this i will go back here i will just remove this delay then i will target each and every one of this menu links so i will tile we have four menu links now i will target each one of them by adding a custom state here i will just add a delay just change the delay i i'll go to the custom state here add state then i will target the first one for example use this nth child and child will will select the first one and child one will select the first item or the first menu link then i will give it a delay exactly the same delay of the of canvas section of canvas section takes like 0.8 seconds to to finish the transition so i will make the delay exactly 0.8 then i will select the second one here which is the nth child 2. i will add one fraction 0.9 the delay again i will add the fourth one a third one which is three and child three the third menu icon i will make it now one one delay one second then the last one is the fourth menu link i will add the delay of 1.1 this way we will make sure that not the whole menu block will have the same transition at the same time but there's a delay between the links fire refresh now if i and select we have this entrance cool so one last thing now we want to uh animate this one this contact info block we will do the same thing exactly i will go back now to the structure here then i will select the this menu block this is the this is the div that contains all the contact information here so i will give it a class of contact info this is the initial state of the class so i will just go to the advanced effects again i will set the opacity to zero then i will go back to the transform here and i will add something different not translate but scale i will reduce the size to something like 0.7 and that's it then uh i will add a custom selector now the same thing i did here i will add custom selector which will trigger this contact info when we have this off canvas opened class exist again i will hit add selector then of canvas opened that's it what to do here i will return the opacity to 1 then i will return the scale to 1 also then i will add a transition of 0.8 and let's say i want this animation or this transition to run after the last one here the last menu link here the last menu link the delay of the last menu link was 1.1 seconds so i will give this 1.2 so i will make sure that this will run after this one so the delay here will be 1.1 to save refresh as you can see guys we have finished this tutorial now we have created this hero section with a custom menu just by using css menu button and we have this very cool of canvas section if you ask me about the responsiveness it's very easy i don't want to make this tutorial so long so it's so easy to return this into in the of canvas when we have something like less than 768 you can just make this vertical this layout vertical so the menu will be in the top and the contact information in the bottom and this line you can change the top and left positions of this line from the top make it fifty percent from the left make it zero so it will be uh horizontally and that's it it's very easy to uh to to make this responsive so i'll keep this task for you guys at the end of this video i hope you'll like it and if you do please let me know in the comments and see you on the next one thank you

Channel: Taimur Aziz

Views: 5,170

Keywords: Oxygen Builder, WordPress, Image Reveal, CSS

Id: tRkHTqH2nLM

Length: 48min 21sec (2901 seconds)

Published: Thu Mar 18 2021