Change Background Color On Scroll (tutorial with Elementor Pro)

Published: 19 August 2021
on channel: The Digital Alchemist
29,034
632

Change background color on scroll with Elementor Pro: https://kaycinho.com/elementorpro (affiliate)

ELEMENTOR PRO ANIMATED TEXT TUTORIAL:    • Horizontal Auto Scrolling Text (TREND...  

FULLSCREEN MENU ELEMENTOR PRO TUTORIAL :    • Full Screen Menu Elementor Pro  

JS AND CSS CODE: https://kaycinho.com/change-backgroun...

The Elementor Pro custom code feature from pro does not (yet) allow to load scripts in the footer so I had to use an additional free plugin in order to change background color on scroll.

This is a trendy web design effect that you can find on many gorgeous websites and in web design galleries such as Awwwards.

Hopefully when that feature becomes available it will be possible to do it all in Elementor Pro for this tutorial. But we do need the Elementor Pro version as we'll be using the Attributes feature.

Changing the background color as one is scrolling down a web page is a nice css effect used in many trendy gorgeous looking websites. It's pretty easy to implement with CSS but in this tutorial video, I'm going to show you how you can implement it within Elementor Pro.

I hope you enjoy these types of videos aiming to help you level up your web design game.

I hope it will help you create stunning looking websites for you or your clients.

TOOLS I LOVE:
Elementor Pro (affiliate): https://kaycinho.com/elementorpro
Astra Pro (affiliate): https://kaycinho.com/astra
Crocoblock (affiliate): https://kaycinho.com/crocoblock
Wirementor (my own tool): https://kaycinho.com/wirementor

MORE LINKS:
Wirementor demo (built by me): https://kaycinho.com/wirementordemo
A2 Hosting (affiliate): https://kaycinho.com/a2hosting

ONE PAGE WEBSITE FREE COURSE
   • Elementor Pro Tutorial For Beginners  

GET MY HELP:
https://kaycinho.com/shop/consulting/

ALL MY RECOMMENDED RESOURCES:
https://kaycinho.com/resources/

DOWNLOAD MY FREE BRAND GUIDELINES TEMPLATE
https://kaycinho.com/brandingtemplate

CHAPTERS

0:00 - Change background color on scroll with Elementor Pro
0:08 - Pre-requisites
1:38 - Credits
1:45 - Adding the JS code
2:59 - Creating a page
3:25 - Adding the css code
4:02 - Creating the content
9:41 - One Little Issue
10:08 - Troubleshooting colors
10:40 - Tablet & Mobile
10:52 - Editing mode drawback
11:54 - Automatically Sliding Text

DISCLAIMER: I often review / link to products & services that I love and think you may find of interest. When you purchase a product/service through one of my link, I receive a commission, which helps me producing free content (you don’t pay anything extra!).

Also, I am the creator of Wirementor.

#webdesign #tutorial #elementor #elementorpro #css #js


Watch video Change Background Color On Scroll (tutorial with Elementor Pro) online without registration, duration hours minute second in high quality. This video was added by user The Digital Alchemist 19 August 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 29,034 once and liked it 632 people.