Create content

Customize the website teaser for a content page

What's inside this article:


Basic information

When a content page is shared and promoted on the public site (for example, on widgets and Category pages), a simple preview of the content page is displayed. In the Pangea system, this preview is called a website teaser.

Each individual element in the website teaser (such as the title), is generated as follows (if 1 is not filled, the data is taken from 2):

  1. The relevant field in the Website teaser settings for the content page
  2. The relevant field in the General settings for the content page

This article explains how to add Website teaser settings for a content page. From the Website teaser settings, control which elements are displayed in the website teaser. For example, add a special title that is displayed in the website teaser instead of the main title for the content page.



Create a content page

This article assumes that the edit screen for the content page is already open in Pangea CMS. To learn how to create a content page from the beginning, see the following article:



Add Website teaser settings

An effective website teaser makes visitors want to open the page. You might consider the following optimizations:

  • Add a shorter title that is quick to read.
  • Add a focused introduction that generates interest in the story.
  • Add a striking image or Loop video to grab the attention of visitors.

To add Website teaser settings from the edit screen for a content page:

  1. Select Website teaser in the left panel.
  2. Add some or all of the available settings.

The changes are not published until you hit Publish or Publish & close in the bottom-right corner of the edit screen.

For information about the purpose of each element, go to the following section:



Website teaser elements

For information about the purpose of each element, review the sections below:


Title

Website teaser titles are displayed:



Introduction

The website teaser introductions are displayed:

  • On widgets (if Display introduction is enabled in the widget Layout settings)
  • On Category pages that use the List with thumbnails layout



Label

Website teaser labels are commonly topics (such as "Politics" or "Sport") that help categorize the content on your site.

Website teaser labels are only displayed on widgets. A widget only displays labels if Label is manually selected in the widget layout settings.

Labels are supported on the following widget types:



Horizontal image

Horizontal website teaser images are displayed:

The Main visual is automatically added as the horizontal website teaser image. For details, go to the following section:



Vertical image

Vertical website teaser images are displayed on Content widgets that use a vertical layout. This means one of the following layouts:

  • Top story package with vertical carousel on mobile
  • Vertical image
  • Media slider vertical

The Main visual is automatically added as the vertical website teaser image. For details, go to the following section:



Horizontal / Vertical image alt text

You can create alt text for a website teaser image via the relevant field below:

  • Horizontal image alt text
  • Vertical image alt text

You only need to create alt text if you select a custom website teaser image. For details, go to the following section:



Loop video

Loop videos are displayed on Content widgets if the following conditions are met:

  • The widget layout supports Loop videos.
  • Display Loop video is enabled in the widget Layout settings.

The following Content widget layouts support Loop videos:

  • Big image + thumbnails
  • Big images
  • Top story
  • Top story package

For information about using Loop videos on Pangea sites, see the following article:



Manage automatic website teaser images

After you add a Main visual to a content page, the Main visual is automatically added in the Website teaser settings as both the horizontal and vertical image.

If the Main visual is replaced or cropped, both website teaser images will update automatically to match the changes.

To learn how to manage automatic website teaser images, review the sections below:


Crop the vertical image

If you are happy to display the Main visual in the website teaser, no action is required. However, we suggest you check the default cropping for the vertical image.

If you are not satisifed with the default cropping, hit the Crop the image button to manually crop the image.

While you crop a vertical image, the 3:4 aspect ratio is automatically maintained. You can change which portion of the image is visible, but you cannot change the aspect ratio.

NOTE: Learn more about aspect ratio in our dedicated guide.


Select a custom image

If you do not want to display the Main visual in the website teaser, you can select custom website teaser images instead. To select a custom website teaser image, hit the Select content button.

After you select a custom website teaser image, the image will no longer update automatically to match changes to the Main visual.


Remove a custom image

To remove a custom website teaser image, hit the Restore button.

After you perform this action, the Main visual is added as the website teaser image. The website teaser image will update automatically to match changes to the Main visual.


Create alt text

You can create alt text for a website teaser image via the relevant field below:

  • Horizontal image alt text
  • Vertical image alt text

The following rules apply:

  • If the website teaser image matches the Main visual, it is not necessary to create alt text. This is because the alt text for the Main visual is applied automatically as the alt text for the website teaser image.
  • If you select a custom website teaser image, you need to create alt text. Otherwise, the website teaser image has no alt text.

Alt text is a simple description of what is directly visible in an image. Alt text has many purposes. Most importantly, it is read aloud by screen readers for visually impaired visitors to your site. By adding effective alt text for images, you help make your site more accessible. For details, see the following article:



Update a website teaser from a widget builder

You can conveniently update the Website teaser settings for a content page from the builder for a widget. This option is available when you update the following widgets:

  • Breaking news widget
  • Content widget
  • FactCheck widget
  • Multimedia widget
  • Slide-in widget

This option is only available if Manual or Semi-auto mode is enabled in the widget builder. Via Semi-auto mode, this option is only available for manual items.

Follow these steps from the widget builder:

  1. Go to Content.
  2. Select Add teaser / Edit teaser in the relevant item box.
  3. Update the settings, according to your preferences.
  4. Hit Update website teaser.
  5. Hit Save or Save & close in the widget builder.

The Website teaser settings for the content page are updated.

To learn how to build a new widget from the beginning, see the relevant article below: