Call to Action Template

When you create a Banner component and go to insert it on to a page as a Call to Action in Tridion, you have several template options for displaying the Call to Action.

This page provides examples of the different choices available when creating the Banner component, displayed with the Call to Action template.

Table of Contents

Title and Description Text

The screenshot below shows how the Title and Description Text entered when creating a component will look when using the Call to Action template:

Open

In the Call to Action template, the Banner takes up the whole width of the main column of the page.

• All three of the above components have a Light Gray background color.

The above examples show how the two different text options (Title and Description Text) appear in the template:

1. If you enter only a Title (highlighted in yellow above), it will appear large and bold.

2. If you enter only Description Text (highlighted in blue above), it shows a much less emphatic text.

3. If you enter both (highlighted in green above), the Description Text is the same, but the Title becomes much smaller.

Including a Link

If you include a Component or External Link, it appears at the bottom of the Banner:

Open

The Link is a blue button, unless the background is too similar to the blue color (see the Background Color Options examples for more).

• If you enter text in the Text for link/button field, it will appear on the button.

• If you do not, the button will read “Find out more”

Including an Image

You can attach an Image to serve as the background for the Banner, as opposed to a solid color.

• If you attach an image, you should also use the color menu to choose an overlay.

• If you don’t, it will look like this:

The image becomes the background of the Banner, but as you can see above, the text is white and can get lost in the picture if there isn’t an overlay.

The CTA is more clear if you add the overlay to the image with the Overlay color/color of text background drop down menu.

The screenshot below shows the difference if you use an overlay:

The second Banner (highlighted in yellow above) uses a Blue overlay. As you can see, the text is easier to read with the overlay.

Background Color Options

The following screenshots show examples of the different background color options for banners without images.

Some things to note:

• The link button will change from blue to white if the background color is too close to the blue of the button.

• The text will change from Dark Blue to White depending on the darkness of the color.

Light Gray

Dark Gray

Light Blue

Blue

Dark Blue

Turquoise

Cyan

Coral

Orange

Yellow