Call to Action Banners

In Tridion, you can create Call to Action Banners as an enhanced option to display content or links to external sites. There are several display options for Call to Action Banners:

• They can be a solid color or an image with a color overlay.

• They can also include links to other pages in your publication or external sites.

The following instructions provide information on creating Call to Action Banners and adding them to a page in Tridion.

Table of Contents

Creating a Banner Component

The first step in adding a Call to Action Banner is to create a Banner component:

Open

In the Building Blocks folder of your respective website, click New Component (highlighted in blue above) in the Create tab (highlighted in yellow above) of the navigation bar.

You will be taken to a new page for creating the component (shown below):

Open

When creating the Banner component, the information you fill out will determine how the Call to Action will display (visit the example pages with the links in the next section to see examples of these elements).

1. Enter an appropriate Name for the component.

2. Choose Banner from the Schema drop down menu (highlighted in yellow above).

3. Title for the banner: Enter text here for the title of the banner.

   • This will be the first and most emphasized text on the banner.

4. Description text: If you enter text here, it will appear on the banner as additional text under the Title, but will be displayed in a less highlighted manner.

5. Banner Image: In this field, you can attach an image if you want to appear as the background for the banner.

   • Click the magnifying glass icon next to the field (highlighted in green above) to add an image to the banner.

   • The image needs to have already been uploaded to Tridion as an Image Multimedia component before it can be added to the Banner.

     • For more information on uploading images, see the Uploading Images instructions.

   • This field is for the image that displays, so if it needs to be cropped to look good for the banner, you must do that before you upload it.

6. Uncropped Image: If you cropped the image for the Banner, add the uncropped version in this field for archival purposes.

   • Click the magnifying glass icon next to the field (highlighted in blue above) to add the uncropped image.

   • This image will not display.

7. Overlay color/color of text background: This field allows you to choose a color for the banner from the drop down menu.

   • If you added an image, this color will be used as an overlay on top of the image.

   • If you didn’t, this color will be the background for the banner.

8. Component link for banner: Use this option if you want the banner to link to another page in the same publication.

   • Click the magnifying glass icon (highlighted in red above), which will bring up the Building Blocks folder for your publication.

   • Choose a component on the page you want to link to in your publication, select it, and click Insert to link to it.

9. External Link for banner: If you want to link to a page or website outside your publication, enter the full URL in this field.

10. Text for link/button: If you do add a link to either a component in your publication or an external website, you can use this field to determine the text that will appear for the link or button.

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

When you are satisfied with the information in the banner, Save and Close the component, and you are ready to add it to a page.

Adding the Call to Action Banner to a Page

After creating the Banner component, you can add the component to a page as a Call to Action template.

1. Navigate in the Root folder to the page you'd like to add a Call to Action Banner to and double-click to open the page.

2. In the window that opens, click the Component Presentations tab.

3. Click Insert at the bottom left of the page window.

4. Browse to the Banner component you created and click to select it.

5. From the Component Template dropdown, select one of the following templates (visit the linked pages for examples):

   • Call to Action Template

   • Call to Action - Parallax Effect

   • Call to Action - Short

   • Call to Action - Short - Parallax Effect

   • Call to Action - Text Only Centered

   • Call to Action - Text Only Side by Side

6. Click the Insert button at the bottom right, then the Close button.

7. Save and Close the page, then you are ready to publish.