Full Screen Menu Elementor Pro (background shifting!!)

in this video i'm gonna show you how to create a beautiful background shifting full screen menu and we'll do all of this with elementor pro and no additional plugin hello i'm your host casino from casino.com i'm the digital alchemist and let's take a look at what we're going to build today so as you can see i'm on the desktop version and when i click on the hamburger icon this is our full screen navigation and as you can see when i hover over the elements the background is shifting okay now let's take a look at the tablet version well obviously here there's no hover state unless you are using the apple pencil or any kind of similar pencil for any other device but most people won't have the hover feature so when you click on it for a slight moment you will see the background shifting and then it will go to the page and the same goes for the mobile version as you can see when i click on it a change of background and then once again in the final demo we'll link to the appropriate page now in case you're wondering it works on the mobile navigation too but more about that later okay first of all let's give credit where it's due because for this tutorial i've used the code from ivan grozdich that i've just slightly modified okay next let's look at what i've been using to create this project so i'm using the astra theme the free version so you may as well install it if you want to follow along and then in terms of plugins i'm using elementor and elementor pro and if you're serious about web design and you don't have elementor pro yet you'll find a handy link in the description below now the only reason why i recommend elementor pro is because i absolutely love it and recommend it all the time and it gives a little kickback if you purchase through my link and that my friend allows me to keep on creating free content just for you okay next we need to optimize our images and that's very very crucial because as you can see the full screen menu is pre-loading each image so you really want those images to be top-notch optimized now the good news is that wordpress now natively accepts the webp format and if you don't know the webp format is a very very lightweight format so let me show you so now i'm in affinity photo but you can use photoshop the gimbal whatever software you want to use and i'm just going to save for the web and right now i'm going to save a jpeg with 100 just to show you the initial size so i'm going to export and i'm going to call it one original okay so now let's take a look so as you can see the original is two megabytes that's a lot that's way too much if we have five images for the five items in the menu that means 10 megabytes and that's a no-go okay next i'm going to use an app called squoosh actually it's a website so it's squish.app it's a website made by google i'm just going to drag the original image and then in the drop down i want to select the webp format do not select webp v2 because it's unstable so web p and then i want 80 of quality and i can see the before and after and to be honest i don't see any difference and as you can see i've saved the whooping 94 percent because now i'm down to 120 kilobytes so let me save this and i'm gonna go to optimized okay and as you can see the original jpeg is 2 megabytes and the optimized image is 120 kilobytes so make sure you do the same process for all of your images especially the ones that need to be in the full screen navigation okay first of all we want to take care of our header and footer and i'm going to show you why so right now this is what i have so this is a page with no content and as you can see you see the original header and footer from the astra theme and we want to change that so for that let's go to wordpress and then you want to go to templates theme builder next you want to click on footer so we'll start with the footer and click on add new footer and i'm going to call it new footer click on create template okay we don't want any of that now i'm not going to spend too much time on the footer because this is not the focus of this tutorial so basically i'm just going to copy a footer i've already made and i'm just going to paste it and i'm quickly going to edit it section style and i'm just going to change the main color and then i click on publish it's going to ask me to add a condition so by default it says include on the entire website and i'm just going to save and close okay and now if i go back to my page i refresh the page as you can see i have my new elementor pro custom footer and now we need to do the same thing for the header okay so back in wordpress once again i want to go to template theme builder then i want to click on the header tab then click on add new header and i'm going to call it new header click on create template okay and we don't want any of that so i'm just going to close this click on the plus sign we're going to select one column then where it says content width i want it to be full width the height i'm just going to leave it as it is next where it says html tag i want to change the default html tag to header next i want to go to style click on background type and i'm going to pick the black color for the beginning because i'm going to change that in a moment but just right now so we can see what we are doing next i want to click on the border sub tab and then where it says border type i want to select solid then i want to unlink the values and i want to give it a border of one pixel and for the color i'm going to pick this color code that you see on screen so e7e0 next i want to click on the advanced tab and then i'm just going to unlink the margin values and the same for the padding values and for the padding i want to give it a top padding of 10 30 on the right 10 at the bottom and 30 on the left and next i want to go into mobile mode and link the values and now it's going to be 10 at the top 20 on the right 10 at the bottom and 20 on the left hand side okay next let's go back into desktop mode and then i want to select my column by clicking on the icon here or i can use the navigator and if you don't know the navigator icon is right here at the bottom left corner and when you click on it you can toggle it on and off so with my column selected where it says widget space i'm going to type zero and next where it says vertical align i want to change this to middle next click on the style tab and then background tab i want to select classic and now you can pick any color and make it transparent so drag the slider all the way to the left and next i want to click on the advanced tab and i'm just going to unlink the margin values and the same for the padding values okay next i'm just going to right click on the icon for my column and i'm going to click on duplicate so now i have two columns and next i'm going to click on the widgets icon and i'm just going to look for an image it's right here so i'm just going to drag an image in the first column then i'm going to click on the image and i'm going to locate my logo so i'm going to pick this one click on insert media and next i want to align it on the left where it says link i want to select custom url and then click on the dynamic tags and i'm just going to select site url next i want to click on the style tab and then where it says width i'm going to pick the pixel value and i'm going to select 35 pixels okay next once again i'm going to click on the widgets icon and i'm just going to type i can in the search engine and then i'm just going to drag and drop an icon widget in the second column okay so first of all you want to click on the icon and i'm going to look for grip grip lines i'm going to pick this one click on insert next i want to align it on the right hand side and now we need to link it but we can't link it because we haven't built the pop-up yet so we'll have to come back to this later next you want to click on the style tab and then for the color i'm going to pick white and then on hover i'm going to pick a light gray and next where it says size i'm going to enter 30. okay let's take a look in responsive mode so i'm going to click on the tablet icon so it's looking good and let's take a look at the mobile and we need to change something here so by default let's go back to tablets let's pick our first column then go to the layout tab and let's make it 50 and let's do the same thing for the second column layout tab and 50 percent okay and now let's go back into mobile mode let's do the same first column 50 and second column 50 okay looking good so let me click on publish okay it's going to ask me to add a condition click on add condition and by default it's going to add it on the entire website which is what we want in this case click on save and close okay and if i go back to the front end let me refresh the page and as you can see it's working fine we have our custom header and our custom footer from elementor pro now as you can see in the original demo it's a transparent header whereas what we've built now is a header with a solid black background color so to fix that we need to select our section either by clicking on section in the navigator or by clicking on the six dots right here on the section itself so once you've selected our section we want to go back to the style tab and then where it says color we want to open the color palette and then we're just going to drag the opacity slider all the way to the left and next we want to go to the advanced tab and where it says bottom we're going to input a negative value y negative because we want to shift the content up so it's really going to depend on the height of your own header and that's going to depend on your logo but for this example it's -93 so i'm just going to type 93 and put the minus in front and then for the tablet and milling the values is going to be -73 and then for the mobile let me link the value and once again it's going to be -93 so like i said you will need to play with the margin values depending on the height of your header okay next you want to click on the motion effects sub tab and where it says sticky you want to select top and make sure it's sticky on desktop tablet and mobile so once you're done make sure you click on update and now we are ready to start creating our content okay next let's start creating our content so in wordpress you want to go to pages add new and then i'm going to call it my page and because i'm using astra i'm just going to disable the title then click on publish twice and then i can click on edit with elementor okay the idea is that you're going to create one page for each item of the navigation and it can be really simple this is just to see the difference when you click on the links so i'm just going to create a simple one with one column then i'm going to make it full width then for the height i'm gonna pick a minimum height of 100 vh next for the style i'm going to pick a black background and then i'm just going to drag a heading and i'm going to call it home and i'm just quickly going to change the color and the font size as well as the font so that's the first one called home so let me click on updates and like i said basically you want to repeat the process for each page that you want to link to from the menu now as you saw in the original demo i want to make it look a little bit nicer so initially in a previous tutorial i decided to recreate an awards winning website and it went a little something like this and then i created a fake brand and decided to make the website match the new brand and it went a little something like this [Music] okay now that we got everything that we need let's start creating our full screen menu okay next in wordpress you want to go to templates pop-ups and next you want to click on add new make sure it's a pop-up in the drop down and i'm going to call it pop-up menu shifter and click on create template okay so we don't want any of that so first of all i'm going to click on the plus sign then i'm going to select one column next where it says content width i'm going to select full width and next where it says height i'm going to pick a minimum height of 100 vh next i want to click on the advanced tab and i'm just going to unlink the margin values and the same for the padding values next i'm going to click on the widgets icon and i'm just going to start typing html and i want to pick this one here so it's the html widget i'm just going to drag it and right away i'm going to right click on the edit icon and duplicate next i'm going to select my first html widget icon by clicking on the edit icon and next i'm going to copy all the html code that you'll find in the companion blog post and of course you find a link to this blog post in the description below so now i can just paste it where it says html code let me paste all of this okay and next i want to do the same thing but with the second html widget but this time i'm going to paste javascript code so make sure you have your second html widget selected and once again i'm going to go and copy all the code but this time the javascript code so let me just copy this and once again i'm going to paste it so now i've got my javascript code pasted okay and next i want to take care of the pop-up settings so to access the pop-up settings you want to click on the gear icon at the bottom left corner of the window click on settings and first of all where it says width i want to change the width to 100 vw next where it says height i want to change it to fit to screen now for the content position it should be on top the horizontal and vertical position should be in the middle i don't want any overlay so i'm going to switch this off and i want to keep the close button now where it says entrance animation i want to select fade in and for the exit animation i want to select fade out and for the animation duration i want to type 0 comma 2 and next i want to click on the responsive icon and for the tablet animation i'm going to select sliding right and for the exit animation this time i want slide out right and next i'm going to choose the mobile version and even though it's already picking this from the tablet version just to be on the safe side i'm going to pick sliding right and once again for the exit animation slide out right let's go back into desktop mode and next i want to click on the general settings sub tab and where it says html tag i want to select header next i want to click on the style tab and then select a background type classic and i'm just going to pick the black color and next i'm going to click on the close button sub tab and for the color i'm going to pick a gray color if you want to know the color code this d2 c7 c7 and then for the size i'm going to input 30. next i want to click on the advanced tab and then where it says disable page scrolling i want to turn this on and next i want to click on the custom css sub tab and once again i want to go and get the code from the companion blog post but this time the css code so i'm going to copy all of this then go back and i'm just going to paste it and as you can see now we have our menu fully working okay so let's save our work by clicking on publish so it's going to ask you where do you want to display your template click on add condition you want to show this on the entire website then click next and once again click next and then click on save and close okay we're going to edit our menu in a moment as well as change the images but right now we want to go back to the header that we created previously and you want to make sure that you select the navigant so it's the icon in the second column that you can see right here now you can't really see it because it's white on white but in case you are lost just go to the navigator and make sure you select the icon okay once that is done you want to go to the content tab and then where it says link you want to click on the dynamic tags icon then you want to go all the way down to pop-up then click on the wrench icon click on all and then in the search engine you can start typing the name of your pop-up mine was popup shifter so i'm just going to type shifter and there you go so it's found it and now i can just update my header okay now that we've linked our header let's test it and if i click as you can see it's working fine okay now how do we edit this full screen navigation so first of all you want to make sure that you select our first html widget which is just about html and just to make things clear let's rename the second one to js okay so make sure you select the first one okay and now we want to make the space where we work on the code a little bit bigger and don't be afraid even if you don't know anything about code don't be scared all you need to do is copy and paste and it's just about logic so fear not my friend so as you can see when i hover over each menu element it actually preloads a section so all of these are sections that are pre-loaded and you can see it here in the code so this one is section number one this one is section number two number three four five and so on now let's scroll down to the very bottom of the code and just before where it says page cursor there is a chunk of code here this one here and this is where you actually change the labels for the menu so let me zoom back out so i'm just going to change the first one to home and as you can see it says home but you can see it right now because i need to save the page and refresh but if i leave it like this it's not going to work well so let me show you let me update and now let's refresh on the front end now let me open and as you can see it says home but in the background and then there's menu so let me close this and let's go back so where it says home we've changed it as you can see but then right next to it there is data hover and we need to change it here too so home and home and you want to do the same thing for each of the menu item so you see the second one i made it easy for you it's called menu2 then menu three four five so we're gonna change this so in my case i'm just gonna quickly change it okay let me zoom back out let me click on update and now if i go back let me refresh then let me open the menu and as you can see now it's working fine now i don't know if you can see it here but there is some text so let me change let me pick another color this one here is easier to see so basically the same label that we use we can put it here with an angle and for that we want to go back to the very beginning of the code as i told you each of these blocks are sections and basically you see here menu 1 then menu 2 3 4 and so on so i'm going to do the same thing i did earlier on with my menu names okay let's save our work and then let's go back and refresh okay and now well you can't really see it it's going to be easier when we change the images but it's updated the text on the left-hand side now it's working fine but let's say you want to add a sixth element in the navigation so you need to identify each section and then i'm just going to pick the last section so the fifth section i'm going to copy and then i'm just going to paste it and i'm going to change it to menu 6 and then i need to go all the way down what we did earlier on and this time i'm just going to copy from li to the closing ally so let me copy this and then i'm just going to paste it and i'm going to give it the same name so menu 6 and as you can see now it's here in the navigation and then don't forget where it says data hover we also want to change this to menu 6. okay let me zoom back out click on updates and now if i refresh as you can see we get our menu number six now i actually don't want a six element in the navigation so i'm just going to remove the last node and the same thing for the section so i'm just going to select the whole section and just remove it okay now how do we link from these menu items so as you can see here at the very bottom of the html code we have our ul tag then each ally tag is a menu item and then you see where it says ahref this is where you can change so for example for home i can put a url here so let me show you let me pick the viking one and then where it says href between the quotation marks i'm just going to paste a url then let me zoom back out let's click on update okay now let's go back let's refresh okay and now if i click on viking oh what a coincidence it's my youtube channel so if you love web design make sure you subscribe and smash the notification bell so that you don't miss anything okay so you get the idea and you want to do this for each menu item and ideally you want to link to internal pages of course which i will do in a moment now how do you change the background images and by the way if you notice it seems like the background images have disappeared but it's actually working fine it's actually just here in the back office that we don't see it but fear not because it's working fine so if you want to make sure you see the images we just want to refresh the page after having make sure that you saved your work and as you can see now we see the images so once again i want to select my html widget and then at the very top of the code where it says image src this is where you paste the url for your image so in my case i've already uploaded all images to the media library in wordpress and then all you need to do is click on an image and then copy the link of this image and then come back here and then for each section you want to select the url of the previous image you want to remove it make sure you don't remove the quotation marks and then in between the quotation marks you want to paste the new image url okay so i've replaced all the images url so now let me refresh and now if i open the full screen navigation as i hover over the menu items as you can see i got my own images and it's looking beautiful now i've also changed all the links as i showed you how to do earlier on so if i click on vinces there you go let me go back by queen viking and shop now if you look at the navigation you may be wondering how do we decide which font we are using as well as how do we decide about the colors so if you want to know where you can control this you want to make sure that within the pop-up you select the pop-up settings at the bottom left corner of the window then you want to go to the advanced tab and then open the custom css sub-tab so as you can see at the very top of the file you can see the colors so you can change the colors here and then it's using an opacity so for the navigation i'm using the white color and this is the code here and then if you scroll down to line number one nine three you can see opacity 0.5 so if i put it at one it's going to be completely opaque and if i put it at zero it's going to be completely transparent now when it comes to the font i'm using the poppins font you can use any other font but you want to have a big bold font otherwise it's not going to look really good you know with the transparent font with the outline so for this if you want to change it you need to go to line number 70 where it says poppins you can pick any other font that you want to use but also on line 183 so let me scroll down as you can see here pop-ins and then line two one three so right here pop-ins okay before we talk about how we can make this even more interesting we want to take a look at what we've built so far so as you can see when i hover over each element the background shifts and it's beautiful now you may have noticed a custom mouse cursor that you can see here and then when i hover over the element it just snaps and just make it an inverted cursor so here it really makes sense because you'd never know which image is going to be in the background and if you notice i've put an overlay on the images but actually this overlay i've built it straight inside my software like photoshop or affinity photo because otherwise it might be a bit difficult to read the text and that's one of the reasons why we're using an inverted cursor here okay let's take a look at the tablet version and now that we have links let me show you let me click on vince's so as you can see he quickly shifted the background and then went to the page let me do it one more time let's go to vyqueen as you can see we saw the zoom in with the change of image because of course there's no hover here but still the effect is really nice okay now let's take a look at the mobile version and once again if i tap on a menu item is going to show me a zoom in and then go straight to the page so let's do it one more time now as i told you we can make this even more interesting and we could use this on a horizontally scrolling website and if you want to know how to do this i created the tutorial so you find the link for this in the description below but whether you're using a horizontally scrolling website or a vertically scrolling website what we want to take a look at here is the vertical navigation so if i click on it as you can see it works just as well it's looking beautiful and makes your website really look modern now if you want to know how to create such a transparent vertical navigation luckily for you as you may have guessed i've already covered that in a previous tutorial you'll find the link in the description below as well as in the card at the end of this video now there is one more thing that you can do and it's going to be the cherry on the cake and it's actually very simple because all you have to do is to give this video a thumbs up if you liked the video for you it's just going to be a split second but for me that's going to change so much for this channel now if you want more web design goodness make sure you subscribe and smash the notification bell so that you don't miss anything now i can't wait to see what you're going to come up with and maybe you want to combine this tutorial with the vertical navigation and the horizontally scrolling website now don't forget i'm trying to build the content i wish i had when i got started so i'll see you in the next one and until then take care and stay safe

Channel: Kaycinho The Digital Alchemist

Views: 2,379

Keywords: full screen menu elementor pro, full screen menu elementor, full screen menu, full screen menu for elementor plugin, elementor full screen menu, elementor pro header, elementor mobile menu full screen, elementor animated menu, elementor design, elementor design tips, elementor design tricks, elementor how to, elementor popup, elementor popup box, elementor popup menu, elementor tricks, animated menu wordpress, fullscreen menu, mega menu, wordpress menu, wordpress plugin

Id: 5B22kObI6d0

Length: 27min 50sec (1670 seconds)

Published: Thu Oct 07 2021