Setup the Skin on Scroll Effect in Elementor

The Skin on Scroll Effect template is an amazing feature to use when you have sections with different background colors. Now it is also available on Elementor combined with the Impeka Widgets. You would need to install and activate the Elementor and Elementor Extension plugins.

The result is to get a smooth change on sections while scrolling by mixing the colors of each section. So every section will have a mixing colors background with the previous and the next section.

You can find this page template in Page Attributes/Page Layout.

Skin on Scroll Effect template in Elementor - Impeka
Skin on Scroll Effect template in Elementor – Impeka

Let’s see more specifically how to create a page with this effect.

Firstly, you add background to your sections (color/image).

Then, you can add the Scroll Header Skin, to change the header on this section. So, if you have a light background color you will select the Dark header skin.

Scroll Header Skin in Elementor - Impeka
Scroll Header Skin in Elementor – Impeka

If you need to change Heading, Text, and Link Color on specific sections, you should modify the Typography Colors under Section Settings > Style > Typography.

Keep in mind that there are some parts like links that cannot follow the Skin On Scroll effect color change while scrolling. So, it is suggested to use a color that will suit both sections while scrolling.

Last, you can also disable the Skin Effect on all elements in a column if you need. This is helpful for columns with different background colors.

Column Skin Effect in Elementor - Impeka
Column Skin Effect in Elementor – Impeka

In case you need to remove the Skin Effect only on one widget you can add the ‘grve-disable-color-change‘ class in the Extra Class Name field on the widget settings.

Section Navigation

If you want to combine it with or add the Section Navigation in Impeka, you should also add the Scrolling Section Title in the Section tab.

Scrolling Section Title - Elementor
Scrolling Section Title – Elementor

This template is also available with the enhanced page builder of Impeka (WPBakery Page Builder + WPBakery Extension)