Create Horizontal Scroll Using Elementor Pro (Beginners Tutorial 2022)
Hi guys in this Tutorial I’m going to show you how to add horizontal scroll to your website using Elementor Pro. it only takes a couple of minutes to do so like and subscribe and let’s get into the Tutorial.
Hi guys so the first thing we’re going to need to do is click on the plus key in the middle of the page and create a new section. Now you want to duplicate the section and we’re going to start editing it the first thing we’re going to change is the content width to full width. Now we’re going to change the section height to fit to screen we’re now going to need to go into the advanced tab and click in CSS classes and type in section.
Once that’s done we’re going to duplicate this section three times and this is going to save us time later in the Tutorial. You can add more but for the purpose of the Tutorial. I’m going to just add free now we need to start adding our text and widgets. The first thing I’m going to add is our heading and I’m going to click on the style tab and change the colour of our text to white so it’s easier to read.
Once that’s been changed I’m going to head back over to our widgets and drag in a text box. Again I’m going to go back into style click on the colour picker and change our text to white finally on this section. I’m going to drag in a button. I’m also going to change the colour of our text in our button to black. Again by clicking on the colour picker and selecting black. That’s all I’m going to add to this section but you can obviously add more.
I’m going to start editing now our second section and I’m going to start by changing our background colour for our section. I’m going to click on the colour picker and this time I’m going to select a yellow. Like in our previous section I will be adding a title some text and I’ll be adding a button. So I’m going to start off by adding a header and this time we won’t need to change the text colour because it’s automatically set at black.
Now I’m going to add our text widget. Once that’s done I’m going to head straight back over and add in our button and I will have to change the colour of the text to black. Now that we’ve finished editing our sections we’re going to head back up to the top of our page.
In the first section that we created we’re going to add in a HTML widget and all we need to do is go back into our widgets. In the search bar type in HTML and drag in the widget into our section in the HTML box. On the left hand side we’re going to have to type in style in angled quotations and paste in our code.
If YouTube lets me I will leave the full code below. All that’s left to do is update or publish our page and click on the preview button. Now if we scroll up and down on our mouse it will move across the page.
I could only get this to work in Elementor Pro so if you don’t have a copy then there is a link below. It is an affiliate link it doesn’t cost you any more to use but it does give me a very small percentage of Elementor’s profits if you choose to sign-up.
Thanks for reading guys don’t forget to like and subscribe and I’ll see you in the next Tutorial.
