bg-country-switch
How-to:

Teaser

Teasers are either links to other pages (inside Sitecore or external) or download links for documents that are uploaded to the Sitecore media library. There are several teaser types available in Sitecore and this article explains how you can create those on your page.

Mega Teaser

Use the “MegaTeaser“ to create a stand alone teaser with the width of the complete page.

Please visit our Showroom to see the different setup possibilities.

Example for a mega teaser
Adding a Mega Teaser

Please follow the steps below to add a new mega teaser element (also shown in video):

  1. Click "Add a new component".
  2. Choose the element "Mega Teaser".
  3. Create a new component and assign a name to it or choose an existing mega teaser element. Click "Ok".
Adding a mega teaser
Editing a Mega Teaser
Edit component properties
Editing the position of the teaser text and headline

1. Click on the MegaTeaser you like to edit.
2. Click on the symbol "Edit the item fields.“ above it.
3. An overlay pops up showing a form for the different content fields:

  • Edit "Title“ to change the teaser headline.
  • Click on “Show Editor” in the field “Text” to edit the text within the Richt Text Editor.
  • To change the background image of the Mega Teaser select the field “Image” and “Browse”. The Media Library opens. Mark the respective image and click on “Select” in the right lower corner. (Note: The image needs to be uploaded into Sitecore first. See chapter Media Library)
  • To edit the Call-to-Action link of the first link click on field “Link1” and select the kind of link you like to add.
  • The link text can be changed in the field “LinkText1”
  • If you want more links please proceed in the same way for link 2 and 3.
  • Edit the "Tagline“ in the respective field.
  • Edit the quote below the tagline in the field “Quote”.
  • Edit the quotations marks in the field “StartQuotationMark“ and “EndQuotationMark“. To hide them completely activate the checkbox “HideQuotationMark“.
  • Confirm your changes by clicking “OK”.
  • Confirm your changes with the button “Save changes” on the top left position in the toolbar.

4. To edit the position of teaser text and headline click on “More” in the context menu and “Edit component properties“ (please see picture below). Select the desired text position in the field “TextPositionHorizontal“ and “TextPositionVertical“.

5. To change the text color from light to dark or the other way around click on “More” in the context menu and “Edit component properties“ (see picture below). Activate the field “InvertFontColor“ as desired.

Edit component properties
6. Finally confirm your changes with the button “Save changes” on the top left position in the toolbar.

Teaser Types to be added to the following teaser elements

In the teaser elements that are introduced in the following sections, you can manually add different teaser types. Please see the explanations below to learn about the differences between them.

Teaser icon in list of elements in Experience Editor
Icon Teaser

Teaser

This teaser type can link to a Sitecore page, to an item from the Media Library and to an external page. The appearance differs depending on the parent teaser element. If you do not fill the item fields, the information that were added to the linked Sitecore page are automatically displayed.

Product Teaser icon in list of elements in Experience Editor
Icon Product Teaser

Product Teaser

With this teaser, you can link to a specific product or assortment from the product catalog. However, you have to manually type the teaser information that are to be shown.

Download Teaser icon in list of elements in Experience Editor
Icon Download Teaser

Download Teaser

If you want to present a document or image for download on the page, it is best to use the Download Teaser type. Although you can also link a media item to the normal Teaser, only with this element the user will be able to see the document type and its file size.

Link List Teaser icon in list of elements in Experience Editor
Icon Link List Teaser

Teaser Link List

The Link List Teaser can only be added to a Teaser Island. It allows you to have up to three call-to-action links in one teaser. The links can either be to a Sitecore page, to an item in the Media Library or to an external website (not in Sitecore).

Teaser Lists

The following Teaser Lists are available in Sitecore:

  • Teaser List Horizontal
  • Teaser List Horizontal Image
  • Teaser List Vertical
  • Teaser List Two Columns

Please visit our Showroom to see the various layout options.

Adding a new Teaser List

The steps for adding a new teaser list are the same for every teaser list type. Please find the instrcutions below (also shown in video):

  1. Click "Add a new component".
  2. Choose the teaser list you would like to add, click "Select".
  3. Choose either an existing element or create a new one. 
  4. Assign a name and click "Ok". Now the supercategory was created and there is a placeholder for the subcategories (the actual teasers).
  5. Click on the placeholder and "Add here". 
  6. You now have three possibilities to choose from: Teaser, Download Teaser and Product Teaser (explained above). Choose one and "Select".
  7. Create a new one, assign it to the respective supercategory and choose a name or select an existing teaser. Click "Ok".

