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 — 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’s 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,” but feel free to change it to match your brand.

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.

HTML STRUCTURE:

<div class="marquee">
<div class="track">
    <!-- Original Content -->
    <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>

CSS CODE:

.marquee {
  position: relative;
  width: 100%; /* Full width of the container */
  height: 50px; /* Adjust height based on your text size */
  overflow: hidden; /* Hide any overflowing content */
  display: flex;
  align-items: center; /* Vertically align the text */
}

.track {
  display: flex; /* Arrange items horizontally */
  white-space: nowrap; /* Prevent wrapping of content */
  animation: marquee 20s linear infinite; /* Smooth scrolling animation */
}

.track > span {
  flex-shrink: 0; /* Prevent shrinking of text */
}


@keyframes marquee {
  from {
    transform: translateX(0); /* Start at the initial position */
  }
  to {
    transform: translateX(-50%); /* Move left by half the width of the track */
  }
}

/* Pause on hover */
.marquee:hover .track {
  animation-play-state: paused; /* Pause scrolling on hover */
}