Smiley Offer Marquee

A clean editorial marquee widget with looping offer text, smiley emoji separators, and warm custom colors for promotional banners and announcement strips.

Inject personality and seamless motion into your website with the Smiley Offer Text Marquee, a lightweight, highly engaging scrolling banner designed to grab attention without disrupting the user experience.

Unlike intrusive pop-ups or massive hero videos, this text marquee provides a subtle, continuous flow of information that feels native to modern, high-end web design. It is the perfect blend of typography, motion, and brand personality.

Visual Appearance

The marquee features a clean, warm aesthetic, showcased on a soft beige background that feels approachable and modern. It utilizes a sophisticated typographic rhythm by mixing bold statement text (like "Creative Circle" and "Members First") with regular-weight descriptive copy ("New classes, live sessions...").

What truly sets this widget apart is the visual separator: a playful, coral-colored circular badge housing a minimalist smiley face icon. This friendly micro-element breaks up the text blocks, adding a pop of color and a welcoming vibe that instantly humanizes your brand.

Smart Interaction: Pause on Hover

Continuous motion can sometimes be frustrating for users trying to read specific details. This marquee solves that accessibility issue with a built-in Pause-on-Hover interaction.

The text scrolls in a smooth, infinite loop across the screen. However, the moment a user moves their cursor over the banner, the animation gracefully halts. This intuitive feature allows visitors to easily read the full offer, process the information at their own pace, or click any embedded links without having to "chase" moving text across the screen. Once the cursor leaves the area, the smooth scrolling automatically resumes.

Versatile Use Cases

Because of its slim profile and friendly design, this marquee can be deployed across various touchpoints on your website:

• Global Announcement Bar: Pin it to the very top of your website to announce global site-wide sales, free shipping thresholds, or limited-time offers.
• Membership & Course Promos: As seen in the demo, it is perfect for teasing community features (e.g., "New classes, live sessions, and bonus resources included").
• Section Dividers: Use it to break up long, text-heavy pages. Placing a scrolling marquee between a pricing table and a testimonial section creates a natural, eye-catching visual break.
• Footer Anchor: Place it just above your website's footer to capture the user's attention with a final call-to-action or newsletter push before they reach the bottom of the page.

Cross-Platform Integration

Forget about installing heavy, site-slowing ticker plugins. This marquee is built with pure, un-nested CSS animations and minimal markup, making it universally compatible across all major platforms:

• WordPress & Elementor: Drop the clean HTML/CSS directly into a Custom HTML block or the Elementor editor. It will immediately inherit your theme's global fonts.
• Shopify: The ultimate e-commerce upgrade. Paste the code into a custom liquid section to replace your static, boring default announcement bar with this high-converting motion banner.
• Squarespace (Fluid Engine): Break free from rigid templates. Add this via a standard Code or Markdown block to inject custom CSS animations that Squarespace doesn't offer out of the box.
• Webflow & Custom Stacks: A developer’s dream. The self-contained code snippet can be pasted into any embed component, ensuring flawless responsive scaling and lightning-fast load times across mobile and desktop breakpoints.

How to install Smiley Offer Marquee to your website

Bring this layout to life on your website in just a few clicks.

Install on Squarespace

Edit Smiley Offer Marquee visually using the native Squarespace extension

+−

First, ensure you have connected your website to the native Redesignee extension. Once connected, you have two easy ways to build:

1. Native Block: Simply add the native Redesignee Widget Block directly from the fluid engine editor menu inside Squarespace.

2. Manual Markdown: Add a standard Markdown Block, paste your widget’s code snippet, and the Redesignee floating "Customize" button will automatically appear right over the block.

Both methods let you tweak settings, copy items, and design visually in real time. Saving your changes syncs the updates instantly to your live page.

See Squarespace installation guide

Install on WordPress

Connect natively via Gutenberg or Elementor

+−

Make sure you have the free Redesignee WordPress Plugin installed. To drop the Smiley Offer Marquee into Elementor, simply drag and drop the Redesignee widget from your sidebar. If you are using the Gutenberg Block Editor, click the " + " icon and select the Redesignee Block. Launch the Cloud Library directly inside your workspace, choose your customized template, and import it with a single click. It automatically inherits your theme fonts and styles!

WordPress plugin installation guide

Install on Other CMS as Code

Quick copy-and-paste for custom setups

+−

If you are using Webflow, Shopify, Wix, or a custom HTML site, click the "Export Widget" button on this page and ensure the platform selector is set to "HTML". Click "Copy" to copy the clean, un-nested source code snippet directly to your clipboard. Paste this code into any HTML component, Code Block, or Embed tool inside your website builder. All styles, animations, and scripts are self-contained and ready to run.