The BEST Auto Scrolling / Sliding Text in WordPress and Elementor - Perfect Loop, No Plugins
Everything required to do this is pinned 📌 to the top comment.
What I use to build amazing websites:
Elementor (the best WordPress page builder): https://be.elementor.com/visit/?bta=2...
Awesome, affordable hosting (the server your website needs to exist): https://www.hostg.xyz/SHBd2
If you want to combine this with IMAGES as well, you can follow the steps outlined in this video: • Add Images or Icons to Any Part of a ...
Elementor Units Explained - How and When You Should Use PX, REM, EM, %, VH and VW - • Elementor Units Explained - How and W...
Best PRODUCT PAGE Practices - 8 Web Design Tips for Higher Conversions - • Best PRODUCT PAGE Practices - 8 Web D...
🧙 Wizards of Webcraft – A series where I’ll be reviewing your websites - https://www.reialesa.com/wow/ Apply now!
Sliding text is something you've probably seen on several websites. It's an awesome effect, but it can be hard to achieve. Especially because many CSS options don't work like they're supposed to. They lag, they stop, they skip. We're going to go over how to create awesome auto scrolling text, without any plugins, in just a couple of minutes. And the automatically sliding text is going to loop perfectly, it's going to be smooth and it's going to be fully responsive and customizable.
Because we're going to be using HTML, CSS and JavaScript, you can use this anywhere. I'll be showing you how to do it in WordPress and Elementor, but you can follow the same process to create this with any other page builder.
We're going to go over how to create a single scrolling text and how to use this effect multiple times on the same page and on the same website. Then, we're going to reverse its direction, so we can not only have text sliding from right to left but from the left to right as well. We will also rotate the text and take a look at how we can make it full width.
After that, we're going to create a banner, which is text with a colored background. Actually, we're going to create two. And we're going to rotate them, offset them and make them overlap, meaning, we're going to place one on top of the other. On top of that, you can easily give this sliding text more space between words by adding in a non-breaking space.
All of these effects can be combined and they are fully customizable and responsive. This is an amazing, easy effect that will help you add visual interest to your websites and make your designs more engaging.
#slidingtext #scrollingtext #elementor
CHAPTERS:
00:00 - Intro
00:42 - Basic sliding text
02:53 - Making it responsive
03:55 - Adding multiple to the same page
06:09 - Adding multiple to other pages
06:48 - Reversing the direction
07:34 - Rotating the text
07:59 - Making it full screen
08:41 - Creating a rotated banner
09:50 - Fixing the gap
10:20 - Fixing the overflow
12:03 - Making the banners overlap
12:49 - Adding in space between your words
13:22 - Solving issues
Get in touch:
https://www.reialesa.com/youtube/
Don’t be shy! Let me know what you’d like to see next, ask me anything related to design or just simply say hi.
Please note that some of the above are affiliate links, which means I earn a commission if you make a purchase, at no additional cost to you. Thank you very much if you decide to use them!
