Call to Action Banners

In Beatrix 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:

• 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.

Table of Contents

Creating a Banner Content Item

1. The first step in adding a Call to Action Banner is to create a Banner content item:

Open

2. In the Content folder of your respective website, click Create Content in Folder  using the context menu (...) .

Open

3. 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 the 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. 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.

3. 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.

4. Image: In this field, you can attach an image if you want to appear as the background for 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.

   •  

5. 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.

6. Content Item link for banner: Use this option if you want the banner to link to another page in the same publication.

   • Select Content Item you want to link to in your publication, select it, and click Insert to link to it.

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

8. 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, Create Content to save the CTA, and you are ready to add it to a page.

Adding the Call to Action Banner to a Page

After creating the Call to Action item, you can add the item to a page using a Call to Action template.

1. Navigate 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 Browse for Content  and navigate to it in the content folder that opens.

3. When you click on the item you want to insert, select the layout view in the pop-up:

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

   • https://ysmweb.atlassian.net/wiki/spaces/HELP/pages/1849229684

   • 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

5. Click the Add Content button at the bottom.

6. 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.

7. Publish