The part of the page that shouldn’t match
Three things go in a CTA section. The fourth one is contrast, and it’s the one everybody skips.
Blur your homepage and scroll it fast. If you can’t find the CTA section, you don’t have one.
Scroll your homepage fast enough that you can’t read it.
Where’s the CTA section?
If you can’t find it in a blurry two-second pass, it's not doing its job.
Calls to action fail because they are too soft. The copy is fine, the button works, the whole thing is perfectly on brand, but it's not creating the interrupt within the song that is your webpage.
It’s the bridge
The bridge in a song isn’t better than the chorus and it isn’t louder than the chorus. It’s the part that doesn’t sound like the rest of the song.
That’s your CTA section. Verse above it, verse below it, and this one part breaks pattern.
Three things go in it.
1. A line that gets somebody started
Not a description of your product, a question or a short statement pointed at the next thirty seconds of their life.
Ready to stop chasing invoices?
Get set up in ten minutes or less.
{Insert your verbiage here}
Two levers, time and benefit. How little of their day this costs, or what’s different when it’s done. Use one, use both, don’t write a paragraph.
This is where you stop explaining.
2. Your objection busters. Again.
No credit card. Cancel anytime. Free for fourteen days. Whatever sits under the button at the top of your page goes down here too.
That feels like annoying repetition, but it isn’t.
Up top the reader was cold and those lines lowered the cost of scrolling the page. Down here they’ve spent four minutes accumulating reasons to hesitate, and they’re not looking for a reason to buy anymore. They’re looking for the one reason to close the tab.
Same words. Different state of the reader.
3. A visual anchor
One thing to look at, and not a feature diagram nobody is going to study. Show the product doing the thing, or the dashboard they land in. It makes the section feel like a place instead of a paragraph.
No screenshot? A color field or a piece of texture does more here than another line of copy.
Two layouts. There is no third.
Left-right. Copy one side, image the other. Use it when the screenshot deserves the room.
Centered. Everything on the axis, image (if needed) underneath or behind. Use it when the words are the point.
The colored background on this card is a fluid, animated gradient, so please don't bother me about the checkboxes being visible on this ;)
The variety was never supposed to be in the arrangement.
Now make it not match
Here’s the part everybody skips, and it’s the whole reason the section exists.
A CTA section that obeys your style guide perfectly is a CTA section nobody notices. By the time a reader gets there your page has a rhythm, and that rhythm is doing exactly what it should right up until the moment you need somebody to stop.
So break it. Only here.
Change the ground.
Page is white, this one’s dark, or the accent color, or the one section carrying something behind it.
Size up.
Bigger headline than the section above it. Not a little bigger, BIG bigger.
Accent the button.
This is the one button allowed to be louder than every other button on the page. Second color, border, arrow, weight.
The sections on either side are supposed to be innocuous. That’s their assignment. Then the floor changes under them, and a reader who has been skimming for two minutes knows something is being asked of them before reading a word.
Every other section on the page is supposed to match. This one is supposed to interrupt.
— Zach 😎
