Sticky Column (sticky sidebar) - Elementor Tutorial
HTML-код
- Опубликовано: 20 сен 2024
- How to make any Elementor column sticky.
CSS Code:
.sticky-column{
position: sticky;
position: -webkit-sticky;
top: 3rem;
}
.sticky-parent
.elementor-widget-wrap {
display: block!important;
}
🍿 WATCH THESE NEXT
5 Elementor Pro Tips and Tricks - • 5 Elementor Pro Tips a...
Elementor Mega Menu Tutorial - • Elementor Mega Menu Tu...
Create a Sticky Video on Scroll - • Create a Sticky Video ...
Elementor Tutorials Playlist - • Easter Egg Code [Eleme...
#elementor #tutorial #webdesign
---------
Our Recommended Tools
Some of the links on this page are affiliate links, meaning we may receive a commission if you follow them. This allows us to continue providing free content and educational resources for you. Thank you for supporting our small business!
WORDPRESS PLUGINS:
✔️ Elementor: wickydesign.co...
✔️ Crocoblock: crocoblock.com...
✔️ Ultimate Add Ons: ultimateelemen...
✔️ Elementor Custom Skin: gumroad.com/a/...
✔️ All In One SEO: www.shareasale...
BUSINESS TOOLS:
✔️ Dubsado: www.dubsado.co...
✔️ MailerLite: www.mailerlite...
✔️ Wave: waveapps.com/
GRAPHICS:
✔️ Adobe: clkuk.tradedoub...
WEBSITE HOSTING:
✔️ KnownHost: www.knownhost....
------
For more information regarding our web design and branding services, please visit wickydesign.com
Great Thanks a lot for this informative video@Wicky Design🙏🙏
Great tutorial! I have been working on this all day long with no success-until I watched your video. Thank you!
You're welcome!
I have Astra theme and Elementor PRO but I had some issues at first but then I put the code also in the astra theme css options and it works thanks guys, it´s great!!
I tried putting the css in Astra and on the page (elementor pro) and made it a fresh inner column so not to have "sticky" from previous parts in it. still doesnt work for me.
Oh I was seraching for exactly this and thought it would be really complicated - but it was not!! Thank you so much.
Thank you guys, you safe my day!
The thing I have is that the sticky sidebar remains sticky even when the section is done. I mean when I create a new section with one column the sidebar keep scrolling until the footer section. How can I solve this? I use hello theme.
I am an interface designer, and I made an idea like this and presented it to a client and she loved it. I thought it would be impossible since I know nothing about hard coding, but glad I found this. Thank you very much.
Awesome! Thanks for watching!
@@WickyDesign but unfortunately, this does not work anymore in the latest version.
I just tested with Elementor 3.6.1 and Elementor Pro 3.6.4 and the code still works. The new version has the Flexbox Container active by default in the Experiments settings. Try to disable Flexbox Container in Elementor/Settings/Experiments.
@@WickyDesign woow. I will try. Thanks for the reply
@@WickyDesign I have one last question. Why does mine disappears at the end, instead of staying? ahahaha
Thanks a lot! Was looking for this all over and couldn't find any tutorial. Great work!
Works perfectly! Thank you.
Work, thanks!
It worked! Brilliant! Thanks!
Worked perfectly! Thank you!
It doesn't work any more since some weeks for me, i guess with new updates (php maybe?). The section is not sticky anymore and It's breaking now things inside such as flex boxes, orders of boxes..
Exactly what I was looking for. Thanks a lot :)
You make my day, thank you!
it's really helpful and easy to follow for the sticky column bit, thank you!
This was very helpful.
Thank-you so much! You are awsome!
Worked like a charm! Thank you a lot
SIR YOU had good answer of this error 😃 👍👍👍👍💕💕💕
AMAZING!!! Thanks for the help
Thank you very much, the tutorial helped me, I saw two complete advertising videos as a way to thank you for this great tutorial, greetings and that your channel continues to grow
Awesome! Thanks for the support! :)
Thanks a lot!! Subscribed
Hello! Does it work with flexbox? What kind of change should be done on the CSS code?
Really thanks for sharing your code.
All the weekend trying to do this with no success with other tutorials.
Many thanks, again.
Thanks for watching!
Thanks for sharing!
Elementor Pro has the option for make your sidebar sticky, but has a lot of bugs! I was fighting for 2 hours...your video save me! :)
Awesome! Are you using the new containers? I know there's some bugs with the sticky columns and new containers system.
Thanks¡¡ This was live saving to me¡¡
Awesome! Exactly what I was looking for. I am going to create a custom post type for a Portfolio and wanted the info to stick to the right as the portfolio images scroll on the left. I hope this works. Will test tomorrow.
This worked like a charm! Thank you!
Great! I'm glad it worked! Make sure to subscribe to our new RUclips channel that covers more tutorials like this one: ruclips.net/user/web-design-videos-online
Hey, I have this problem where if I set my page layout to anything other than "Elementor Canvas", then the code will not work. Is there a fix to this? Thank you
Excellent video bro
looks awesome. Sadly it doesn't work for me :( I'm using elementor pro and following all the steps, don't know what could be wrong.
Thanks for watching! My first guess is maybe your server or browser cache needs to be cleared to see the changes?
@@WickyDesign I have the same problem..... The css works, it's here, it says position sticky but it doesnt stick...
I was looking for something else and found this by chance, very cool simple effect, landing in my code snippet note for later. +1 sub thank you!
Awesome thanks for watching! I have some new Elementor tricks coming soon.
@@WickyDesign i will keep my eyes peeled :)
I've been looking for a tutorial like this but I"m not able to make this work. Only the top-most text in the column moves down on scroll, but keeps on going all the way down the page and doesn't stop like yours. I have a column with text over an image that I'd like to scroll to then stop while text in the other column continues, then once they are at the point on the next section, continue scrolling together.
THANK YOU!
Great Thank You !!! I have another section under the picture (in the same column) and when I scroll down the picture overlap the section below. Do you have a trick to prevent that ? Thanks
Thanks for watching! Everything will need to be inside the 1 Inner Section for this to work correctly. If you try to do multiple Inner Sections with this trick you will run into problems with the offset.
@@WickyDesign Ok thanks!! for your answer I'll put everything in the same Section then :)
@@WickyDesign Thanks for your great video, it helped a ton. But I have the same problem, and I need to have two inner sections stacked one above the other, like Charlie. It can't be in the same section. Can you think of a workaround or can your recommend any ressources to fix this? Thanks a lot! :)
The best! Thank you :)
I tried the exact steps but it didn't work for me. I use free version of elementor so i added the css code in additional css in customize option but nothing happened. I tried different approaches as well but non of them worked. I also checked my overflow settings but again no progress.
Can anyone help out with this?
I just realized the custom code will make the column sticky, I had the sticky option on elementor active so you have to disable it for it to work.
Te amo man, me caso contigo es ya por este vídeo
You're the G
Thank you for this! You got me out of a bind!
(Liked and Subbed)
Thank you for the support!
It works, 🙏
Probably now that I see this video again, the problem I have will be resolved! I will try it with css very soon!
Can you help make this work with the new containers?
Is it 100% necessary to add the inner section to the column for this to work? Already have my temps built with my column stuffed with a bunch of elements that are not in an inner section.
Yes, you will need to put all your widgets inside an inner section to the column for it to work.
thank you so so much
Live saver! Thanks a lot for this simples, but awesome tutorial!
Thanks for the support!
Great!! Thanks!!
You're welcome!
Thank you very much!
You're welcome!
Hi, it dors not work for me. I am using elementor free, I followed the steps and I inserted the css code using code snippet but it does not work
Odd. Are you adding this to a normal page or post? I haven't tested this on a template page or custom post type.
@@WickyDesign i tested this on a normal page created with elementor
It's possible you need to clear your browser/server cache to see it work in the front end.
@Duck Cast I encountered the same problem. Thanks for the heads up.
@Duck Cast Thank you
Thanks, Bro!
Thanks!
Hello folks, everything good? I have 3 sections in the header of my site, can I keep all 3 fixed? I've tried using the Stichy function , but it doesn't work,they overlap, Do you know if there is another way? Thanks so much!
Thanks for watching! I haven't tried multiple sticky sections in a header. I will do some testing and if I can figure it out I will create a future video on the topic.
Ok, no problem. Tks so much for help.
The sidebar when i scroll down don't block...go under the footer...what i can try to make?
Make sure you turn off the Sticky setting inside the Motion Effects panel.
Hi! The sticky column works while the page loads, however, when the page fully loads, the sticky column jumps back to its position. What could be the problem? Btw, many thanks for the tutorial.
Thanks for watching! This sounds like a code conflict. Do you have other sticky elements on the page like a sticky header? Give it a try on an Elementor Canvas page template and see if that works.
Did you find any solution ? I have the same issue !
Son unos cracks.... Gracias!
Love how easy the tutorial is to follow!
I just can't get this to work on my site - the elementor sticky function also isn't working - the column just scrolls straight over the following sections.
Any idea what could be going wrong? Thanks! :)
Thanks for watching! It's hard to troubleshoot without seeing your website. It's possible your theme might be the problem. What theme are you using?
@@WickyDesign Thank you so much for your response. It is the Neve theme that the site is running on. I've tried it on another site with another theme and it works - but on this site (having swapped to elementor hello and then back to neve) it still wasn't working.
The code works when you select Elementor Canvas but doesn't work on other layout. Why?
This might be a theme/code conflict with Elementor. The good news is this feature will be native in Elementor coming very soon. Elementor 3.2 will have this built in (github.com/elementor/elementor/issues/14034)
@@WickyDesign The problem with elementor is that I am having problems with responsiveness... So i want to use my code. But it seems like elementor won't let me..... :(((((
Hi,
So i tried to use this trick since with elementor pro i can't get it working (well, it works, but when i resize the page to a greater window, the element sticks to the top of the page until I scroll). I tried everthing, even duplicate the element and make it sticky on tablet and desktop and hide this element on smartphone, and display another elementor that is not sticky for smartphones... I still have the same problem when I resize the page..... And I would like to try using code (position:sticky) but it seems like elementor won't let me!! The css is there in the inspector but it won't get sticky..... I am getting tired of this :( if anyone has a hint... Thank you
Hi Julie. Good news is Elementor has added this functionality inside Elementor Pro 3.2. Try to upgrade and use the new sticky column feature (elementor.com/blog/introducing-pro-3-2/).
did this stop working for anyone else?
I did some testing and it works good even in 3.8. I do know that there's a current bug with 3.8 if you apply the Stay in Column setting under motion effects. I opened a Github support ticket here ( github.com/elementor/elementor/issues/20203 ).
@@WickyDesign I got it to work after backing up and updating each plug-in individually but for some reason when I updated everything at once it caused it to stop working