Awesome Elementor Sticky Text Within Column Design

Awesome Elementor Sticky Text Within Column Design

Check out our CSS Course, made especially for Elementor users.

Table of Contents

A member in the Facebook group asked me if this was possible. Yes it is! It does require Elementor Pro though.

Get the template here. (right-click > download as)

To begin with, create your Elementor section

Awesome Elementor Sticky Text Within Column Design 1

Add the heading element at the top, and all the elements you will want to be scrolled over below it.

Then, setup the z-indexes

Give the heading element a z-index of 4, and all the other elements a z index of 9.
Awesome Elementor Sticky Text Within Column Design 2
Awesome Elementor Sticky Text Within Column Design 3

Finally, set the Elementor Pro sticky options for the heading element

Under Advanced > motion effects, set 'Sticky' to 'Top', turn on 'Stay in column', and adjust the offset. See the video for full instructions and demo!

Awesome Elementor Sticky Text Within Column Design 4

Let me know if everything works for you!

Elementor Sticky Heading Background Template

This download gets you the following template :

Elementor Sticky Heading Background Template

Related tutorial : Elementor Sticky Heading Background

Name your price $

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2445 Elements right here:

Checkout the Elementor Addon Finder directly

Comments

2 Responses

Leave a Reply

BRAND NEW

CSS Course For Elementor Users

Become a CSS ninja and design exciting, quality websites that stand out in the crowd.