Adding scrolling text to your website can be a visually engaging way to highlight important messages or announcements. Elementor, a popular WordPress page builder, allows you to create dynamic designs without needing extensive coding knowledge.

Here, we’ll show you how to add scrolling text using a custom code snippet with HTML, CSS, and JavaScript, which you can integrate directly in Elementor.

Step 1: Create a New Section in Elementor

1. Go to your WordPress dashboard and open the page you want to edit with Elementor.
2. Create a new section or select an existing one where you want to add the scrolling text.

Step 2: Add HTML Widget for Create Scrolling Text in Elementor

1. In Elementor, search for the HTML widget in the elements panel.
2. Drag and drop the HTML widget into the section.

Step 3: Add the HTML Structure

In the HTML widget, add the following HTML code:

<div class="marquee">
  <h1>Your Scrolling Text Here</h1>
</div>

Replace "Your Scrolling Text Here" with the text you want to display as scrolling text.

Step 4: Add Custom CSS for Scrolling Effect

Now we’ll add some CSS to style and control the scrolling effect. To do this:

1. Go to Advanced > Custom CSS (this is available in Elementor Pro).
2. Paste the following CSS code:

.marquee {
  overflow: hidden;
  display: flex;
}

.marquee h1 {
  white-space: nowrap;
}

This CSS will make the text scroll horizontally and ensure that it doesn’t wrap onto a new line.

Step 5: Add JavaScript for Scrolling Motion

To make the text scroll, we’ll add some custom JavaScript. Here’s how:

1. Go to the Settings (gear icon at the bottom left) in Elementor, and select Custom Code.
2. Add the following JavaScript code:

<script>
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));
</script>

How the Code Works

• CSS Code:
  • The .marquee class sets the scrolling container’s overflow to hidden and aligns items in a single line, ensuring the text stays on one line.
  • The white-space: nowrap; style prevents text wrapping.
• JavaScript Code:
  • The Marquee function clones the text inside the marquee to create a seamless scrolling loop.
  • The setInterval function moves the text incrementally by changing the marginLeft property of the text element to create the scroll effect.
  • speed controls the scrolling speed, where a higher value increases the speed.

Step 6: Save and Preview

1. Once you have entered the HTML, CSS, and JavaScript, save your changes.
2. Preview the page to see the scrolling text in action.

Final Thoughts

Adding scrolling text in Elementor with custom code is simple and effective, allowing you to grab visitors’ attention without slowing down your site with unnecessary plugins. Just follow the steps above, and you’ll have smooth scrolling text on your site in no time!