Figma marketing website CTA sections

Every marketing page eventually has to ask. A CTA section is the full-width band that does the asking, usually just above the footer, sometimes between feature blocks, sometimes at the end of a long article. It is the cheapest section in the kit to place and the easiest to waste, because the layout was never the hard part. The hard part is deciding how often you are allowed to ask and what you say when you do.

Ask more than once, ask for the same thing

Long pages need repeated calls to action. Somebody convinced by the second feature block should not have to scroll past four more to act. Repetition is fine. Variety is what breaks a page: a "Start free trial" after the hero, a "Book a demo" mid-page, and a "Download the guide" at the bottom split one decision into three, and a visitor who cannot tell which one is the real offer picks none of them.

Repeat the same primary action at each natural pause and let the secondary action carry the alternatives. A quick test before handoff is to read only the buttons, top to bottom, ignoring everything else. If they describe one journey, the page holds together.

Loud at the bottom, quiet in the middle

The Type property covers that range. Simple left is the quietest at 286px tall on desktop, a headline and a button pair sitting on the page background. Simple centered is 366px. The horizontal card is 414px and the vertical card 494px, both contained blocks that sit inside the page rather than spanning it edge to edge.

Then the loud end: split images, iPhone and screen mockups, abstract image layouts, and two logo strips that borrow credibility from customer marks. A theme property flips the simpler layouts between the default surface and your brand color. A workable rule is that a mid-page CTA should be quiet enough that someone scrolling past does not feel accosted, while the one above the footer can be as loud as your brand allows, because at that point the alternative is leaving.

What the button actually says

Generic labels leak conversions. NN/g's study of the most common one found that "Get Started" stops users: it attracts the click and then drops people into a signup flow they had not agreed to.

Name the next screen instead, along the lines of "Create your workspace" or "See plans and pricing", and let the secondary action be honest about being the low-commitment option. Four of the layouts here fold a customer quote into the CTA, which is the right trade when the objection at that point in the page is trust rather than price.

The buttons themselves are instances of the kit's button components, so the hierarchy stays consistent with the rest of your product, and NN/g's rundown of button states is a reasonable checklist to run before handoff. On mobile these actions go full width, and it is worth measuring the result against the 44 by 44 pixel minimum in the WCAG target size criterion.

Sections compose into pages

A CTA section is the last block in a stack that starts with a header section and runs through features, metrics, and pricing. Both the landing page examples and the pricing page examples close on one of these components, so changing the closing ask across an entire site starts with one instance.

Three siblings are worth knowing about: an email capture belongs in a newsletter CTA section, an ask that needs real details belongs in a contact section, and a small prompt inside body copy belongs in an inline CTA rather than a full-width band. Everything here exists at 1,440px and 375px in light and dark.

The coded versions are already built. Untitled UI React CTA sections are open source, built with Tailwind CSS and React Aria, so the closing block you designed drops in with its responsive behaviour intact.