Change Text And Background Colour On Scroll In Elementor
hi guys in this video I’m going to show you how to change the color of your background and your text as you scroll in Elementor it’s a very straightforward process so sit back relax hit that like And subscribe button and let’s get into the video okay guys the first thing you need to do is go to the top left hand side Search widget box and type in HTML once that we’re just displayed drag it onto your page it doesn’t matter where you put this on your page because you won’t see it on the end result and it only controls the colour of your background.
What we need to do now is add our HTML code you can find an exact link to this page with the HTML code in the description below now that you’re on my page you’re going to need to copy this bit of code and in the HTML widget code box on the left hand side you’re going to have to paste it in this is very simple straightforward bit of code and I’m going to go for it now to show you how to change it.
In the first line of our code we set the background colour of our page the first line of our code controls the colour of our page load this is our loading colour and as you can see it matches the rest of my pages on my website if your pages are white you can remove the hex colour and type in white the next thing I’m going to show you on the left hand side is when our colour change takes effect as you can see mindset at 150 and this is just under the halfway point of this page.
If your page is bigger you may need to increase this number to make sure it changes at the right point on your page on the next line down is what we want our page colour to change to mine set at White so once we scroll halfway down our page it will change from Blue to White and if we go down to the last line of our code we’ve got this hex colour here and this is the colour that it Scrolls back to so when we scroll upwards this is the colour that’s going to be displayed on our page.
As you can see this matches the colour we’ve got set as our body so what I’m going to do now is scroll down the page and show you the effect as you’ll see when we start scrolling down our page the background colour will change and if we go back up again it will change back like I said earlier on if we want to change the point at which our colour changes we change this number here so I’m going to change this to 350.
Once we scroll down our page again more of our page will be blue before it changes to White and if we use the colour changing of our text as a point reference you can see how much more we’ve increased it by if I now change it to 550 and scroll back down our page you’ll see that we scroll down even more to change the colour of our background I’m going to change this back to 150 and we’re going to move on to creating the same effect with our text now that I’ve set this back to 150.
As we scroll down our page of text and our background will change at the same time to create the effect with our text we’re going to need to go back into our Elemental menu and we do that by clicking on the widget menu icon in the top left hand side and searching in the search widgets box HTML gain like before you’re going to drag this widget onto the page and you’re going to put it where you want to display your text now what you’re going to need to do is go back over to my website and scroll down to text HTML.
It’s this bit of code you need to highlight and copy and paste into the HTML box on the left hand side now what I’m going to quickly do is click on our HTML which it and make sure it’s this HTML box that we’re pasting our code into now go back to my website and scroll down to the bottom and this time you’re looking for the CSS code and it’s this little bit of CSS code that’s going to let us change the colour of our font the size of it and the style.
You’re going to have to paste this bit of CSS code in the advanced tab under custom CSS in the HTML box I’m going to quickly copy this bit of code now scroll back up to the top of our page to our HTML widget where we want our text and as I just said I’m going to scroll back up to the top of the page and paste it into the custom CSS box of our HTML widget.
Remember if you do want to use custom CSS within Elementor you will need Elementor Pro there is a link for that in the top of the description and as you scroll past please do hit that like And subscribe button so with our CSS code now added we can start changing it and the first thing you can change is the colour of the text and this is our starting colour for when the page loads my mindset is white to contrast the page so I’m going to now move on to changing the font size I want it to be noticed on the page so I’m going to set it to 36.
I’m going to change the font style when the next line down to Ariel I want my text to be noticed so I’m going to leave it as bold but you can also change its alignment mindset is Centre but you can change it to left Centre or right what I’m going to show you now is the HTML code and show you how to edit it now I’ve made this HTML code exactly the same as the background colour change the only difference being is we’re using CSS to change the style of the text so this part of the code here lets you change how much of the page you scrolled before it changes colour
Underneath that is our colour we want our text to change to once we scroll past that point and at the bottom is what we want it to change back to once we scroll up at the moment the background colour and the text are set at 150 and when we scroll down past that point you can see both change at the same time we can change change this to 250 and you’ll see the background will change first then the text and if I show you that quickly now.
If I scroll down the page the background colour changes and the text Pops in at 250. So you ideally want them both to be set at the same what I’m going to do now is change that back to 150 and I’m going to click on the preview button in the bottom left hand side next to the publish button and once our page loads as we scroll down the page on the right hand side you’ll see our text changes and our background changes at the same time.
remember you do need Elementor Pro to be able to use custom CSS within Elementor there is a link for that in the description 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 if you have found this video useful please do hit that like And subscribe button.
if you’ve got any questions feel free to drop them in the comments box below don’t forget to check out the rest of my videos in the playlist.
Thanks for watching and I’ll see you in the next one.
