CTA Block

Introduction

CTA stands for "Call To Action" as is well-known among those with experience building websites. A CTA is used to encourage site visitors to visit specific pages and act on what is being suggested tot hem. The Chime block library has several types of CTA blocks that can be used on any page. This article explains how these blocks work and can be added/edited via the CMS Tool. 

 

Adding the CTA Block

First, from the Page Editor, click on the "+ Blocks" button.

Choose the CTA option from the library and then drag the desired style to the right side where you would like to place it on the right.

To edit that block, double-click on the block or click on the "Edit" icon in the top-right of that block.

There are three types of CTA styles that you can choose from. Each style is outlined below.

 

Single Column (One Button)

This is the most common type of CTA and is used to focus on one specific set of information and one option to act on it. 

On this one, you can change the background image of this block for both desktop size and mobile size.

The block size can be adjusted as well:

The heading and subheading/description can be edited. There will be an opacity layer on this block by default, but you can change the color or size of this layer, or just hide it by unselecting the option to "Show Opacity Layer."

The most important part of what can be edited with the CTA block is button settings. Here, you can customize the text to display on the button, select a color, and enter the redirect URL of the button (where the site visitor will go when clicking the button). Please note that if you just want to redirect the visitor to a page on your Chime site, you only need to enter the "relative URL." For example, enter "/evaluation" to send the site visitor to the Home Evaluation page. If you want to redirect the visitor to an external page (one not part of your Chime site), you will need to enter the complete URL including https:// (e.g. https://www.google.com/). After entering the URL, you can also choose your the "Open Mode" to be to open page in new window/tab or open page in current window/tab.

 

 

Two Columns (One Button)

Here is an example of what this would usually look like. This CTA has two parts: (1) Column 1 - Image and (2) Column 2 - Button. Each has its own tab to edit the corresponding settings.

For the Image tab, the first thing to choose is "Layout" of which side should have the button vs. image:

An image can be selected for desktop size screens as well as mobile size screens:

The block size can also be customized here:

For the Button settings, you can first customize the background type to be color (you pick the color) or an image (you pick the images for desktop and mobile). 

Edit the heading and description that appear on the button column:

And finally, edit the button settings with all of the options already outlined in the previous CTA style:

 

Two Columns (Two Buttons)

Here is an example of what this CTA block style would look like:

Like the settings described above, with this option you can edit the background type (color or image), block size, heading and description, and button--for both the left and right column.

 

 

Other CTA Styles

#1

One other style looks like this and consists only of a title with two buttons:

On this one, you can edit the background type, the block size, title, and left and right buttons.

 

#2

The second style is an image, title, and one button and looks like this:

You can customize the image, height, opacity layer, heading/title, and button.

 

 

Questions?

If you have any questions regarding this topic or any others, please reach out to our Support Team via email at <support@chimeinc.com> or by phone at 1 (855) 981-7557.