This tutorial will show you how to apply <marquee> code to your website. This code is really useful for many cases. I usually use this code for the notification bar under navigation. If you have a long notification, <marquee> is the best choice to use. So let’s do it together!
In this example, I use the Divi module to apply <marquee>. However, you can apply the code in any WordPress builder. Open text module and select Text area like this picture below to apply <marquee>.
This HTML marquee is scrolling default horizontally from right to left.
HTML
2. Scrolling with Direction
This HTML marquee is scrolling defult horizontally from right to left (direction=”left”). However, you can specify add direction to right (direction=”right”) , up (direction=”up”) and down (direction=”down”) in the HTML code.
HTML
Running with direction Right
3. Change Speed of Marquee
You can slow down or speed up when it run by adding scroll amount attribute along with a numeric value (scrollamount=”5″) is running faster (scrollamount=”1″).
HTML
4. Picture running by marquee
Not only text can use Marquee. You can add a picture inside the marquee to running like the text.
HTML
That’s it!
Incorporating a scrolling marquee into your WordPress website can add a dynamic and eye-catching element that captivates your audience. By following the step-by-step guide in this blog, you’ve learned how to seamlessly apply the scrolling marquee code, injecting life and movement into your content. This visually engaging feature not only enhances the aesthetics of your site but also contributes to a more interactive and memorable user experience. As you implement this creative touch, remember to monitor its impact on your website’s overall design and user engagement. With the scrolling marquee, you’re not just scrolling text – you’re scrolling towards a more dynamic and engaging online presence.
This is awesome post. Thank you!
You’re Welcome!