docs.modx.pro
  1. Extras
  2. PageBuilder
  3. Section catalog
  4. Free
  5. Call to action

Call to action ​

A short accent block in the middle or at the end of the page. Title, supporting text, and one button with a URL.

Call to action

Why a separate CTA ​

  • Few fields: title, text, one button
  • Closes the funnel without repeating hero
  • pb-cta class ships with the package theme

Which pages ​

  • End of landing before the footer
  • Newsletter or demo signup
  • Link to catalog or pricing page

Page examples ​

Required fields ​

The button is hidden without a URL. Set both label and link.

Similar sections ​

  • Hero for above-the-fold with background
  • Contact form when you need fields, not a single link

Block parameters ​

ParameterValue
keycta
LayerFree
Categoryconversion (conversion)
Chunkpagebuilder_cta
Requires—

Inspector fields ​

Fill these fields in the section inspector. Field types are documented in the field types reference.

Title (title) ​

Type text. Required.

Text (text) ​

Type textarea. Optional.

Button label (button_label) ​

Type text. Required.

Button URL (button_url) ​

Type url. Required.

Site output ​

pb-cta with a pb-button link.

Section data ​

Example payload after save. Media, video, and map values may be enriched on output:

json
{
  "title": "Section title",
  "text": "Supporting text under the title.",
  "button_label": "Learn more",
  "button_url": "https://example.com/action"
}

Chunk template ​

Fenom chunk pagebuilder_cta:

fenom
<section class="pb-section pb-section--cta pb-cta{if $cssClass} {$cssClass|escape}{/if}" data-pb-section="cta"{if $id} id="pb-{$id|escape}"{/if}>
  <div class="pb-section__inner pb-cta__inner">
    <h2 class="pb-heading pb-cta__title">{$title|pb_text}</h2>
    {if $text}
      <p class="pb-cta__text">{$text|pb_text}</p>
    {/if}
    {if $button_label && $button_url}
      <div class="pb-cta__actions">
        <a class="pb-cta__button pb-button" href="{$button_url|pb_href|escape}">{$button_label|pb_text}</a>
      </div>
    {/if}
  </div>
</section>

See also ​