Table of Contents
How to Use #
- Add the Widget — In the Elementor editor, search for “Sliding Text Bar” under the 🔥 PistonUI Widgets category. Drag it onto your page.
- 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.
- Choose a Separator — Pick a character or emoji that appears between each text item (default: ✦).
- Set Direction & Speed — Choose which way the text scrolls and how fast.
- Style It — Switch to the Style tab to change colors, font, rotation, and padding.
- 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.
