Call To Action

A two-column CTA band with image, copy, and button — similar layout controls to Columns.

View demo

Mustard CTA band with headline, copy, button, and a circular portrait on the right.
Mustard CTA band with headline, copy, button, and a circular portrait on the right.

Usage

The Call To Action block highlights content and prompts visitors to take the next step. It pairs a media column (image) with a content column (headline, subheadline, body copy, and link) in a single band — similar in layout to Columns, but purpose-built for CTAs.

Use it to draw attention to a signup, purchase, contact prompt, or any focal message. You can also nest paragraphs and lists in the copy area for short supporting detail.

Layout

The block splits into two sides on desktop and stacks on mobile (media typically appears above copy). Layout controls mirror Columns:

  • Columns Size — even 50/50 split or golden-ratio emphasis (61.8% / 38.2%) on the larger side
  • Swap Blocks — reverses media and content on desktop only; on mobile, media stays above copy
  • Content Position — matrix control in the block toolbar sets text placement and alignment within the content column; right alignment reverts to left on mobile

Appearance

  • Image Style — Sharp, Rounded, or Circle on the media figure
  • Rounded — rounds the outer CTA container
  • Border — inset border around the band
  • BG Color — palette fill behind the block
  • Text Color (reverse print) — light text on dark backgrounds; cascades to nested copy
  • Padding — internal spacing in em

Enable reverse print when using a dark background color so nested paragraphs and the button stay legible.

Typography

  • Headlines and Subheadlines — Customizer style presets (h1–h6, paragraph, bold)
  • Links — button, understated, hollow, or alternate styles for the CTA link

Edit headline and subheadline inline in the editor or from the Content sidebar panel.

Content

  • Choose Image — photo or graphic in the media column (placeholder when empty)
  • Headline and Subheadline — primary and supporting messages
  • Copy — paragraph or list blocks below the subheadline
  • Link URL — set in the toolbar or sidebar; edit button text inline on the card

Block width

Supports Wide and Full alignment from the block toolbar.

Tips

  • Default sizing favors a larger content column (blocks-larger-right) — swap or resize when the image should dominate.
  • Use Circle image style for headshots or logos; Rounded container + sharp image for editorial photo CTAs.
  • Keep copy to a sentence or two; let the headline and button carry the action.
  • Pair a muted BG Color with reverse print for a high-contrast band between page sections.

Screenshots

Front-end

  • White rounded CTA card on a textured green section — photo left, copy and button right.
    White rounded CTA card on a textured green section — photo left, copy and button right.
  • Mustard CTA with circular image style and Start the Conversation button.
    Mustard CTA with circular image style and Start the Conversation button.

Editor

  • Appearance settings — columns size, rounded image, border, text color, and background.
    Appearance settings — columns size, rounded image, border, text color, and background.
  • Circle image style with Swap Blocks, mustard background, and larger padding.
    Circle image style with Swap Blocks, mustard background, and larger padding.

Settings

Appearance

Columns Size setting in the block editor sidebar
Columns Size

Splits desktop space between the media and content columns. Even is 50/50; large and larger presets use the golden ratio (61.8% / 38.2%). Independent of Swap Blocks.

  • Blocks Larger Left
  • Blocks Large Left
  • Block Size Even
  • Blocks Large Right
  • Blocks Larger Rightdefault
Image Style setting in the block editor sidebar
Image Style

Shapes the media figure — sharp corners, rounded corners, or a circular crop for portraits and logos.

  • Sharp
  • Roundeddefault
  • Circle
Rounded setting in the block editor sidebar
Rounded

Rounds the outer CTA container. Separate from Image Style, which only affects the media figure.

Swap Blocks setting in the block editor sidebar
Swap Blocks

Reverses media and content on desktop only. On mobile, media stays above the copy column.

Border setting in the block editor sidebar
Border

Adds an inset border around the CTA band to define edges against the page background.

Text Color setting in the block editor sidebar
Text Color

Switches text and nested copy to the light palette for contrast on dark backgrounds. Prefer this over setting text color on individual paragraphs.

  • Dark
  • Light
BG Color setting in the block editor sidebar
BG Color

Background fill from your site palette. Use a subtle gray to separate the CTA band from surrounding content, or a brand color for emphasis — pair dark fills with reverse print.

Padding (em) setting in the block editor sidebar
Padding (em)

Internal padding in em around the CTA content. Increase when the band feels tight against the headline and button.

Typography

Headlines setting in the block editor sidebar
Headlines

Customizer typography preset for the headline (h1–h6, paragraph, or bold).

  • <h1>
  • <h2>default
  • <h3>
  • <h4>
  • <h5>
  • <h6>
  • <p>
  • <strong>
Subheadlines setting in the block editor sidebar
Subheadlines

Customizer typography preset for the subheadline.

  • <h1>
  • <h2>
  • <h3>
  • <h4>default
  • <h5>
  • <h6>
  • <p>
  • <strong>
Links setting in the block editor sidebar
Links

Visual style for the CTA link — solid button, understated text, hollow button, or alternate button.

  • <button>default
  • <understated>
  • <hollow>
  • <alt>

Content

Link URL setting in the block editor sidebar
Link URL
Headline setting in the block editor sidebar
Headline

Primary message for the CTA. Also editable inline in the editor.

Subheadline setting in the block editor sidebar
Subheadline

Supporting line under the headline. Also editable inline in the editor.