As the name "Teaser list" suggests, you can add several teasers to one supercategory. Please follow the steps below for adding additional teasers:

  1. Click "Add a new component".
  2. Choose one of the possibilities where the teaser can be added (marked with "Add here").
  3. Follow steps 2-7 from above.
  4. Repeat for as many teasers as you like.
Adding a new teaser list
Changing a Teaser List

Each Teaser List contains several content elements of the type “Teaser”. Each teaser can have a different link (internal, external, media).

If you create an internal teaser, the information “TeaserTagline“, “TeaserTitle“, “TeaserText“ and “TeaserImage“ are automatically taken over from the page information of the linked page. But you can overwrite them locally in your teaser if needed.

Editing the Teaser List

1. To change the headline or description of the TeaserListHorizontal click on the symbol "Edit the item fields.“ in the small context menu. An overlay with a form pops up.

  • Edit the teaser list headline in the line “Title“
  • Click on “ShowEditor” to edit the text shown before the teaser list in the Rich Text Editor.

2. To change the text alignment in the intro of the TeaserListHorizontal mark one of the teasers and click in the context menu on “Go to the parent component“ until you reach the content component “TeaserListHorizontal“. There click in the context menu on “More“ and "Edit component properties“ to change the following:

  • Centered text
  • Paragraph columns
  • Brackets around the teasers
  • Highlighted text
  • Invert Font Color

Editing the Teaser

Edit the Teaser by "Edit the item fields“ in the context menu:

1. An overlay pops up with a form.

2. Change the links:

  • Internal (Sitecore) link: In the field "TeaserLink", click "Clear" and then "Insert link". The page tree of the Content Editor appears. Choose your page by clicking it and then click "Insert". The new link is now shown in the TeaserLink field.
  • Media link: In the field "TeaserLink", click "Clear" and then "Insert media link". The media library appears. Choose the document that you have uploaded to the media library before. Next to the content tree, you can decide whether the document should be opened in the active browser tab or in a new one. Click "Insert". The new link is now shown in the TeaserLink field.
  • External link: In the field "TeaserLink", click "Clear" and then "Insert external link". A form pops up where you can define a link description, paste the URL of the external link and define the target window. Click "Insert".

3. Edit the tagline in the field “TeaserTagline”.* 

4. Edit the headline in the field ”TeaserTitle“.*

5. Edit the text in the field ” TeaserText“.*

6. To change the image of the teaser select the field “Image” and “Browse”. The MediaLibrary opens. Mark the respective image and click on “Select” in the right lower corner. (Note: The image needs to be uploaded into Sitecore first. See chapter Media Library).*

7. Confirm your changes by clicking “OK”.

8. Finally confirm your changes with the button “Save changes” on the top left position in the toolbar.

*Please note: In case of an internal link, steps 3 - 6 are not necessary as those information should have been defined on the target page in the Content Editor (see Edit Page Settings in the Content Editor). Only if you would like to overwrite these information, fill the fields locally in the Teaser. In that case, the teaser information defined on the target page will not change.

Changing the order of existing Teasers

1. Click on one teaser.

2. Select the icon “Move component“ in the context menu.

3. Click on the button “Move to here“ on the position you like to move it to.

4. Save your changes.

Changing the order of Teasers in Teaser List Horizontal

Teaser Island

Use “TeaserIsland“ to display several teaser elements on a vertical line. Tagline and title are positioned above the image. Apart from image teasers you can also create a text link list:
TeaserIsland
Example for a Teaser Island
Adding / editing a Teaser Island

Adding a new Teaser Island

When adding a new Teaser Island to your page, please follow these steps (also shown in video below):

1. Click "Add a new component" and then "Add here".

2. Choose "TeaserIsland" from the list of components.

3. Create a new one, asign a name and where it should be stored or add an existing Teaser Island component. Click "Ok". Your component is being added to your page and it has a grey placeholder.

4. Click on the placeholder and then "Add here". A window pops up where you can choose between three teaser types:

  • Teaser
  • LinkListTeaser
  • ProductTeaser

5. Choose one of the three Teasers mentioned above and click "Select".

