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.

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.

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.

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.

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