CTA Button

The CTA Button component allows content authors to add one or more CTA buttons to main content areas between other components. This component may also be used in the right column of the two-thirds sublayout and in some of the container components. Multiple CTA buttons display in a row as space allows and will then stack vertically.

cta-button-example
Figure 1: Example of a CTA Button component with three CTA buttons.

Component Information

Benefits

  • The CTA Button component adds one or more CTA buttons in between other components.
  • The component is usable in the main body area of a page and in both columns of a two-thirds sublayout.
  • The CTA Button component may also be used inside some of the other container components (i.e., accordion, side tabs and tabs).
  • This component is useful for giving a link more presence by making it a CTA button.

Live Example

Template Data

Frequently Asked Questions

No, the button is designed to appear green with white text. 

Yes. Content authors should keep browser window size and user experience in mind when adding multiple CTA Buttons. 

Instructions for Use

In Page Builder:

  1. Select the page in the site tree.
  2. Click the “+” button in the placeholder for the CTA Button.
  3. Select CTA Button component from the list.

Alternate method: 

  1. Select the page in the site tree.
  2. Click the Components tab at top of the left pane.
  3. Locate the CTA Button component.
  4. Drag the CTA Button component to placeholder on the page.

In Page Builder:

  1. Click on the CTA Button text field. “No text in field” appears by default.
  2. In the Element Options pane on the right side, select Internal from the Link type drop-down menu.
  3. Enter a link path from within the site or click Browse to open the link selection window. Choose the page to be linked and click Add link to select.
  4. Enter the link button label in the Link text box.
  5. Optional: Add tooltip text in the Link title text box. 
  1. Click on the CTA Button text field. “No text in field” appears by default.
  2. In the Element Options pane on the right side, select External from the Link type drop-down menu.
  3. Enter a full URL in the URL text box.
  4. Enter the link button label in the Link text box.
  5. Optional: Add tooltip text in the Link title text box. 

Note: While email and media link options are available in the Page Builder Element Options pane Link type menu, these link types are best added in Content Editor. 

  1. Open Content Editor:
    1. In Page Builder, click the drop-down arrow to the right of the Sitecore XM Cloud icon in upper left.
    2. Select Content Editor. It opens in a new browser tab.
  2. If the CTA Button does not appear in the Content Tree, close the page’s Data node and expand it again to refresh the Content Tree.
    1. In the Content Tree, expand Content > MSU > sitename > Home > page name > Data.
    2. Locate and expand the CTA Button component.
    3. Click on the CTA Button component in the Content Tree.
  3. Edit the link:
    1. Click the Insert email link.
    2. Add the button label in the Displayed Text box.
    3. Add the email address in the E-mail Address box.
    4. Optional: Add a subject link for the email in the Subject box.
    5. Click Insert email button.

Note: While email and media link options are available in the Page Builder Element Options pane Link type menu, these link types are best added in Content Editor. 

  1. Open Content Editor:
    1. In Page Builder, click the drop-down arrow to the right of the Sitecore XM Cloud icon in upper left.
    2. Select Content Editor. It opens in a new browser tab.
  2. If the CTA Button does not appear in the Content Tree, close the page’s Data node and expand it again to refresh the Content Tree.
    1. In the Content Tree, expand Content > MSU > sitename > Home > page name > Data.
    2. Locate and expand the CTA Button component.
    3. Click on the CTA Button component in the Content Tree.
  3. Edit the link:
    1. Click the Insert media link.
    2. Locate the file to be linked in the Media Library Content Tree on the left side of the pop-up window.
    3. Add the button label in the Link Description box.
    4. Click Insert button.

Tool Use Guide

 Page BuilderExplorerContent Editor
Add componentOptimal--
Set internal/external linksOptimal--
Set media link--Optimal
Set email link--Optimal

 

Documentation updated: June 30, 2025

Is there an issue with this documentation? Report it here.