Cta

Call-to-action section with a title and a button.

A compact section that prompts the visitor to act, with a catchy title and a button.

Place a Cta block at the natural end of a train of thought: after explaining a feature, closing an article, or reaching the bottom of a landing page. It gives visitors one clear next step instead of leaving them to hunt for a link themselves.

Common uses are "Get in touch" after a services page, "Start free trial" after a pricing page, or "Read the next guide" at the bottom of a blog post. Keep the title short and the button label action-oriented.

Pair a Cta with a Form block if you want visitors to convert directly on the page instead of navigating away.

Where a Cta earns its place

On a webshop, a Cta after a product description works well to push toward checkout or a related bundle, while on a portfolio site it typically closes a case study with an invitation to get in touch about a similar project. On a professional services page — say, an accountancy or legal practice — the natural Cta is booking a consultation or calling a specific number, placed right after the page has explained what the service covers. In every case the Cta comes after the visitor has enough information to act, not before.

A common mistake is stacking more than one Cta on the same page competing for attention — a "Get in touch" and a "Download brochure" side by side dilute each other, so pick the single next step that matters most for that page. Another is a vague button label like "Click here" or "Learn more" that doesn't say what happens next; "Get in touch", "Book a call" or "Start free trial" all tell the visitor exactly what they're choosing. A title that just repeats the page's own heading also wastes the chance to add a fresh, action-oriented line.

A Cta section often benefits from a GsapReveal wrapper so it fades into place rather than appearing abruptly at the bottom of a long page, drawing the eye at the exact moment it matters. On pages meant to answer objections before asking for action, an Faq block placed just above the Cta clears up hesitations first.

Keep title and button text short enough to stay legible at any width, and make sure the button has sufficient colour contrast against its background — since a Cta is often the single most important interactive element on the page, it shouldn't rely on colour alone to stand out from surrounding text.

cta.jsx
<Cta title='Ready to start?' href='/en/contact/' label='Get in touch' />