The widget library for Squarespace is here Learn more

Highlighted Words Call to Action

Free

The Highlighted Words Call-to-Action is a high-impact typographic section designed to distill a brand’s value proposition into a single, unmissable statement. By using vibrant, pill-shaped highlights behind key terms, this widget adds a layer of "digital tactile" energy to your messaging. It is the ideal solution for modern startups, tech platforms, and creative agencies that want their primary headlines to feel active, intentional, and full of life.

Design & Visual Aesthetic

The widget focuses on a clean, centered composition that uses color as a structural element to guide the user's attention.

  • Dynamic Word Highlighting: The standout feature is the ability to wrap specific keywords in oversized, rounded background blocks. This not only emphasizes action-oriented words like "focused" and "launch" but also introduces a playful, modern brand palette to an otherwise minimalist layout.
  • Modern Geometric Typography: The headline uses a bold sans-serif font with tight letter spacing, providing an authoritative and "tech-forward" feel. The contrast between the stark black text and the soft pastel or neon highlights creates a sophisticated visual tension.
  • Balanced Hierarchy: A subtle "kicker" or sub-headline (like "Introducing Signal") sits above the main text in a muted tone, providing context without competing for attention. The entire section is anchored by a sleek, high-contrast button that serves as the final path to conversion.

Core Features

  • Customizable Highlight Palette: Through the Redesignee customizer, you can easily change the background colors of individual words to match your site’s specific accent colors or campaign themes.
  • Interactive Button Logic: The "Start your project" button features a minimalist arrow icon and smooth hover states, designed to feel responsive and encouraging to the user.
  • Fluid Engine Native: Built to perform seamlessly within Squarespace Fluid Engine, WordPress and other modern builders, this widget is lightweight and ensures that your messaging remains the focal point across all devices.
  • Adaptive Text Scaling: The layout is engineered to handle various sentence lengths. On mobile, the highlighted blocks maintain their padding and relationship to the text, ensuring a "pixel-perfect" mobile user experience.

Where to Use This Widget

The Highlighted Words CTA is most effective in high-traffic transition areas of a website:

  • Product Launch Sections: Perfect for the top of a page to announce a new feature or service with a "focused" and energetic tone.
  • Mid-Page Conversion Hooks: Use it halfway through a landing page to break up long sections of text and re-engage the user with a bold call-to-action.
  • Hero Sub-Sections: Position it directly below a primary hero image to summarize the "why" behind your brand in a clear, digestible format.
  • Portfolio "Next Project" Footers: Place it at the end of a case study to invite users to start their own journey with a visually confident invitation.

How to use this widget

  • Change your content and adjust the styles to match your design
  • Click export and copy the code
  • Paste it on your web page by adding a code/html block in your website builder (e.g., Squarespace, WordPress, Webflow, Wix) and paste the code.

👋 P.S. Have questions? Leave a comment.