Horizontal Scroll Elementor Pro Tutorial

in this video i'm going to show you how to create a beautiful horizontally scrolling website by reproducing an awards winning website with elementor pro and no additional plugin and then i'll show you what it could look like with a different brand hello i'm jose casino from casino.com i'm the digital alchemist and the way this started is simply during a consulting call when i was trying to showcase a few nice websites from the awards website and then i landed on this website so let me show you so this is the website and usually i don't really do horizontal scrolling websites but this one i thought it was so well executed and it's really beautiful from the images to uh the bottles that you see here i mean everything was looking really really good and i thought maybe i should create a tutorial about this now once again it's not about stealing someone else's design it's all about inspiration and showing you the process so that you can create your own put your own spin on it and create beautiful websites and what i really want you to grasp is that you can create pretty much anything with elementor pro okay but first of all let's give credit where it's due because i've been using this code pen from alvaro trego and i've slightly modified the code 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 so first of all let's take a look at what we're going to build so the first thing we're going to do is to create a simple version but that simple version will allow you to create anything you want when it comes to a horizontally scrolling website and next i will use this foundation to recreate the original awards website and this is the demo that i've created that you see now on screen now i've had to make a few compromises but all in all it looks really similar to the original demo and then i will show you what it could look like with a different brand and different images different bottles as you can see on screen and all in all different visuals now as you can see this website uses a vertical navigation but i'll talk about that a bit later in this video now it wouldn't really make sense to use horizontal scrolling on a mobile and that's why on the mobile and on the tablet it will be a regular vertical scrolling okay the first thing we want to do is to remove the header and footer and i'm going to show you why so if you go on the front end this is what we currently have we have our header and our footer from the astra theme already created a menu but this is what we get and that's going to be a problem and let me show you if we don't remove it this is what we're going to see so we have the header here that takes some space and because he's taking that space we don't see what's here at the bottom and when you scroll he's scrolling horizontally because that's the goal right now in order to remove the header and footer we could use the canvas type for all our pages but i don't really want to do that because it comes with some drawbacks so what i'm going to do is i'm going to create a elementor pro header and the elementor pro footer and just replace the astra theme header and footer so for that you want to go to templates theme builder next make sure you click on the header tab and then click on add new next you want to make sure that header is selected and just type the name of your new header and then click on create template okay we don't want to use any of that so you just want to close this and then just click on publish it's empty but it's fine click on publish click add condition include on the entire website and click on save and close and next you want to do the same thing for the footer so go to theme builder within templates and then make sure you click on the footer tab and then click on add new next give it a name click on create template you can close this and then you just want to click on publish click on add condition include on the entire website and then click on save and close okay so now we can start creating the content so the first thing you want to do is go to pages add new and we're going to call it temp because this is not the final page and you'll understand why in a moment so create this temporary page and then because i'm using astra i'm gonna click on disable title next i click on publish and a second time on publish and then i can click on edit with elementor okay there we are so the reason why we're creating a temporary page is because once we've applied the css and the javascript it's going to be a little bit harder to edit within elementor pro still possible but not quite convenient especially at the beginning so just make your life easy do everything in the temp page first and then we're going to copy and paste some of the sections to the final page okay now we can start building the simple prototype so you want to click on the plus sign and we're going to select one column next you want to go to the left pane and we're going to make the content width full width next we want the height to be a minimum height of 100 vh and next we want the column position to be stretch okay next you want to select the column within the section so either click here on this icon or you can do it in the navigator and if you don't know how to open it the icon is here at the bottom left corner of the page so if i click on it i can toggle on and off or i can use command i on a mac or control and i on a pc now with our column selected you want to change the html tag so it's really really crucial otherwise this tutorial is not going to work i repeat it's really really crucial so you want to change the html tag to section and then click on update okay next we're going to rename our column so here in the navigator i'm just going to double click and then i'm going to call it slide 1 column column okay next i'm going to click on the widgets icon and i'm just going to drag a heading i'm going to change the text to one just make it in the middle and at this stage you just want to make it bold it doesn't really matter how it looks so let me just paste a style i've already prepared so this is what i'm going to use so let me update okay next i'm just going to collapse the column and the section here and i'm just going to duplicate it seven times why seven times that's simply because we have seven slides so slide one slide two slide three four five six and seven okay so the next thing you want to do is to open each section and we're going to rename the column that's very important for the rest of this tutorial so number two is slide two of course and you also want to change the number because here we have number one and then we want to change to number two and we want to do the same for all the other sections okay and once you're done just click on update to save your work okay next you want to go back to the dashboard but i'm not going to close this tab yet so i'm just going to open the dashboard in a new tab and then once again i want to go to pages add new and now i'm going to create a new page that i'm going to call demo and once again because i'm using astra i'm going to disable the title then i click on publish publish once again and then edit with elementor okay so the first thing we want to do is to click on the plus sign to add a new section and we're going to pick one column then on the left hand side you want to change the content with to full width and for the height you want to make it a minimum height of 100 vh next for the column position you want to change it to stretch and next and once again this is crucial where it says html tag you want to change the default to main and that's so so crucial if you don't do this the tutorial is not going to work i repeat if you don't do this the tutorial is not going to work okay once you've done that just click on the update button okay next we're gonna go back to the temp page so the temporary page so let me go back and what i'm going to do i'm going to select each column and right click on it and just copy so make sure you copy the column and not the section so once again right click copy and next we want to go back to our demo page and now what i want to do is expand the section and i'm just going to right click on the first column and i'm going to paste what we've just copied and then i can remove the first column and next we want to do that for all the columns from the temp page now you may be wondering why do we do this it would all make sense but you need to do it this way we need each column to be in an individual section whereas here on the demo page this is where the magic is going to happen we want all the columns to be within one single section okay now as mentioned i'm just going to go back to the temporary page and i'm just going to copy each column and paste it within the demo page okay so there we are we are on the demo page and as you can see now each column is stacked next to each other so you want to click on the gear icon here at the bottom left corner of the window and next you want to click on advanced and then you want to get the css code from the companion blog post for which you will find a link in the description of this video and then you just want to paste the code here now it looks like nothing happened and that's for a reason as i've told you if you forget to put the right html tag for the section or for the columns this is what happens so let me show you let's click on slide number one and as you can see html tag says default we don't want that so you want to change it to section and now if i click on the update button and then i refresh the page as you can see now we got a full screen section we need to do the same thing for each slide so let me do this quickly okay so i've changed all the columns to the html tag section and let's make sure that our section here has the html tag main okay so now let me click on the update button and one more time let's refresh the page now if i scroll it scrolls vertically but nothing happens and once again we need to add a little bit of magic so make sure you click on the widgets icon and then you want to type html and this is the widget we want to use and then i want to drag this widget just underneath the number one okay so we can see it here in the navigator so right under the heading and then we want to move this widget in column number seven now because of the css we can't really see slide number seven so i'm just going to drag the html widget in the navigator and just place it here at the very bottom just underneath the heading in column slide seven so next make sure you select the html widget and where it says html code you want to paste the code that you will find in the companion blog post and once again the link is in the description below so let me paste this and one more time let me click on update and refresh the page okay so now is the moment of truth let's start scrolling and as you can see it's working fine so let me show you the preview here and as you can see it's working beautifully okay now that we have a good foundation we need to prepare our images and make sure you optimize them for the web now you may know that the webp format can now be used within wordpress natively so i've converted all the images to the webp format it's a very light format without any visible quality loss okay so the next step is to go back to the temporary page i repeat the temporary page not the demo one at this stage so we're going back to the temporary page and then i'm just gonna look at the original website and i'm gonna try to match it looking for fonts adding the images and basically recreating the structure [Music] okay so now i have all my sections worked out and of course i made sure that it works on the tablet and on the mobile but as mentioned at the beginning of this video we're not going to use the horizontal scrolling for tablet and mobile so just made sure that it looks good on the mobile and a tablet just as i would do for any website but today we're focused on the horizontal scrolling okay so just to make things clear in case you are lost this is our temporary page let me open the navigator so this is our temporary page and now we want to go back to our demo page which is this one which has the working horizontal scrolling okay and we're going to do the same thing we did earlier on okay so next i'm going to right click and just delete this section and next i'm going to click on the plus sign to create a new section but because of the javascript and the css it's now here on the left hand side so let me click on the plus sign and i'm just going to click on one column and once again i don't know if you remember we want to select our section we want to go on the left pane and make sure that the html tag is set to main once again very very crucial okay once that's done we can go back to our temporary page i'm going to right click and copy slide column number one so copy then i go back to the demo page i'm going to expand the section i can right click on the column and click on paste okay and now i can just delete the first column okay so now let's do the same for the other slides slash columns and don't forget we want to put all the columns underneath that main section okay so we are done let me just update the page then let's refresh okay so it's now looking good but if we scroll it's not going to work that's because we need to add the html widget just like we did in the first place so for that you want to click on the widgets icon and then you just want to type html and drag this widget i'm going to drag it here in the first slide and then i'm going to expand my slide number 7 intersection column and i want to put it at the very very bottom so let me make this a bit taller and then i'm just going to drag here in the navigator so let me drag the html widget here and let me make it at the very very bottom and then with our html which is selected you want to go to the left pane and where it says html code you want to paste the code that you got from the companion blog post once again the link is in the description below so let's click on update and now let's refresh okay and now the moment of truth so let's start scrolling and as you can see it's working fine so let's take a look at the front end great and as you can see it's working fine let's go up until the end and here the effect works great now it's all working and that's great but one of the drawbacks that you should know about is the fact that if you use this tutorial then the scrolling effects from elementor won't work like the parallax so let me show you if i select my slide 1 which is a column then i go to style here underneath i have the scrolling effects and let's say i want to use vertical scroll so here it seems like it's working within elementor admin but let me use another one so let me also use horizontal scroll okay and now let me update now let's test it on the front end so let's refresh and now if i start scrolling nothing happens i mean the horizontal scrolling is working which is what you want otherwise you wouldn't be following this tutorial but the built-in scrolling effects won't work okay now let's make it look a little bit more viking shall we so for that we want to go to pages add new okay and i'm going to call this demo vikings then once again because i'm on astra i'm going to click on disable title click on publish twice and then click on edit with elementor okay so now we can start but i don't want to start from scratch so ideally you would open the temporary page and then change each section then create a new page which we have done here and then you would do the same process that we did earlier on but i want to go a little bit faster so what i'm going to do instead is go back to what we've just built so let me right click and copy then let me go back to our new page and i'm going to paste this and of course it looks awful because we didn't add the css code so let me go back to the other tab click on the gear icon advanced and then i'm going to copy the css then let me go back and let me do the same thing in reverse okay and now it's looking good so i can start editing now [Music] okay so now let's take a look in the front end okay looking gorgeous so let's take a look let's scroll and as you can see the images are really really important you really need to repair your images so here i created a fake brand called viking actually a brand within a brand so we got a vikings brand and then we got each line of whiskey so we got vinces viking and vyqueen and as you can see beautiful images applied a paint effect maybe you can see it with the compression here on youtube but i've applied a paint effect on all the images now as mentioned on the tablet it's vertical scrolling because it doesn't make sense to use the horizontal scrolling and the same is true for the mobile now at the beginning of this video i showed you this demo that features a few things that we did not touch on yet and the first thing is the custom mouse cursor that you can see on screen so for that i already created a tutorial and you'll find a link in the description below now the other thing that we did not touch on is the navigation so let me click on this so as you can see i can open it i have a beautiful full screen semi-transparent navigation now we have the same navigation on the tablet but with the slide in this time now for the mobile version i went for a top navigation instead of a vertical one because i didn't want to waste any space on the left hand side now if you want to know how to create this beautiful navigation make sure you stick around because that will be one of the next videos here on the channel and if you are watching this from the future you will find a link to this tutorial in the description below and at the end of this video so this is what we came up with and in my opinion the result is gorgeous and all credit goes to the designers that won the awards on the awards website now i wouldn't use this type of horizontal scrolling website for just anything but in this case it works really well showcasing products or maybe it's for an event that works really really well now as you saw the most important thing once you've got all the tutorial nailed is to get the right images so you really need to work and spend time on creating gorgeous images and then be creative as i mentioned this is not about stealing this is about getting inspired and knowing the process and now you can pretty much create your own and as usual sky is the limit now there's another very important thing that you need to keep in mind is that if you enjoyed this tutorial please give it a thumbs up because it took me so long to make and for you it's just going to be a split second but for me and the channel that's going to make a huge difference for the youtube algorithm so if you want to show some love now is the time now if you want to make sure you don't miss the full screen navigation tutorial i talked about as well as all the other tutorials coming to this channel make sure you subscribe and smash the notification bell so that you don't miss anything i really hope you got a lot out of this video and i can't wait to see what you're gonna come up with and 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: 10,188

Keywords: horizontal scroll elementor pro, horizontal scroll elementor, premium horizontal scroll elementor, horizontal scroll, elementor horizontal scroll, elementor horizontal scroll widget, horizontal page scroll elementor, horizontal, elementor horizontal scrolling, elementor page builder, elementor tutorial, elementor vertical scroll, horizontal page tutorial, premium addons for elementor, premium addons pro, premium addons, web design, web development

Id: AKyMQB9mABA

Length: 21min 21sec (1281 seconds)

Published: Fri Sep 24 2021