How to create an eye catching marquee with Divi theme

The text marquee design effect is one of the easiest ways to make your website feel dynamic and engaging. In this tutorial, I’ll show you how to create a smooth, continuous scrolling text banner using simple HTML and CSS with no JavaScript required.

This is perfect for displaying promotions, announcements, or updates across your Divi or WordPress website. You can also use it to highlight product categories, featured items, or upcoming events.

What the Code Does

The HTML structure contains a main container called .marquee and an inner .track that moves horizontally across the screen. Inside the track, you can add your custom text or phrases. The CSS then uses a keyframe animation called marquee to smoothly move the content from right to left.

This text marquee design automatically loops, creating a continuous scroll. When users hover over the text, the animation pauses, allowing them to read it easily before it continues.

How to Add It

1. Copy the HTML and place it anywhere inside your Divi Text Module, Code Module, or page section.
2. Add the CSS either in your Divi Theme Options > Custom CSS, or in your child theme stylesheet.
3. Adjust the height and animation speed in the CSS to match your design.

You can replace the sample text inside the <span> element with your own content. The sample includes:

→ Our New Arrivals → Best Sellers → Visit Our Shop → Contact Us → Subscribe to Our Newsletter

Why Use This Text Marquee Design

The text marquee design adds movement and visual interest without heavy scripts or plugins. It’s lightweight, responsive, and easy to style. Whether you use Divi or any other theme, it works across modern browsers and looks great on both desktop and mobile.

You can also duplicate the <span> content to make the loop appear seamless and continuous. It’s a quick, professional touch for modern web designs that keeps visitors engaged.

Bonus Styling Ideas

• Change the text color or background to match your brand palette
• Use bold or uppercase styles for promotional messages
• Combine it with icons or emojis for extra flair
• Adjust animation timing for slower or faster scrolling

If you want to dive deeper into advanced animations, check out the CSS Animations Guide on MDN Web Docs or explore more Divi design tips on the Elegant Themes Blog.

Video Tutorial

Watch on YouTube

Full Code

<style>
.marquee {
  position: relative;
  width: 100%;
  height: 50px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.track {
  display: flex;
  white-space: nowrap;
  animation: marquee 20s linear infinite;
}

.track > span {
  flex-shrink: 0;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.marquee:hover .track {
  animation-play-state: paused;
}
</style>

<div class="marquee">
  <div class="track">
    <span>
      → Our New Arrivals → Best Sellers → Visit Our Shop → Contact Us → Subscribe to Our Newsletter →
      Our New Arrivals → Best Sellers → Visit Our Shop → Contact Us → Subscribe to Our Newsletter
    </span>
  </div>
</div>