How to Create a Seamless, Continuous Sliding Text Marquee in Elementor Free

Creating a scrolling text marquee (often called a “ticker”) can add a dynamic touch to your website, perfect for announcements, breaking news, or promotional messages. While Elementor Pro offers a dedicated widget for this, you can achieve a perfectly seamless and continuous scrolling effect using Elementor Free with a little custom CSS and HTML.

This tutorial will guide you through the exact steps to create a smooth, looping marquee without any visible gaps or glitches.

Let’s walk through how to do it! So you will be making titles like this in no time :

A MARQUEE HEADER + A MARQUEE HEADER + A MARQUEE HEADER + A MARQUEE HEADER + A MARQUEE HEADER + A MARQUEE HEADER + A MARQUEE HEADER + A MARQUEE HEADER + A MARQUEE HEADER + A MARQUEE HEADER + A MARQUEE HEADER + A MARQUEE HEADER +

Why Not Just Use an Addon?

Free Elementor addons often include a “Ticker” or “Marquee” widget. While convenient, adding extra plugins can sometimes impact site performance. This method uses minimal code, keeping your site lean and giving you full control.

What We're Building

We’ll create a text marquee that:

Scrolls continuously without any visible start/end points.
Is fully customizable (speed, font, color, etc.).
Uses Elementor’s native Container and Heading widgets.

Step 1: Set Up Your Elementor Structure (Container & Heading)

First, let’s create the basic structure in your Elementor editor.

Add a Container: Drag a new Container widget onto your page where you want the marquee to appear. This will be our outer wrapper.
- Give it a CSS Class: Go to the Container’s Advanced tab, find “CSS Classes,” and add: custom-marquee-container
Add a Heading Widget: Drag a Heading widget inside the container you just created. This will hold your scrolling text.
- Give it a CSS Class: Go to the Heading widget’s Advanced tab, find “CSS Classes,” and add: custom-marquee-text
- Optional Styling (Heading Widget): You can set your basic typography, text color, etc., in the Heading widget’s “Style” tab, but we’ll also define some of it in our custom CSS for consistency.

Step 2: The Crucial Step: Duplicating Your Text Content

This is where the magic of the seamless loop happens. To ensure no gaps or delays, your text needs to be duplicated within the Heading widget itself, and crucially, it needs to be long enough to overflow its container.

Edit Your Heading Widget: Click on the Heading widget to open its settings.
Go to the Content Tab: Find the “Title” field.
Craft and Duplicate Your Text:
- First, type out the full phrase or set of phrases you want to scroll as one complete unit.
- Repeat this entire unit multiple times until you’re absolutely sure it’s much wider than the container it’s in. A good visual check is when you see the text getting cut off to the right in the Elementor editor.
- Ensure Perfect Duplication: Copy the entire first block of text (including any spaces or separators like •) and paste it immediately after itself. Do this several times.
Example: If your desired message unit is NEW ARRIVALS • FREE SHIPPING • SHOP NOW • You would enter something like:
NEW ARRIVALS • FREE SHIPPING • SHOP NOW • NEW ARRIVALS • FREE SHIPPING • SHOP NOW • NEW ARRIVALS • FREE SHIPPING • SHOP NOW • NEW ARRIVALS • FREE SHIPPING • SHOP NOW •
Remember: The total length of this string, when set to white-space: nowrap, needs to be longer than your screen for a truly gap-free experience.

Step 3: Add the Custom CSS for Animation

Now, we’ll add the CSS that brings your text to life. This code is optimized for seamless looping and smooth performance, addressing common glitches.

Where to Add CSS:
- Add an html-block anywhere on the page (it will not be visible in the front end)
- Open the html-block
- Paste the following code into the code box.
- Alternatively, you can add it in Elementor by going to Dashboard > Elementor > Custom Code (requires Elementor Pro or a custom code plugin if not available).

<style>
/* -- Seamless & Glitch-Free Marquee for Elementor Free -- */

/* 1. The Outer Container: Hides overflowing text */
.custom-marquee-container {
  overflow: hidden; /* Essential for hiding text outside the view */
  width: 100%; /* Ensure it takes full available width */
}

/* 2. The Heading Widget Wrapper: Acts as a flexible container for its content */
.custom-marquee-text {
  /* No animation directly on this wrapper */
  display: flex; /* Helps in making the inner heading behave */
}

/* 3. The Actual Heading Tag (e.g., h1, h2, h3) inside the widget: This is our animated element */
.custom-marquee-text .elementor-heading-title {
  display: inline-block; /* Allows it to size itself based on its content */
  white-space: nowrap;   /* CRUCIAL: Prevents text from wrapping to a new line */
  margin: 0;             /* Remove any default heading margins that might interfere */
  
  /* Marquee Animation Properties */
  animation: marquee-scroll 40s linear infinite; /* Adjust '40s' for speed (lower = faster) */
  will-change: transform; /* Optimizes animation performance, reducing glitches */

  /* Default Text Styling (can be overridden by Elementor's style tab) */
  font-size: 24px;       /* Example: Adjust font size */
  color: #000000;        /* Example: Adjust text color */
  padding-right: 40px;   /* Adds a little spacing after each full text unit */
}

/* 4. The Animation Keyframes: Defines the scrolling motion */
@keyframes marquee-scroll {
  from {
    transform: translateX(0); /* Starts at its original position */
  }
  to {
    transform: translateX(-50%); /* Moves left by half its total width for seamless looping */
  }
}
</style>

As soon as you paste the code, you should see your heading text transform to this appealing animated marquee!

Customizing Your Marquee

@keyframes marquee-scroll {
  from {
    transform: translateX(-50%); /* Starts half-way to the left */
  }
  to {
    transform: translateX(0); /* Moves back to the original position */
  }
}

Note: If changing direction, you might need to adjust the padding-left or padding-right to control initial spacing.

Conclusion

You now have a fully functional, seamless, and glitch-free continuous scrolling text marquee in Elementor Free! This method is robust, lightweight, and gives you excellent control over the final look and feel without relying on additional plugins. Experiment with the settings to perfectly integrate it into your website design.