---
title: Sliding Text Bar Widget
description: "## How to Use 1. **Add the Widget** — In the Elementor editor, search for **\"Sliding Text Bar\"** under the 🔥 PistonUI Widgets category. Drag it onto your page. 2. **Add Your Texts** — In the **Content** tab, you'll see a repeater list. Each item is one text phrase. Add, edit, or remove items as needed. 3. **Choose a Separator** — Pick a character or emoji that appears between each text item (default:…"
url: "https://pistonui.com/docs/sliding-text-bar-widget/"
updated: "2026-02-08"
category: Widgets
---

# Sliding Text Bar Widget

## How to Use

1. **Add the Widget** — In the Elementor editor, search for **"Sliding Text Bar"** under the 🔥 PistonUI Widgets category. Drag it onto your page.
2. **Add Your Texts** — In the **Content** tab, you'll see a repeater list. Each item is one text phrase. Add, edit, or remove items as needed.
3. **Choose a Separator** — Pick a character or emoji that appears between each text item (default: ✦).
4. **Set Direction & Speed** — Choose which way the text scrolls and how fast.
5. **Style It** — Switch to the **Style** tab to change colors, font, rotation, and padding.
6. **Done!** — Preview your page to see the scrolling text in action.

---

## Content Options

| Option | What It Does | Default |
| --- | --- | --- |
| **Texts** | A repeater list of text items that scroll across the bar. Add as many as you like. | 3 sample texts |
| **Separator** | A character shown between each text item (e.g. ✦, •, |, ★). | ✦ |
| **Direction** | Scroll direction — **Left → Right** or **Right → Left**. | Right → Left |
| **Speed (seconds)** | How long one full scroll cycle takes. Lower = faster. Range: 5–60 seconds. | 20s |
| **Gap (px)** | Space between text items and separators. Range: 0–100px. | 40px |
| **Extend Left/Right (px)** | Makes the bar wider than its container by extending equally on both sides. Useful when you want the bar to bleed outside its column. Range: 0–1000px. | 0px |
| **Full Width (edge-to-edge)** | Toggle ON to stretch the bar across the entire browser window, ignoring any container or section padding. | Off |
| **Extra Bleed (px)** | Only visible when Full Width is ON. Adds extra width beyond the viewport edges — useful when the bar is rotated, so corners don't show gaps. Range: 0–1000px. | 120px |

---

## Style Options

| Option | What It Does | Default |
| --- | --- | --- |
| **Background Color** | The bar's background color. | #F7CF66 (yellow) |
| **Text Color** | Color of the scrolling text. | #0A0A0A (near black) |
| **Rotate (deg)** | Tilts the entire bar. Great for diagonal banner effects. Range: -90° to 90°. | 0° |
| **Typography** | Full font controls — family, size, weight, style, line height, letter spacing, etc. | Theme default |
| **Padding** | Inner spacing around the text inside the bar (top, right, bottom, left). Responsive — set different values for desktop, tablet, and mobile. | 14px 16px 14px 16px |

---

## Tips & Common Use Cases

- **Announcement Bar** — Add it to the top of your page with a message like "Free Shipping on Orders Over $50 ✦ Shop Now".
- **Diagonal Banner** — Set **Rotate** to -3° or 3°, turn on **Full Width**, and increase **Extra Bleed** to ~120px for a trendy angled banner with no corner gaps.
- **Slow Ambient Text** — Set speed to 40–60 seconds for a subtle, slow-moving background element.
- **Fast Ticker** — Set speed to 5–10 seconds for an urgent, news-ticker feel.
- **Multiple Messages** — Add 4–5 different text items to cycle through various messages in one bar.
- **Custom Separators** — Try different separators like `•`, `|`, `—`, `★`, `→`, or even emoji like 🔥 to match your brand.
- **Stacked Bars** — Place two Sliding Text Bar widgets on top of each other with different directions and colors for a dynamic layered effect.