How to Use Sticky Sections to Overlap in Elementor Pro 2.0
ฝัง
- เผยแพร่เมื่อ 7 ก.ย. 2024
- This sticky section setting is a great tool to add a bit of uniqueness to your site! We can't wait to see what you create with it!
Be sure to subscribe and comment your site down below!
Grab Elementor Pro Here: wattzweb.desig...
Be sure to join the Facebook group here: bit.ly/wpbuilde...
Some of the links in this description may be affiliate links. I do receive a percentage if you purchase the product. Any support is always appreciated!
Just flicking through my saved TH-cam tutorials; thought I'd say thanks again for this really nice tut! Helpful and creative, well presented. Cheers!
Thanks. Waiting for Elementor 2.0
Today I learned something new. Many many Thanks for the tutorial.
Hey Donald, thanks for the vid on sticky sections. Awesome!!
Guest tutorial - thank you so much!
very good Donald!!!
Great trick! Thanks for sharing this.
What if I wanted to do this only to the top header section and the 2nd section (purple) under it and then scroll as normal for the other 3 sections?
@SE1ECT MEDIA
did you find how to do it? im trying to do the same thing
Great tips, tks so much!
Very nice effect! Thank you :)
nice! good time come true
Thank you, great video. I'm trying to do something like this. The problem I have is that want the menu area at the top of the screen and a small full width image section immediately below it to both remain stick as a viewer scrolls down the page. what happens is that as one scrolls down the image section moves on top of the menu section and remains sticky. I've tried every combo of Z-index that I can think of and nothing works. Any suggestions?
Excellent!
If you use "sticky" full-height sections, and lose the Elementor section control box, you can move it from the top of the section to the bottom with this code snippit. Wish I could remember where I got it, so I could attribute them.
/* Elementor Control Reverser - places section control inside the box at the bottom */
/* Add this code snippit to the Custom CSS of any Elementor page on which you need to show hidden control boxes */
.elementor-editor-active
.elementor.elementor-edit-mode
.elementor-editor-section-settings
{
top: 100%;
}
Cool!
Any idea how to do this and also have a header on the page, so that the sticky sections stop before they run under (or over) the header? I feel like there might be some approach involving margins, but I haven't quite framed it in my mind. Like, a sticky section with a margin on top bigger than the header, and then sticky one-column sections within the section, something like that. That's what I'm thinking at this moment but I haven't worked out the bugs, and it feels needlessly complicated.
Just make sure the header z index is higher than the sections.
That will make sure the sections slide underneath the header. But what I'm trying to do is keep the sections from scrolling up far enough to go under the header at all. Like, if I were doing straight HTML and CSS, I'd put a "position:sticky;top:120px" on my DIVs to keep them from scrolling any further than 120 pixels from the top of the window, but that doesn't seem to work in Elementor Pro. Which is why I'm thinking that the answer might be to have a sticky section with a big top margin and some sticky sub-sections.
... I can put a spacer at the top of each sticky section, to keep the guts of the section from moving into the header. PROBLEM: those spacers are there all the time, even before things have scrolled all the way into the sticky zone. I wonder if I could do some weird negative margin magic; I'm still turning it over in my mind. And again, needlessly complicated, if there's some way I can simply tell the sections to stick at 120px or whatever.
Did you ever figure out a way to do this?
Wait... I have Elementor Pro 2.0.3 and I don't see the sticky feature/options. Do I need to go back and grab Elementor Pro 2.0?
Click "Edit Section", go to layout, and see if the Stretch Section option is enabled. If it is, you may have to turn it off to get it to work. Try it, I was having the same issue!
Chamere Minusone life saver
nice!
Superb tutorial thanks. Can you please explain what exactly is the Z-Index parameter ?
Sorry I just got it !
It´s like layers.
Many thanks Laercio Civali!
Hi, How Is the effect looking at the phone.?
niice 💪
Is there any way to make a sticky section without the Pro version?
Custom coding is the only way without a plugin.
I can't find the sticky sections or Scrolling Efect? Where it is? I have Elementor Pro 2.0 too! And a fast question, Can I apply this into my header menu?
Yes. Elementor support confirmed headers can now be sticky.
I din't find it neither. I have also Elementor Pro 2.0
Do I have to activate anything else?
Elementor Staff told me they have been informed about the issue and are working on a fix for that. For now, you can use any third party plugin such as - wordpress.org/plugins/sticky-menu-or-anything-on-scroll/ and add a class/ id to the section and use that with the plugin.
On Headers sections under the "Advanced" tab you have a "Scrolling" section with a "sticky" switch :))
Make sure that the "stretch section" setting under layout in the layout tab when editing the section is "off". (Edit section > layout tab > layout > stretch section = "off") Following this will give you the "scrolling effect" option under the Advanced tab. Good luck!
Instead of using Fit To Height maybe use 100vh instead
Why would you use it though
Something different. You don’t have to use it if you don’t fancy the design.