Background Transition EA Element
Background Transition widget for Elementor allows you to create subtle background transitions between sections background colors. This simple widget gives your website users an elegant visual hint that they moved to another part of your web page. Here in this tutorial, you’re going to learn how to use the Background Transition element into Elementor Page Builder. So let’s get straight into it:
If you don’t know how to activate elements and start using it, then check the tutorials below:
How to Customize the Background Transition Element
⇒CSS ID: In order to add background transition in all the section of the webpage, all you have to do is to give each section a unique CSS ID by going to your Section Settings > Advanced Tab -> CSS ID. When you finish adding different CSS ID to each section, go back to the Background Transition Widget, click on Add Item, then paste it into the CSS ID field.
⇒Scroll Down/Scroll Up: From here you’ll have the ability to set a color/image for scrolling up/down.
⇒Type: Set the type of background transition you want. You can either use color or image.
⇒Select Color: Add a custom color to the background by selecting a color from here.
⇒: If you set the type as image, then upload the image here and customize the image size, position, and repeat.
⇒Add Item: Use the ‘+Add Item’ button to add more sections to the list.
⇒Transition Duration: Customize the transition duration of the background for different dimensions.
⇒Offset (PX): Set the offset, distance between the top of viewport and top of the element, default: 30
Set the Advanced options that are applicable to this widget
Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of Background Transition Element.