In TridionBeatrix CMS, 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:
...
The following instructions provide information on creating Call to Action Banners and adding them to a page in Tridion.
Table of Contents
| Table of Contents | ||
|---|---|---|
|
Creating a Banner
...
Content Item
The first step in adding a Call to Action Banner is to create a Banner
...
content item:
...
Click New Component (blue) to begin creating a Banner component.
...
In the
...
You will be taken to a new page for creating the component (shown below):
...
Creating a Banner component.
...
Content folder of your respective website, click
...
Create Content in Folderusing thecontext menu (...)
.
In the pop-up Name your item and select the schema,
Call To Attention.
When creating the Call to Attention, 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).
Enter an appropriate Name for the component.
...
Choose Banner from the Schema drop down menu (highlighted in yellow above).
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.
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.
...
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
...
can be selected from the Media Library or uploaded to the Media Library.
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.
Uncropped Image: If you cropped the image for the Banner, add the uncropped version in this field for archival purposes.
...
.
...
This image will not display.
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.
...
Content Item 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.
Select Content Itemyou want to link to in your publication, select it, and clickInsertto link to it.
External Link for banner: If you want to link to a page or website outside your publication, enter the full URL in this field.
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 Create Content to save the CTA, and you are ready to add it to a page.
| Info |
|---|
Pro Tip: You can create the content item directly from the page rather than going to the content folder.  |
Adding the Call to Action Banner to a Page
After creating the Banner component Call to Action item, you can add the component item to a page as using a Call to Action template.
Navigate
...
to the page you'd like to add a Call to Action Banner to and double-click to open the page.
In the window that opens, click the
...
Click Insert at the bottom left of the page window.
...
Click the Insert button at the bottom right, then the Close button.
...
Browse for Contentand navigate to it in the content folder that opens.When you click on the item you want to insert, select the layout view in the pop-up:
From the Component Template dropdown, select one of the following templates (visit the linked pages for examples):
...
CALL TO ACTION - PARALLAX EFFECT (LINK WHEN PAGE IS READY)
...
CALL TO ACTION - SHORT (LINK WHEN PAGE IS READY)
...
CALL TO ACTION - SHORT PARALLAX EFFECT (LINK WHEN PAGE IS READY)
...
CALL TO ACTION - TEXT ONLY CENTERED (LINK WHEN PAGE IS READY)
...
CALL TO ACTION - TEXT ONLY SIDE BY SIDE (LINK WHEN PAGE IS READY)
Click the
Add Contentbutton at the bottom.Use the hamburger menu to move the item to the correct position on your page.
This hamburger menu can be used to drag and drop content items to a new order on the page.
Publish