A CTA Cards Row is a useful way to organize different Call To Action (CTA) content on your webpage. CTA Cards are a type of Media that you create and insert into your CTA Cards Row, each row may hold 1 - 4 CTA cards. Follow the steps listed below to learn how to create a CTA Cards Row.
Step-by-step guide
To learn how to create a CTA Card media, follow the steps listed below.
I. Creating a CTA Cards Row media type
1. After logging in, hover with your cursor over the tab labeled "Content" in the top left corner of the top menu bar, a drop down menu should appear.
2. From this drop down menu click the tab labeled "Media", this will take you to the media page where a list of current media will appear.
3. On this page, click the blue button labeled "+ Add media".
4. You will then be prompted to select the type of media you would like to add, from the list of available media types select "Single Page - CTA Card".
3. Fill out the required and desired fields for the CTA Card (options marked with a red * are required).
- The "Name" field will appear in red font on your card, this is also the name you will use to search when adding your card onto your webpage. This is a required field.
- The "Sub Title" is an optional title field you may provide.
- You can select an image to add by clicking "Select Image(s)", the recommended image size is anything less than 200 KB.
- The "Body" field is a good place to provide some brief information or teaser content to the user.
- You are also required to add a button or a "Call to Action". Typically a call to action serves as the main action you would want a user to take. Add the URL of the link in the "URL" field or connect a page you've already created for your site by just typing the page name. Then, add a name for the button in the "Link text" field (Examples might be “Apply Now!”, “Learn More” or “Donate”)
- The "Icon" field allows you to add a decorative icon, to do this, simply search the Font Awesome website for an appropriate icon that matches your content theme and place the code in the icon field. Select your icon from Font Awesome (https://fontawesome.com/) and copy and paste the code into the field (only paste the code that is inside the quotations, not including the quotations themselves) (Note: per UCCS brand identity guidelines, only the “Light Pro” and "Duotone" Font Awesome icon styles should be used).
4. Once you have finished filling out all the fields, click the blue "Save" button at the bottom of the page. You have now successfully created a CTA Card media. An example of a CTA Card is displayed below.
5. Repeat the steps above to add additional cards as needed. Each CTA Cards row may hold up to 4 cards. You can always add extra rows to your page if needed.
II. Adding your CTA Cards to a page.
1. Navigate to your page where you would like to place your CTA Card Row.
2. Click on the "Add Single Page" arrow to access the dropdown menu. From this menu, select "Add Single Page - CTA Cards Row".
4. The CTA Cards Row has a section to configure your content row, as well as a section to add your cards.
- You can choose the Display Style by clicking the toggle under "Display Style". There are two main styles to choose from, Simple and Expanded with a Grey, Gold or Dark row background.
- You can add an optional title for your row under "Section Title"
- You can add an icon for the content row using Font Awesome to copy and paste the code under "Section Icon"
5. To add your CTA Cards, start typing the name of the CTA Card media previously created. Each row can hold up to 4 cards. Repeat this process until you have added all of your cards.
6. After you are finished adding content, save your page. You have successfully created a CTA Cards Row
CTA Cards Row Examples:
Expanded - Gold Accent
Expanded - Grey Accent
Expanded - Dark Accent
Simple
Note: The Simple row style only displays your icon, subtitle and CTA button. The card name and body content are not used.
Related articles
There is no content with the specified labels