Elementor - Horizontal Scrolling Full Site Tutorial - Free Code - No Extra Plugins

hey welcome back we're going to do a site tutorial on an amazing looking website but we're then going to take it further with some horizontal scrolling thanks to the amazing code by the elemental experts okay so we took it from one of their videos and we're going to use it here so we're gonna do a site tutorial we're gonna then turn it into a horizontal scrolling website and of course we're doing this all with elemental and i hope you find it really really useful [Music] so i don't know if you noticed or not but we've already done some of our global colors it's always good to have a color palette and we've also done our global fonts now you don't have to do this but i've gone and installed railway uh as a google font yes it comes part of your elementor but if you're thinking about optimization and performance i use auto optimize to remove my google fonts and i upload them as a custom font because it's just great for performance but you don't have to do that that's entirely up to you so we've got our fonts and we've got our colors in and what we're going to do is we're going to create a um we're going to create about four or five sections of a web page and then we're going to convert that to go from vertical to horizontal scroll and it is dead dead simple to do and the code like i said is from the elementor expert and there'll be a copy of the code and you can go away and play with it one of the other things also we're going to do is we're going to add in a menu so that if you wanted to jump to another page you could do that i don't mean jump to another section within the horizontal scroll i mean you might have um page one is going to be horizontal scroll but then you might have another page somewhere else in your website like an about page or a shop page you hit a menu you know it works how menus do you hit the icon or the header or whatever and it takes you over to another page i'm going to show you how you do that as well and how you ensure that stays in place when you start to use horizontal scrolling because you don't want it to kind of you don't want to have to scroll all the way back to get to the menu now if you don't care about the site tutorial you want to jump straight to the horizontal scroll look at the time stamp in the description and you can jump straight to that section but i think you don't want to miss out on this amazing site tutorial that i've been planning to do for a while and i think it's gonna look really really good if i get it to work right let's hope i do right let's get started now whether we're doing a horizontal website or a vertical scrolling website we're gonna have to start off with some sections but the key bit is we are gonna have to ensure that the vertical height for all of them is like a hundred percent because if they are not when you're scrolling you're gonna get a little bit of a you know like a blue effect as you're scrolling like a wobble you want it to be consistent so we're going to create a section for now i'm just going to go with two columns i'm going to go in and i'm going to make this a full width for now in fact i won't do full width i like it won't be full width i'm going to go with boxed and i'm going to go with say 1 in terms of the content okay the column gap there will be no gap and the height minimum height vh100 okay sometimes people try and do fit to screen which is okay but if you do minimum height 100 it's kind of flawless when you do fit to screen sometimes it doesn't always go to the bottom and you have a little bit of a gap appear um so minimum height vh100 okay and i'm just gonna set the column position for this to be uh we'll go with middle for now okay now we're gonna start basically putting in some content like images and text so this is standard textbook elementor okay and there's loads of videos on how to do this but i will go through step by step as much as i can so that you don't get confused now we're not adding in any headers or anything like that at the moment we're just gonna straight onto the page content okay so section one we're going to give it a background image of course make sure you've optimized your images webp there's a two and a four argument against uh but i prefer webp compress convert tiny png or bulk resize photos.com bulk resize photos.com it's where i go to compress and convert them into webp format so we're going to pick our image and i've already uploaded some photos to kind of fit with the color frame we're going for and i'm going to go with this image over here okay it's a little bit busy but i'm not too fussed about that at the moment i'm going to make this a center center image i'm going to say now let's test this out okay what if we go for well if you go for the fixed effect normally you get the parallax effect when you're scrolling down so the the words go over the image because you're going to be eventually scrolling left to right that's not going to work so we'll have to add in some scrolling animation but now i'm just going to go with scroll okay so not fixed if you do fixed it's not really going to work for you repeat no repeat and in terms of sizing well we'll just go for cover okay that kind of works pretty self-explanatory really really well right let's just have a look at that we have a nice big image over there on the screen now and this is where i'm going to do a scrolling effect so what i'm going to say is that as you're scrolling now you won't see this completely in a way because well you will in a way but it'll become better when we get towards the end of the video i'm going to have a horizontal scroll because if you have a vertical scroll which is up and down which is like something like this look as you scroll up and down and it starts to move a little bit remember we're going sideways so we're going to have a horizontal scroll and i'm actually going to say that as you scroll this is going to move to the left ever so slightly so as you scroll well eventually left to right it will move a little bit not a huge amount but just a little bit there and i'm just gonna update that that is our background done okay now let's add in some content let's add in a header now my header automatically is the railway font that's why i did the global font but in terms of sizing i like to have a bit of control and power over that so i'm going to add over here i'm going to type this to be horizontal scroll webpage okay i mean this is ridiculous right i mean come on i'm really bad at thinking like what should we call our website i'm going to give it a white font and in terms of typography it's already railway rem always go with rem with your font pixels is great for images and bits of layout but rem for your font so i've gone with a 3.5 size and a 900 weight and i'm just now just going to extend this a little bit in fact i'm going to get rid of the word web page because it's kind of going over a little bit too much on my padding i'm going to give this some padding of about 20 at the bottom i'm going to go to my border now and i'm going to give this a solid border but i'm going to put zero for everything and just have a one for the bottom and i'm going to give it a white like that so now we have like a border going in but i'm not using the divider i'm now just using the border of the heading so it's kind of in line with it have a think about that have a play with it okay saves you having to put in an extra widget just to have a line in there right okay and then what we're going to do is now add in another heading in fact i'm going to duplicate no i won't duplicate that heading because i don't want to have the line i'm going to bring in another heading and this is where we're just going to put like a sub header content again like you know you have a think about what you want to put in here in terms of rem styling sizing 3.5 was the top one we'll go with a two here and in fact i'll leave it as a 500 there i think two's too big actually 1.5 yeah 1.75 1.75 we'll go with that and i'm now just going to add in a bit of tech i'm not spending a huge amount of time on this by the way okay because i really just want to get across uh what we're doing here with with this website in terms of the horizontal scroll i'm going to leave this text as it is in fact i'm just going to make it yeah just a little bit longer in terms of the text i'm going to go to the style make it white typography we're going to go rem 1.2 i'm going to leave it as a 400 now i'm going to go to my advanced and i'm going to give this some you shouldn't always do 0 zero by the way because you're adding in extra bits of code someone told me that but sorry force of habit i keep doing that um i'm gonna go to my uh margin for the right hand side and i'm gonna say 200 200 speed to march 150. no we'll go 100 100 there you go that's a little bit better right so what you're now getting is like horizontal scroll subheader content and then you've got some further wording down there and this is where you can be a little bit clever and you could straight away now putting some social sharing icons so you could either put in buttons to take them to your account so i'm going to stick this down here and you could go with the left hand right hand side let's go with three let's make them circular um we'll give them a bit of spacing like that rather than having the official color we'll do a custom color and i'm going to say the background color for this will be like that maybe i mean you might want to go for something that really really stands out and the primary color will be white and then when you hover over it so let's say they hover over it we're going to give them a completely different color and we might give them a like a blue color and they get white so when they hover over it they get this kind of like color change going on there you're going to go in and you're going to say oh i don't want youtube and you'll change this to be i don't know instagram for instance and you'll have it what you want and then you'll change your sizing you know you you you can start to have a think about your sizing and your styling remember with your social these icons here when you put in your address for where it's going to take them click on the cog and make sure it has opened you in new window otherwise they're going to leave your website they've landed them straight away they're gone which you don't want okay so just bear in mind make sure it's open in new window if you don't want to have your social sharing icons you can have share buttons as well okay so it shares your website to the world have a think about what works for you okay and i would say don't go overly too crazy with a lot of the content of the website but have a think about what you're doing now at the moment that horizontal scroll is in the middle all of that content is in the middle of the screen i have to be honest i'm not liking that anymore so i'm going to put it down to the bottom that is now too far to the bottom i'm now going to go to my column okay and i'm going to say to the column let me go to advanced i'm going to start it about 150 from the bottom so not 150. start at about 50 from the bottom okay so we when we're at the bottom of the screen but we're not completely rooted at the bottom and we're not completely cutting over the the ear of the person so that's a little bit better but if i shrink the column the line here won't be as big either so i could just maybe shrink that down a bit as well or i could just put in a bit of margin um onto the header as well but look okay so that's kind of looking a little bit better we can already see a little bit the scroll movement now on the right hand side this is where i could now put in some of um some further messages gonna move myself over to be here hello i'm still here okay now down here again we could add in some further content so i could now take a copy of this box let's drop this in over here okay uh let's go to this column and i'm going to say give me about let's just go over 100 for now okay so we've got a bit of movement coming off the bottom screen i'm going to change this to be left about 100 away from it from the side basically um i'm just going to go over here to these wordings the text editor actually had some part padding there's put that to zero so the margin is 0 0 for the text the column now has just to make sure you understand 100 pixels from the bottom 100 from the right now this section here this text i'm going to give it some padding and i'm going to give it padding of about uh 15. no 15 is too small let's go with 20. okay i'm now just going to change a bit the content because it's a bit heavy so we just reduced the content a little bit and i'm now going to go to advanced and i'm going to give this a background color for the text okay so what we now get is a background color over there and you're probably thinking what was the point of that well if i now show you here what we now have if i just minimize myself for a moment we now have the image we have some text and we've got a bit of a box as well and i would probably say that box actually needs to be further away over there to the side let me just bring myself back into view hello i'm back i'm over here let's just go over here let's just go to this section and let's just say from the left i think it should be about uh 200 there we go and we can now see we've got some further content so you can have a think about what you're doing now this is going to be section one okay we're now gonna do section two so we're just gonna scroll i mean i could if i want just make a complete copy of this um and then just mess around with the content in fact that is exactly what i'm going to do i'm going to duplicate that so i have another section below i'm actually going to get rid of the contents here i'm going to get rid of these contents as well because it's already got like the vertical height and all of that and i know i'm being a little bit cheeky it doesn't take long to do really does it but it just speeds things up for you so i'm going to go down here now and i'm actually going to remove the background image completely okay uh so at the same time i'm just gonna oops daisy i'm just gonna make this section uh be a um a middle just so it's in the middle just so we know where it is let me put myself back down here now we have one section i'm going to add another column now in column number one i'm gonna stick in some text and some images in fact i might as well just copy this column back again god i'm being a bit reckless here on now let's just uh paste that in let's get rid of that let's get rid of the social sharing boxes and what we can do is just very quickly go over our text and just give it a text color this is all color 111 which i find works better than having pure black or having grey text which is too light it's just my preference really i find that it just it's easier on the eye it's not a stark contrast when you have black and white which can be very very bold uh but look it's almost as close to um black as you're gonna get really but it but it is still pretty pretty good there it's got our black text uh and we got that now i'm just doing an example here so you know you could have now like you know you'd have your new header or whatever you'd have here okay uh in terms of your layout and again at the bottom down here you know you play around use your widgets you know you might have a button that takes them somewhere else to another section or whatever in fact we will do that this button is not actually going to lead anywhere by the way and it's just going to be sat on the left uh left up there we've got a style let's just sort out the padding for this because i messed around with it in my global settings your button would look a whole lot more better than that okay trust me it would there we'll go with 20 i'm gonna go with about 20 over there as well all right um you play around with your look of how you want it to look so we're just going to go with a blue button there and i'm going to give it a border radius of about 15 in fact let's not do 15. let's go with five okay so we just got a bit of a uh a button going on there right these buttons are not leading anywhere you do that in your website i'm just showing you a bit of a funky layout we've got going on here now in this part here we are going to add in a image and we're also going to add in some content as well and this is where we have to have a stop a little bit of a think now about our content underneath here i want to have um another image okay and i could if i want just add in an image so let me show you what i mean by that i'm going to drop in a image just to sit here like that okay remember this section cannot be bigger than the size of the screen so this section here it's the screen this section here as well it fits to the screen but it's now pushing everything up to the top because i'm using up the fullest state depending on the size of your screen i'm using a macbook by the way macbook yeah and i love it okay right now we're just going to go over to this image and i'm going to drop in an image and i'm going to go for something like now this image i'm going to set it to be full people always say why'd you go with a full image you know if it's only that big it's to do with the resolution of your image if you go for like medium or thumbnail or whatever you're going to get well basically it's going to be the resolution it will mess things up trust me just always go for full then we go to size now this is where rather than using the width for the maximum width i'm going to use the height and i'm going to go with the vertical height and look if i start to do something like this okay i might if i go with 50 it's going to be 50 of the height of your screen so if our screen is 100 50 will now be the image that is now going to push everything up to the top depending on your layout so instead i'm going to go with a 30 now when you do that you can now see it's now not eating up to the full width of the screen now if you were to start doing something like this this is where you're going to be stretching the image okay this might not be encouraged because then you are warping the image but if you go to object fit and i now do uh well let me just show you if i do fill nothing if i do contain nothing if i go for cover again nothing but this is where if i now go to the width and i do 100 i probably did it in the wrong order by setting the width to be a hundred percent it is now 100 of the column the image now is not stretched can you see that it's now fitting quite nicely there okay so bear in mind that you know work on if you're if you're doing a horizontal layout images are it's best to work out what is your vertical height of that so i've gone with i'm gonna go with uh 40 percent now let's not go to 40 pounds let's go at 35 and then i've decided that right that is a cover image and now i get the height one of the limitations of this obviously is that whereas with a section when you start to do like background center center and all of that you can well sorry when you do cover you can decide if it's bottom top center whereas over here you kind of lose out on that luxury now it's just a cover image so you might need to think about your image what the content shows and if it's working for you now you can see that on this estate we have quite a bit of state now but the top of it is kind of just a little bit squashed for my liking so i'm going to click on this column so i put 100 margin for the top and the bottom of the column just so we get a bit of breathing space now what i'm doing is i've just added in a blank section there just so i can see the bottom of the screen okay i'm gonna go back to this column over here and i'm gonna say there's a top margin of a hundred but zero on the bottom so that image now sits perfectly at the bottom of there this is where you also again have to have a think about your layout because that image is not currently stretching all the way to the left hand side so what i'm getting is i'm getting a space there and when we eventually scroll you will have this white space over there and i'm not liking that at all i want this image to actually stretch all the way to the right hand side so i'm what i'm gonna do is i'm gonna change it now to be a full width okay so i'm gonna go over here and i'm gonna change the section to be a full width like so okay that's fine great now the contents though are kind of all pushed over to the left hand side as well and again you know you've got to think about your layout think about what you're doing okay so i'm just going to go over here to my header and i'm going to give it a left margin of 100 and i'm going to do the same for the text as well let's just see how that looks though by the way so that's now coming in more to the left hand side don't worry about the fact that it's not completely in line with the section above okay you got to play around with it a little bit don't worry too much because it's going to be horizontal so we won't have to worry overly about that i'm going to go to this text over here i'm going to give that a give it a left of 100 as well and we'll do the button as well and give that a left margin of 100 as well so what we now have is the image basically stretches all the way to the left hand side but the text is kind of sat there you know it's kind of moved away from the border now over here on the right hand side it's going to check the structure here is still 50 yet still 50 that's fine over here we're now going to put in some more images and some further text as well but i'm going to do a um an inner section okay the reason why i'm going to do an intersection i'm going to get rid of this bit over here like that so we have an inner section added in so it's a column within a column in effect or a section within a section okay the reason i've done that is because if i now want to duplicate this i now have two sections sat within okay now this section here um i'm just going to add in a a background image for say this gonna make this a full width within that section okay and i'm going to have no gap and i'm going to have a minimum height okay so this is where now i'm going to say vertical i'm going to go with 50. so that will take up 50 of the height in fact i'm going to do the same with this one let me get rid of that if i now just duplicate this section okay so by having two inner sections in effect within there both at 50 50. they're both going to take up equal spacing now this column in fact this section here sorry not the column i'm going to put another image in okay so i'm just going to go in and i'm just going to pick an image and we'll just go with something like that okay uh we'll go center center scrolled no repeat and we'll go with a cover something like that okay again have a think about what you're gonna do and what images work for you now why did we do the section and have a column pretty simply for this reason i'm going to copy that box this text box here okay i'm going to copy that like that and i'm now going to paste it into here so now what we have is some text i'm now going to change this text okay so i'm going to go to the section and i'm going to change this vertical line to be bottom can you see what's happening there we now have some text with inside this button i'm going to go to this text bit inside here and i'm going to say from the right okay go about 200 from the right in fact let's just get rid of some of the text in here because there's quite a bit let's just shorten it down to be something like that all right you're going to play around and that's probably too short let's go with something like that there yes we've got a bit of text in there so this is now starting away from the right it is currently taking up a bit too much of the image so i'm just going to change this image for a moment probably wasn't the best image i picked there let's just go with uh let's go with this person here because that might work a little bit better yeah there we go that that kind of works a bit better remember though this text box this text editor that i've just clicked on again it does have a background image but we could click on the color and i could make it just a little bit transparent like that so we get a bit of an effect going on there as well because of the image there's a bit of a highlight going on there now at the bottom we could add some further content into here or do whatever we want instead what i'm going to do is i'm just going to add in another image okay just for the sake of it because i think why not let's just add in another crazy image over there right so we're going to add in an image and we're going to make it center center scrolled no repeat and it will be a cover image so let me just move myself out the way we have a header we've got some content going on there now ignore these blue lines okay that's just elemental being elemental for a moment okay this is not now in line and there's a reason i did it like this i wanted to show you how if you start doing something like this when you strike try and line it up with the content on the other side it does not work really really well so this is where i would say you either move on and accept you're gonna have like a difference in the height or you do something about it and i would say do something about it okay so i'm not wasting your time by the way i'm just showing you how good and bad practice how things can work so what i'm to do is i'm going to pick up an intersection and just drop it there right get rid of that column i'm going to just so quick so quick it's going to be like how super quick is this no gap okay and the height will be a vertical height of 50. okay we're going to pick the header up drop the header in drop the text in and we're going to drop the button is that dropped in there we go i don't think i dropped that in did i drop that in yes i did drop aim there we go so the buttons dropped in as well and then going to just basically um get rid of that image completely okay go over to this margin set this all to be zero again all right so everything is zero zeroed out i'm gonna now duplicate to this section just delete the content delete the content delete the content now stick back in the image we had originally see how quick and easy it is it's not that difficult um what was the image we had there we go that one stick that in there we go uh center center scroll no repeat and we're gonna go for a cover right now look at that right it is now equal and that's what i wanted to get across with you if you start putting in things like images and whatever you can make it work for you and here's how you do your vertical height and your percentage width so you understand how to do that but if you want to have equality in the look of it this will work for you so much better of course though the text here is way too close so i would say with this margin i would say you know uh sorry force of habit again i've gone in there i would say give it about 50 from the top and i would say 50 from the bottom and i'm just going to change the content of this text let's take out tons and tons of the text there so we're now looking at it we have something going on here and because these are remember because this is all a column right i hope you i hope you're understanding what i'm doing here if i go over to this section here right i do say write a lot don't know right we go over here and we type in say um what should we go for let's go for an icon i'm going to stick in an icon in the middle there and i'm going to go over here and i'm going to type dance i'm not gonna do that i'm gonna go for my favorite one we go with the mandalorian symbol like that okay and we're gonna make it be a little bit more whiter and just stand out a bit more like that and you know again you know change the color go for go for what you want to go for and stuff like that so when we now view it we would have let me just get myself wait you got something like that going on there and i think that's pretty pretty cool pretty useful and i think pretty nice in what it's doing at the moment let's now move on to the next section and we're going to fly through this one a lot more quickly now because now we've got our setup kind of done we're now going to duplicate this section because now we kind of know what we're doing here okay so now we've got our layout and this is where we can start to manipulate change things whatever you want to do okay so i am going to i'm going to do something like this now i'm going to do that get rid of that text box there completely like that get rid of that i'm going to in fact i'm going to get rid of this column completely right get rid of that column completely in fact get rid of the inner section as well get rid of that section there we go so now we have one column okay this section i'm going to make a 100 vertical height so it's the pure height i'm going to go in and change the section to be this person over here so we're just going to get a face like that kind of thing kind of effect going on again you'll have a header you'll have content whatever you want to do don't forget this is an intersection so i could now add in two columns like so and i could make let's just get rid of the text over here let's get rid of this button over here let's just uh duplicate this text a little bit like that let's copy let's duplicate it again and add it over here right of course you're going to start to mess around with your layout so i'm going to go with a 20 on the right hand side we'll go with the 20 as well this is going to be a middle that is going to be a middle this one is going to be a middle as well there we go so you can start to think about your layout in fact i would probably say make it a top make that one be a top as well just go over here let's just give it some padding of about 50 from the top so now we've got some text at the top there you can put whatever text you want now with this intersection at the bottom over here i'm going to get rid of the background image i'm going to add in a new column like that okay and what i'm going to do is over here i'm going to add in a totally different image you can tell i love adding images right and we're going to add one in of this person here playing some music or a dj you can't see them yet let's just go with a center center scroll no repeat and we'll go with a cover so we can see them a little bit but you can actually that's a rubbish image what about if we go with top center there we go top center we can now see their hat over here though now look when you do it that's your image it's looking okay right over here though in this side here we're gonna add in some content so i'm gonna go over here and i'm gonna pick up this content box here and we're gonna dump it in there right that is now dumped in absolutely fine let's just kind of uh change the wording a little bit and just have something like that and i'm then going to duplicate this so we now have it uh fitting in within there and we're going to have a zero widget spacing between them so i now want them to be kind of right up against one another the problem is though that even if i gave this a different color i'm getting a white space above one of the boxes and below the other boxes it's not looking totally totally good at the moment is it this is where you could add in an inner section within an intersection i do not recommend you do this overly too crazy because it's not a good thing to do but i'm just going to show you how you do it so what we're going to do is we're just going to get rid of the content we have here for now so here is our column i'm going to pick up the parent column that contains the inner section okay so this intersection here this is an intersection remember the parent for this is this section here so you go to navigator this column here contains the inner section i'm going to copy that column copy the first column not the inner section the first column i then go down to my inner section or this column over here and i'm going to paste what we had before now as soon as you do that it's going to totally screw up what you're doing so you've got to delete any additional columns like so but what it has done believe it or not okay is it goes and adds in all of the content that's sat over here so added a copy upon a copy upon a copy so by me pasting that over and i've got better videos that explain it in a section do a search for it we now have within that inner section we now have another inner section over here and we have another inner section let me just get rid of the contents so it's easier to see what we've got there so there's a intersection in a section okay if i go to this section here this is currently set to be a vertical height of 50 and this is set to be vertical height of 50. now bear in mind we've already done 50. so i'm going to change this to be a 25 and this section i'm going to change to be a 25 as well because don't forget we've already got 50 50. now within there we're going to have 50 50 again which is 25 and 25. let me now take this text over here let me get rid of that don't worry we are getting on to the horizontal in a in fact i'm gonna do the horizontal now i think if i do four five six seven sections we're going to be going over and over and over too much but let me just add in the content here let me get rid of the background color okay because we don't need it on the text box let me shorten this text to be just a little bit more concise something like that we then go to the inner section right and we're going to add a background color where is it style there we go we're going to add you could do a gradient if you want even add in a slideshow you could do whatever you want remember this is all elemental i'm going to give it this blue color which i think is a bit too bright let's just go with something a bit more murkier like that i'm now going to copy that text and dump it in here so we've got a copy of the text go in style and give this a darker background color like that okay i'm just going to change the padding on here because i think this has got some padding going on now it's not got padding something's not right hold on layout uh vertical is middle there we go so now we've got it's got we've not got too much padding sometimes i might have forgotten there you go top and bottom let's get rid of that let me get rid of that as well and let me just put that to b in the middle i hope this is making sense by the way okay um did i do that vertical middle oh there you go vertical align sorry there we go vertical there so now when we view this okay we will be getting this effect now i have noticed there is a bit of a white gap there so i've just got to double check and investigate what's going on there let's just go to the section go to advanced zero style uh intersection no gap vertical height is a hundred we're just going to update this and just view it because i have got a gap appearing there at the bottom actually there is no gap that was misleading look it fits to the bottom now i could spend a lot more time now doing an extra page and i i don't know do you want me to do an extra page i mean we're here anyway so why don't we do another section i mean what i'm going to do is i'm going to pick up the section number two copy that drop down do a paste there get rid of that black box because i don't need that now if i just go down move myself out the way there we got this inner section and intersection i'm going to shrink that shrink that down just so we can see it uh properly i'm gonna pick this column up and just move the columns over swap them over okay go over here uh pick this section or change the background image again and we'll go for um let's go with this person over here we've got someone there again like look you could leave this text box here if you want you just you know you could put some text in do you want you know i mean be crazy have fun with creating your website i mean don't just have fun look at your site map and think about what you're doing of course don't just do what you want to do without thinking about your your context so we're adding a bit of color there right and in fact i'm going to make this slightly transparent like that so we get a bit of a color effect and then over here on this side look you know you could have buttons i'm going to duplicate you know duplicate you know let's just pick this up dump it down uh something like that i mean you know whatever you want to put buttons extra information i mean you can even put a contact form in for god's sakes you know come on let's do it let's just put a contact form in why not so we're gonna have a contact form in over here we'll do it as an advanced i mean i would say you do your padding within your column i'm just rushing it a little bit now 100 from there we'll go with a hundred from the right as well the form let's just i don't know let's get rid of that let's change this to be in fact i'm going to say don't show the label um as the button have it as a left button change it to say subscribe you know you would obviously do your padding and everything else you're gonna do in here okay you know i should do it shouldn't i because if i don't do it someone's gonna see this and go that looks so awful and it's not it's just i'm just being a bit crafty what i'm doing let's just go with a five on the border and we'll go with a 20 and we'll go with 20. i don't know something like that okay so you could have like you know um you know whatever you want to put in and however you want to do it so what we have in effect if we now view this and i just minimize myself out the way like that okay what you're gonna have is you've got page one you've got you've got page two page three and page four we've just spent a ridiculous amount of time doing our section and our website and i think it i think it's quite a cool looking website in terms of the color scheme and what i mean just as a vertical website that could be quite cool don't you think in how it looks and the layouts and things like that but now let's do the horizontal effect this is going to be so simple you're going to be like a little bit surprised believe me there are stages to this we're going to dump in some code and then we have to dump in some like javascript code as well but that's easy to do in elementor as well what you need to do is go to the cog down here which is your settings for the page now i've already hidden the title and got this as elemental canvas because i'm not having a i'm not having a header or a photo footer butter of header in the footer but i will show you how we can add an icon at the top which we could then potentially contain a pop-up menu or it could be like a header that's got buttons or links to other pages in your website but how can we ensure that stays fixed i will show you that in a moment right let's just get the horizontal effect working what you're going to do is go to advanced and we're going to dump in some code you can now start to scroll between the websites ignore that white biz because we're not in the full preview whatever mode okay this now is horizontally scrollable and if you ever want to um remove the code just put in these um backslash um star star backslash or forward slash whatever you want to call it and it removes the code so you can start to mess around with it but by the way even though it is now horizontally scrollable you can still go in and mess around with your content you can still go in and rearrange things it's just if maybe you might feel better doing it as a vertical layout and then sticking it back to horizontal so what this code does really really well is horizontally on a desktop you can scroll but this bit here what this now says is that is up to a width of 768 pixels so it's going to pick up the tablets and your mobiles it will now be vertical now one thing we have not done and i have to put my hands up here because i should have been doing it all the way along is we have not checked the content of the layout in terms of mobile so what you really want to be doing is create it as a vertical layout as we have done check section by section for your mobile responsiveness and all you're going to do is mess around with your margins your padding your text sizing and your image now bear in mind when you stick in an image as a section background or whatever when you go to mobile view the image will appear grayed out that's because elementor is allowing you to click and add in a copy of the image so right now our image is a horizontal landscape layout what you want to do is add a copy of that image in but what you want to do is you want to edit that image okay and you basically want to um well scale it to be say uh 700 in height scale i'm not going to do that here so let me just cancel that so i don't want to mess up my website once you've scaled it you then want to crop it to be about 500 i would say in width okay because by doing that it now means that your image is going to look so much better on the tablet and the mobile if you stick in a horizontal image as we can see here it just looks ridiculously bad it just looks just ridiculously big so mates i've got videos on that as well make sure you look at that just to see how to do that okay so sorry my mistake i should have gone through basically through this stage by stage by stage on the responsive mode i got carried away but go through that you know don't do what i did don't do section upon section do one section because remember this column here would now sit below this column when you look at it on a mobile view and you just go adjust accordingly with your intersections and your heights and everything like that but it should be quite simple because we're only working with sections and intersections it should be pretty pretty simple the key bit is though the code like i said covers you off for that over here there is one little bit of code we still need to add so what you want to do is you want to go back into wordpress go to elementor and go to custom code and we're going to dump in a bit of custom code here we're going to click add new if you haven't already added in any code and we're going to call this uh we're going to call it horizontal you can call it whatever you want to be honest as long as you know what it is horizontal scroll i'm going to dump in a bit of code we do need to change the location though to be body end there we go and there's the code okay um there'll be a link in the description so you can go and get the code let's just publish that we're gonna want this to be on the entire site no we don't we want it to only be on the pages where we want it to actually hit so if you have got five pages and all of them are gonna be horizontal scroll you're gonna have to put this code in for each of the pages okay well not all the pages what you do is you go to singular you go to pages and you will then in here type in the pages it relates to so i'm going to type in home because we only have one home page at the moment so this is going to apply to the home page and what it does is it kind of removes some of the stuttering effects you might get when you're scrolling left and right in terms of the way the sections move over one another you don't want to get this like this delay-like ghosting effect almost appearing right we've done all that it's going to delete my cache why not we might as well so now we're going to be viewing this on our private window just to see how it works now i could use the scroll bar down here or i could just use my button and we're now not getting a stutter effect now one thing i have noticed and apologies for this but the scrolling effect doesn't seem to be working i'm gonna have to investigate and i'll put an update in the comments or another video at another time but what we now have is the scrolling effect going on here so we got our section over here it's all nicely laid out we've got our next one can you see by using the intersection to keep the equal or equality of the sizing of everything it's kind of flowing okay right but you think i mean look it's fine i mean none of these buttons are real you know it's not going to click and do anything but we're now getting a pretty uh good layout there's a bit of a that layout that white bit there is actually my um window so let me just do that okay because i don't want you to say oh look there's a space there no it's not a space okay but that's looking pretty pretty good and if we were to go to mobile it would now be a horizontal view so in my opinion that is so simple and easy to do and you can have a really cool looking website i mean i think this is pretty it's in your face right it's kind of like i it draws me and i want to go wow what's going on here with these images and things i think it's cool funky and does the job now what about a menu now this is where you got to do a little bit of thought okay if you add in a header or anything in here when because it sits on this section over here when you go to the next page the menu will still be on section one so what you need to do is kind of fix it in place so it's always there let me show you what i mean let me just over here on this column i'm going to add in a um well it's two ways to do it you could do a nav menu i'll do both ways okay just so you can see it we'll add in a nav menu and the nav menu sits over there and i'm going to make this a writer line i'm going to get rid of the underline pointer because i hate that we're going to make it a white text and i'm going to say that the active is also a white text as well um is there going to be a hover color yeah we'll make it a purple color or something like that i don't know you have a think about what you want to do mess around with your font your typography and all of that okay i'm just showing you how it works now at the moment um you can see here the whip is kind of being slightly paralyzed by this section so i'm just gonna pick it up doesn't matter where you put it to be absolutely honest you could stick the head the nav menu in that column it doesn't really matter where we go the key bit is what we're going to do with it i'm now going to go over to here and i'm going to click on positioning and i'm going to click uh fixed if you go with absolute it will be it will be fixed for this section and when you move on to the next section it will again move away which we don't want so i'm going to go with a fixed and as soon as i do that it fixes it to the top over there basically to the top of the um well look you can see what it's doing it's already kind of flowing in place slight problem we've got is as you can clearly see now on the white text you can't see it which is a little bit annoying so maybe we're gonna have to give this a little bit of a background padding so we're gonna go background color let's go with a uh i would say go with a black color and let's just make it slightly transparent something like i don't know something some something like that transparent a little bit like that what you then want to do is go to again go to that um nav menu go to position and make it a custom width so the let me just make sure you're understanding this the position is fixed and it's fixed to the top well it is now when i do the horizontal orientation so it's now fixed over there and by me doing a custom width if i had done default all of that has got the black background transparent if i go with custom it's now only going to be so much okay so it now means that when we cross over into here you have got that i mean that is still very very faint isn't it and i think we're gonna have to go a little bit darker than that that's just way not too good let's just update that if we now scroll now you can now see you're getting your header kind of thing it's now scrolling across the top of the screen have a thing about your padding your spacing and all of that that is one way that you could have a menu system in place right so if i go to the let me just show you that in motion let's just go to the uh the page over here let's just refresh that there you've got your menu system there as i scroll you've now got it at the top there um i have found it very troublesome to and you got to use a bit loads more code and i don't like to overdo it with code because i'm trying to think about what's going to be easy to understand for you me and everybody else you could click on here and it takes you to like section 3 on this page i would rather say you just have a scrolling animation you just have a scrolling effect and this takes you to the shop page you know this is going to take you to look the shop page which could be look at this this is still vertical right um don't ignore you know i mean ignore this menu this is me just doing two different headers and whatever you have your blog and it takes you there you could have your team page and whatever you know and you've got your home page and it takes you back so you could have a mixture of vertical and horizontal layouts that is super super good i love that but what if you don't want to have a menu like that at the top so what you could do is and we're near the end everyone is instead of doing that you could in in effect stick a icon we'll put the icon here in fact we'll change the icon to be bar bars even uh we'll change that to be a white thing and we may have to do the background color as well again on here because of the fact we got the white effect didn't think of that did i so we could go over a black there we'll just make it a slightly transparent uh again not not overly too transparent but just transparency enough again you're gonna go to uh your advanced tab which we're already in we're gonna make this a custom so now it's shrunk we are going to go to the positioning and make this a fixed as soon as we do that can you see it's now right at the top there we're now going to make it a stick to the right unfortunately though it's now over the menu that's if you were gonna have both you probably wouldn't have both but i'll show you what you could do anyway let me just shrink the size of this a little bit to be uh something like that um this is where you know you're obviously to mess around with your padding and everything like that i mean here look let me just show you if i go to positioning now for that icon over there i'm going to offset it from the vertical to be about there all right you you do what you want i've gone with 10 pixels from the top okay i could even do um some pixels from the right as well sorry let me just do it like that so it's not completely up against the ball the 12.2 if i now click back onto the navigation menu okay again with the custom positioning again you could either be really scientific with it or just move it again you know do what you want with it change your layout change how it looks the height and all of that okay so there's loads of stuff you can do with that you can then click the icon okay go to content click the dynamic tags over here and if you've created a pop-up header like a pop-up like menu so the header comes down or it off canvas comes off the screen i don't know if i've got any off canvas on here if i go to pop-up and i click the wrench uh have i got a pop-up on here i think i have now i haven't done any pop-ups but if you did um no i haven't done any so if you had you'd pick it and what that would then do is when you click it a menu then slides in and then you could click it to take you to another page or it slides down you can have so many different animations here but the what i was trying to get across to you was if we now view that in our private window over here like that and i'm just going to move myself out of view right we have our menu over here and as we scroll i mean look bear in mind i haven't done it properly okay i haven't done the margins and the padding and all of that but you do it properly and you would then have your icon set above there or however you're gonna display it but that is a super super super genius and simple way to do a horizontal uh website and i think you know work on your vertical work on your responsive modes which i should have done do all of that add the code in and you now have a horizontal scrolling website i mean super super cool right hey look i hope you like subscribe share and follow leave your comments experiment have fun with this super duper thanks to the elemental team for sharing this code because i love it okay but hey look i hope you had fun take care and i'll see you soon

Channel: Web Squadron

Views: 714

Keywords: Imran, Siddiq, Imran Siddiq, WebSquadron, Website, Squadron, Elementor, Elementor Pro, Tips, Hints, Wordpress, Elementor 101, Elementor Course, Web, Web Design, How to build a website, Elementor - Horizontal Scrolling Full Site Tutorial - Free Code - No Extra Plugins, Horizontal Scrolling, Elementor Horizontal, Site Tutorial 2022, Elementor Site Tutorial, Elementor Horizontal Scroll

Id: wlAoaLM272Y

Length: 54min 11sec (3251 seconds)

Published: Thu Nov 11 2021