August 1, 2023

Auto Scrolling Text Elementor – Creating A Marquee Effect

Play Video

Auto-scrolling text Elementor tutorial – learn how to create a dynamic marquee effect. Wicky Design walks you through the process of creating right-to-left and left-to-right animations, understanding the role of content in the animation, and styling and customizing your animation.

Understanding the Basics of Auto Scrolling Text in Elementor

To create auto-scrolling text in Elementor, you’ll need a couple of things. First, you’ll need a heading widget. This is where you’ll put the text that you want to scroll. You’ll also need to assign a unique CSS class to this widget. This is like giving your widget a name so that you can refer to it later.

The other key player in this process is an HTML widget. This is where you’ll put some JavaScript code. JavaScript is a programming language that lets you add interactive features to your website, like auto-scrolling text!

Creating a Right-to-Left Animation

Let’s start by creating a right-to-left animation. Here’s how you can do it:

  1. Drag a heading widget onto your page.
  2. Type in the text you want to scroll.
  3. Go to the Advanced tab and add a unique CSS class. Let’s call it “marquee”.

Now, let’s add some CSS and JavaScript. Don’t worry, it’s not as scary as it sounds!

  1. Go to the settings cog in Elementor.
  2. Go to the Advanced tab and paste in the following CSS code:
    .marquee {
      overflow: hidden;
      display: flex;
    .marquee h1{
      white-space: nowrap;

    Source: Wicky Design

  3. Drag an HTML widget onto your page.
  4. Paste in the following JavaScript code:
    function Marquee(selector, speed) {
      const parent = document.querySelector(selector);
      const clone = parent.innerHTML;
      let i = 0;
      parent.innerHTML += clone;
      setInterval(() => {
        i += speed;
        if (i >= parent.children[0].clientWidth) i = 0;
        parent.children[0].style.marginLeft = `-${i}px`;
      }, 0);
    window.addEventListener('load', () => Marquee('.marquee', .5));

    Source: Wicky Design

    The “0.5” in the JavaScript code is the speed of the animation. You can change this number to make the animation faster or slower.

Understanding the Role of Content in the Animation

The amount of text you have matters. If you don’t have enough text, the animation might look a bit odd. It’s like trying to make a sandwich with too little bread – it just doesn’t work!

To fix this, you can repeat your text a few times. You can also add non-breaking spaces between your text. This is like adding extra slices of bread to your sandwich to make it just right.

Creating a Left-to-Right Animation

Creating a left-to-right animation is similar to creating a right-to-left animation. The main difference is that you’ll need to use a different CSS class. Let’s call it “marquee2”.

Here’s the CSS code you’ll need:

.marquee2 {
  overflow: hidden;
  display: flex;

.marquee2 h1{
  white-space: nowrap;

Source: Wicky Design

And here’s the JavaScript code:

function Marquee2(selector, speed) {
  const parent = document.querySelector(selector);
  const clone = parent.innerHTML;
  let i = parent.children[0].clientWidth;
  parent.innerHTML += clone + clone;
  const totalWidth = parent.children[0].clientWidth * 2;
  setInterval(() => {
    i -= speed;
    if (i <= 0) i = totalWidth;
    parent.children[0].style.marginLeft = `-${i}px`;
  }, 0);

window.addEventListener('load', () => Marquee2('.marquee2', .5));

Source: Wicky Design

Styling and Customizing the Animation

You can style your animation however you like. You can change the size of the text, the color, the background, and more.

Scrolling Text Elementor – Conclusion

You now know how to create auto-scrolling text in Elementor. It’s a fun way to add some movement to your website. So, why not give it a try? You might just find that it’s a lot of fun!

Required Resources

Elementor Logo
Free Options
Credit to Wicky Design
Immerse yourself in the world of web design with Barbara and Mark, a talented husband and wife duo based in Philadelphia, PA. Their channel focuses on everything from web design and Elementor to WordPress and growing an online business. With their unique blend of experience and expertise, they offer invaluable tips, tutorials, and insights for both beginners and experts.
Auto Scrolling Text Elementor – Creating A Marquee Effect
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.