Highlighted Words Call to Action

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 install Highlighted Words Call to Action to your website

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

Install on Squarespace

Edit visually using the extension or native blocks

+−

First, ensure you have pasted the global Redesignee connector script into your site's Code Injection settings. 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. If you are using 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.