CTA Button

Usage

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

Demo: Information-Focused Content Components

Expected Behavior

Multiple CTA buttons display in a row as space allows and will then stack vertically on mobile views or when the line wraps due to limited browser window width.
The CTA Button component displays the CTA buttons in a row from left to right as they are added.
When there isn't enough horizontal space to accommodate all buttons, the CTA buttons will stack top to bottom.
The width of the CTA buttons varies with the length of the text. Stacked buttons will have varying widths.

Best Practices

Component Options and Limitations

CTA Button links have the same link options as CTA buttons built into other components.
The CTA Button component will only display the primary green CTA button style.
Setting file and email links currently works best in Content Editor.

Guidelines

When using multiple CTA Button links, it is best to use the component in a space wide enough to display the buttons in one row. Limiting content to three or four links usually works well.
When using the CTA Button component in a narrow space, limit it to one CTA link for best results.

Template Data

Component Options — Page Builder only:

Manage Items

Add new CTA

Page Builder — Link Element with Standard Link Options:

Link type (drop-down menu)

Options:
- External
- Internal
- Media (currently not working in Pages)
- Email

Link text (single-line text)

This text displays as the link.
This is the same as “Link: Description” in Content Editor.
Click the "+" icon above the Link text box to add a Link tooltip field.

Path (general link)

This is a URL field with Browse button to identify the page the link will direct visitors to visit upon clicking.

Optional parameters

After adding a URL to the link field, click the "+" icon above the path to open an options menu to add an anchor or a URL query string.
Contact Comms.WebSupport@msu.edu with questions.

Open in new window (checkbox)

If the link should open in a new browser window, check this box.

Clear link value (button)

Click this button to reset the component link field.

Content Editor:

Link (general link)

Insert link field with standard link options.
This is the best method to add/edit Media links.

Description (single-line text)

Located in the Link Details.
The text here will display for the link, in either text form or in the button (depending on component settings).

Add a CTA Button to a Page

In Page Builder:

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

Alternate method:

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

Connect the CTA Button to an Internal Link

In Page Builder:

Click on the CTA Button text field. “No text in field” appears by default.
In the Element Options pane on the right side, select Internal from the Link type icon menu.
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.
Enter the link button label in the Link text box.
Optional: Add tooltip text in the Link title text box.

Connect the CTA Button to an External Link

Click on the CTA Button text field. “No text in field” appears by default.
In the Element Options pane on the right side, select External from the Link type icon menu.
Enter a full URL in the URL text box.
Enter the link button label in the Link text box.
Optional: Add tooltip text in the Link title text box.

Connect the CTA Button to an Email Address

Click on the CTA Button text field. “No text in field” appears by default.
In the Element Options pane on the right side, select Email from the Link type icon menu.
Enter a full URL in the URL text box.
Enter the link button label in the Link text box.
Optional: Add tooltip text in the Link title text box.

Connect the CTA Button to a Media File

Click on the CTA Button text field. “No text in field” appears by default.
In the Element Options pane on the right side, select Media from the Link type icon menu.
Use the Path icon to open the Add Media window.
Navigate in the Media Library to locate the desired file.

Note: If the desired file does not display in Page Builder, it may be a file type not supported by Page Builder. Try to set the media link in Content Editor.

Select the file and click Add selected to choose the file.
Enter the link button label in the Link text box.
Optional: Check the Open in new window option to have the file open in a new browser window/tab.

Alternative: Add or Edit Links in Content Editor

Open Content Editor:
1. In Page Builder, click the drop-down arrow to the right of the SitecoreAI icon in upper left.
2. Select Content Editor. It opens in a new browser tab.
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 > site name > Home > page name > Data.
2. Locate and expand the CTA Button component.
3. Click on the CTA Button component in the Content Tree.
Edit the link:
1. Click the appropriate link option under the Link panel.
2. Complete the link field settings, as needed.
3. Add the button label in the Link Description box.
4. Click Insert button.

CTA Button

Communications Resources

Contact us

Address

Follow Us

Component Information