Tutorial banner sample
The tutorial banner is a simple content type containing a headline, subheading, a call to action URL and title, and a background image.
On this page
The example banner
Here's the structure of the tutorial banner showing its component parts.
- The Heading. This is a text item.
- The Sub-heading also a text item
- The call to action text
- The call to action URI that will be launched when the user clicks
- The background. This is an image item.
The content type
The complete tutorial banner content type is shown below. The banner just contains text properties and an image chooser.
Registering the tutorial banner content type
As you can see from the id field of the content type shown above, the banner has been uploaded to the following URI:
In order to use the content type to create content, you first need to register it on a hub. Choose "Content types" from the Development menu, click the "Register Content Type" button and enter the URI in the Content type URI field as highlighted in the image below.
The content type should be enabled on all content repositories in which you want to use this content type to create content. In this example we are just enabling it in the content repository called "content".
If you want to create your own version of this content type, you can upload your version to a hosting service such as AWS or GitHub and update the id field to the URI of its new location. You would then register the content type using the new URI.
Setting up the card
A card is a web app that displays a representation of a piece of content in the Content Library window. You can use one of our built-in cards for a content type or create your own. When you set up the tutorial banner, the easiest thing to do is to use one of our built-in types and map the fields of the banner to elements displayed on the card.
Click the "+" icon in the content type card section to choose a card. In the example below we have chosen the photo card and mapped the background image from the banner to the image element of the card. Cards explains how to use each of the built-in cards.
The Custom cards page shows how you can create your own cards and provides an example of a custom card for the tutorial banner.
Configuring the visualization
A visualization is a web app that displays a preview of a piece of content. When you register the tutorial banner type, click the "Add a visualization" button, give the visualization a name and enter the following for the visualization URI:
The visualization will then be available when you create, view or edit a content item of this type.
Here's an example of what a tutorial banner content item looks like when published and rendered on a website.
As explained on the The Content Delivery API page, you can consume a slot or content item using its slot or content ID. See Consuming content for more information about consuming content included in a slot. Download an example to show how to consume a tutorial banner content item.
Some example published content created using the tutorial banner content type is shown below.