The BEST Auto Scrolling / Sliding Text in WordPress and Elementor - Perfect Loop, No Plugins

Video Description

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=27702&nci=5383 Awesome, affordable hosting (the server your website needs to exist): https://www.hostinger.com/reialesa - use discount code 'REIALESA' to get an extra 10% off your purchase! If you want to combine this with IMAGES as well, you can follow the steps outlined in this video: https://youtu.be/GvtwcylLw2M Elementor Units Explained - How and When You Should Use PX, REM, EM, %, VH and VW - https://youtu.be/wKLXXE3Tq_c Best PRODUCT PAGE Practices - 8 Web Design Tips for Higher Conversions - https://youtu.be/u54a_YXvgmQ 🗞️ Subscribe to my newsletter: https://www.reialesa.com/newsletter/ 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!