6. Create a new one, asign a name and where it should be stored or add an existing Teaser component. Click "Ok". Your component is being added to your Teaser Island.

7. Repeat steps 4 - 6 for adding additional Teaser elements.

Adding a Teaser Island to your page

Editing a Teaser Island

A Teaser Island is edited the same way as Teaser Lists. Please see the chapter above for more information on that.

Teaser Grid

With a Teaser Grid, you do not have to create individual Teasers to link to several Sitecore pages, but you can just choose from a list the pages that you would like to display.

Example for a Teaser Grid
Example for a Teaser Grid
Adding a new Teaser Grid

If you want to add a new Teaser Grid to your page, please follow these steps (also shown with video below):

1. Click "Add a new component" and then "Add here".

2. Select "TeaserGrid" from the list of components, click "Select".

3. Choose an existing Teaser Grid element or create a new one and assign a name. Click "Ok".

4. Your Teaser Grid is being added to your page. Click "Save".

Adding a new Teaser Grid to your page
Edit a Teaser Grid

Item Fields

1. Click "Edit the item fields".

2. Add title, subtitle and a text to the Teaser Grid.

3. In the section "Teasers" you can choose the pages from the page tree on the left that you want to show in the Teaser Grid.

4. In the field "Teasers per page" define the specific number.

5. Click "Ok" and save your page.

Field Teaser for Teaser Grid

Item Properties

To edit the appearance of the Teaser Grid, please open the item properties. For this element, you can decide on:

  • Centered Text
  • Paragraph Columns
  • Show Brackets (brackets around the whole Teaser Grid)
  • Highlighted Text
  • Show Large Image (if the first teaser should be displayed larger than the others)
  • Invert Font Color

News Teaser Grid

A Teaser Grid is used for automatically displaying articles of specific categories in form of a newsfeed. The order of the articles depends on their publication date (latest to oldest). In order to use this component, you have to have created articles and assigned them to categories (see How-to: Articles).

Example for a Teaser Grid
Example for a Teaser Grid from: https://hartmann.info/en-corp/200-years
Adding a News Teaser Grid

Please follow the steps below to add a News Teaser Grid (also shown in video):

  1. Click "Add a new component" and then "Add here"
  2. Choose "NewsTeaserGrid" from the list and click "Select"
  3. You can either choose an exiting News Teaser Grid from the content tree or create a new one (and assign a name). Click "Ok".
  4. The element is now added to your page. Click "Save".
Steps for adding a News Teaser Grid to your page
Edit a News Teaser Grid

Edit item fields

To edit the item fields of the News Teaser Grid, please click on the element in the Experience Editor:

1. Click "Edit item fields".

2. Change the following fields:

  • Title, Subtitle, Text, AnchorNavigation
  • Teasers per page: Choose the amount of teasers that should be shown before the user has to click "Show more". The standard value is 5.
  • Categories: Those are the categories that you assign to articles (see How-to: Articles). They are predefined and cannot be changes by Sitecore editors. Please contact CEO-DBT to create additional categories.

3. Click "Ok" and then "Save".

Select / deselect categories for the News Teaser Grid
Select / deselect categories for the News Teaser Grid

Edit item properties

Please see the section above (Teaser Grid) to find some information about how to edit the item properties.

Adding a News Teaser Group / List

To add a new News Teaser Group to your page, please follow the steps below:

  1. Click "Add a new component" and then "Add here".
  2. Select "NewsTeaserGroup" from the list of elements and click "Select".
  3. Either choose an existing News Teaser Group from the content tree or create a new one and assign it a name. Click "Ok".
  4. The element is now added to your page. Click "Save".
Editing the News Teaser Group / List

Edit the item fields

To edit the item fields, please follow the steps below:

  1. Click on the News Teaser Group / List on the page and then "Edit the item fields".
  2. Edit the following fields: Title and News to be shown in the News Teaser Group (see picture below).
  3. Click "Ok" and "Save".
  4. For the articles that are shown here, only the teaser information that were added in the page information of the linked page are shown (see Edit page settings). Unlike the teaser elements mentioned before, you cannot change the teaser information manually.
Fields for editing News Teasers Group
Selecting / deselecting articles

Edit the item properties

In the Teaser Group / List you can only define the amount of teasers to show. The standard value is 5.