This article explains how to create a new Content widget.
What is a Content widget?
This widget can promote any type of content page. The Content widget is the most commonly used Widgets are interactive content blocks, used to build Section pages and other components on Pangea websites. Pangea offers several widget types, each serving a different purpose. Learn more. on Pangea websites. This is a highly flexible widget type that offers a wide range of layout options.
A Content widget can display one or more teasers that link to content pages. On a Content widget, teasers commonly display a headline with an image. However, this can vary, depending on the selected layout.
A Content widget can promote any type of content page. This means any of the following content types:
Text content:
Article | Blog | FactCheck | Feature | Feature story | Live blog | News | Transcript
Multimedia content:
Audio clip | Audio feature | Broadcast program | Document | Photo gallery | Slider gallery | Video
The edit page for a Content widget is divided into the following subpages:
Layout
Content
Settings
Preview
For new widgets:
You need to move through the subpages in order:
Use the Next button to progress.
Use the Previous button to move back.
You will not be able to save the widget until you reach the Preview subpage.
For existing widgets:
You can navigate directly to any subpage using the options in the left panel. You can save the widget from any subpage.
To save the widget, hit Save / Save & close in the bottom-right corner of the edit page. Pangea will not save or apply your changes on the public website until you perform this action. This applies for both new and existing widgets.
For more information, go to the following section in this article:
To help you select the layout that best suits your needs, a graphic preview is provided for every layout. You can see:
(A): How the layout renders on mobile as well as on differently sized display areas (1, 2, 3, and 4 columns).
(B): The additional elements that are supported for this layout.
Find information about each layout below:
Overview
The Big image + Thumbnails layout is intended for displaying multiple items. The first item shows a big image and is visually prominent. All remaining items show a small thumbnail image.
Required elements
The widget always shows the following elements:
Element
Visible for (items)
Visible on (devices)
Headline
All items
All devices
Horizontal image
All items
All devices
Optional elements
The widget can show the following additional elements (depending on the layout settings):
Element
Visible for (items)
Visible on (devices)
Category/Date/Label
All items
All devices
Introduction
First item only
Desktop + tablet
Loop video
First item only
All devices
Overview
The Big images layout is intended for displaying multiple items. All items are equally prominent.
Required elements
The widget always shows the following elements:
Element
Visible for (items)
Visible on (devices)
Headline
All items
All devices
Horizontal image
All items
All devices
Optional elements
The widget can show the following additional elements (depending on the layout settings):
Element
Visible for (items)
Visible on (devices)
Category/Date/Label
All items
All devices
Introduction
All items
Desktop + tablet
Loop video
All items
All devices
Overview
The List layout is intended for displaying multiple items. All items are equally prominent.
Required elements
The widget always shows the following elements:
Element
Visible for (items)
Visible on (devices)
Headline
All items
All devices
Optional elements
The widget can show the following additional elements (depending on the layout settings):
Element
Visible for (items)
Visible on (devices)
Category/Date/Label
All items
All devices
Overview
The List (Bigger font) layout is intended for displaying multiple items. All items are equally prominent.
Required elements
The widget always shows the following elements:
Element
Visible for (items)
Visible on (devices)
Headline
All items
All devices
Optional elements
The widget can show the following additional elements (depending on the layout settings):
Element
Visible for (items)
Visible on (devices)
Category/Date/Label
All items
All devices
Overview
The Medium images layout is intended for displaying multiple items. All items are equally prominent.
Required elements
The widget always shows the following elements:
Element
Visible for (items)
Visible on (devices)
Headline
All items
All devices
Horizontal image
All items
All devices
Optional elements
The widget can show the following additional elements (depending on the layout settings):
Element
Visible for (items)
Visible on (devices)
Category/Date/Label
All items
All devices
Introduction
All items
Desktop + tablet
Overview
The Thumbnail + List layout is intended for displaying multiple items. The first 2 items show small thumbnail images and are visually prominent. All remaining items show just a headline.
Required elements
The widget always shows the following elements:
Element
Visible for (items)
Visible on (devices)
Headline
All items
All devices
Horizontal image
First 2 items
All devices
Optional elements
The widget can show the following additional elements (depending on the layout settings):
Element
Visible for (items)
Visible on (devices)
Category/Date/Label
All items
All devices
Overview
The Thumbnails layout is intended for displaying multiple items. All items are equally prominent.
Required elements
The widget always shows the following elements:
Element
Visible for (items)
Visible on (devices)
Headline
All items
All devices
Horizontal image
All items
All devices
Optional elements
The widget can show the following additional elements (depending on the layout settings):
Element
Visible for (items)
Visible on (devices)
Category/Date/Label
All items
All devices
Overview
The Top story layout can only display one item.
Required elements
The widget always shows the following elements:
Element
Visible on (devices)
Headline
All devices
Horizontal image
All devices
Optional elements
The widget can show the following additional elements (depending on the layout settings):
Element
Visible on (devices)
Category/Date/Label
All devices
Introduction
Desktop + tablet
Loop video
All devices
Overview
The Top story package layout is intended for promoting multiple items. The first item shows a big image and is visually prominent. All remaining items show just a headline with no image.
Required elements
The widget always shows the following elements:
Element
Visible for (items)
Visible on (devices)
Headline
All items
All devices
Horizontal image
First item only
All devices
Optional elements
The widget can show the following additional elements (depending on the layout settings):
Element
Visible for (items)
Visible on (devices)
Category/Date/Label
All items
All devices
Introduction
First item only
Desktop + tablet
Loop video
First item only
All devices
Overview
The Top story package with vertical carousel on mobile layout is intended for promoting multiple items. This layout displays content in different formats on different devices:
Mobile view: Items are presented on a slider reel with vertical images. All items are equally prominent.
Desktop / tablet view: The first item shows a big image (horizontal) and is visually prominent. All remaining items show just a headline with no image.
Required elements
The widget always shows the following elements:
Element
Visible for (items)
Visible on (devices)
Headline
All items
All devices
Vertical image
All items
Mobile
Horizontal image
First item only
Desktop + tablet
Optional elements
The widget can show the following additional elements (depending on the layout settings):
Element
Visible for (items)
Visible on (devices)
Category/Date/Label
All items
All devices
Introduction
First item only
Desktop + tablet
Overview
The Vertical image layout is intended for promoting multiple items. All items are equally prominent. This layout shows vertical images on all devices.
Required elements
The widget always shows the following elements:
Element
Visible for (items)
Visible on (devices)
Headline
All items
All devices
Vertical image
All items
All devices
Optional elements
The widget can show the following additional elements (depending on the layout settings):
Element
Visible for (items)
Visible on (devices)
Category/Date/Label
All items
All devices
Introduction
All items
Desktop + tablet
SPECIAL LAYOUTS
Special layouts are only available on special layout blocks. For detailed information about how to use the special Media slider and Feature layouts, see the following articles:
To select a layout, click it. This action reveals the layout settings.
Depending on the selected layout, some or all of the following settings might be available:
Display Category/Date/Label: If an element is selected (Category, Label, Exact time, or Relative time), the widget shows your selected element above the title for every item.
Display introduction: If ticked, the widget can show introductions.
Display Loop video: If ticked, the widget can show A Loop video is a short video that plays on repeat with no sound. You can create Loop videos from Pangea CMS. Just upload a regular video file, and Pangea will convert it to a Loop video. Learn more..
Mobile app Top story: If ticked, the widget is used as the top story on the old version of the mobile app homepage.
NOTE: All settings are not available for all layouts.
Find more details below:
You can display an additional element above the headline for every item.
Choose your preferred option:
None
Category
Label
Exact time
Relative time
None
Display only the headline without an additional element.
Category
Display the name of the The Primary Category is the main Category for a content page. A page can have multiple Categories, but only one Primary Category. Any additional Categories are added as Secondary Categories. Both Primary and Secondary Categories impact how the content is shared. However, only the Primary Category impacts the layout and design of the page. Learn more.. The text links to the Category page for the Primary Category.
Label
Display a custom label. Labels are commonly topics that categorize the content on a widget (such as "Politics" or "Sport").
An item can only show a label if a label is available in the data for the story. You can add a label via Website teaser > Label on the edit page for a story.
In Manual mode, you can also add a label for any item directly from the widget edit page. For details, go to the following section in this article:
Display a timestamp with the exact time and / or date of publication. The format for the time and date varies, according to your site configuration.
Relative time
Display a timestamp that shows how long ago the content was published (for example, "20 minutes ago"). After a set amount of time, the relative timestamp changes to an exact timestamp. The timing varies, according to your site configuration.
Tick Display introduction if you want the widget to display introductions. The following rules apply:
The widget only shows introductions when your site is viewed on desktop or tablet. Widget introductions are not shown on mobile.
Some widget layouts can show an introduction for any item, while others only show an introduction for the first item.
An item can only show an introduction if an introduction is available in the data for the story.
Add an introduction
Widget introductions are taken as follows (if 1 is not filled, the text is taken from 2):
(1): The Teaser introduction (set via Website teaser > Introduction on the edit page for the story).
(2): The General introduction (set via General > Introduction on the edit page for the story).
In Manual mode, you can also add an introduction for any item directly from the widget edit page. For details, go to the following section in this article:
Tick Display Loop video if you want the widget to display Loop videos. The following rules apply:
Some widget layouts can show a Loop videos for any item, while others can only show a Loop video for the first item. Loop videos are displayed instead of horizontal images.
An item can only show a Loop video if a Loop video is available in the data for the story.
Add a Loop video
You can add a Loop video via Website teaser > Loop video on the edit page for a story.
In Manual mode, you can also add a Loop video for any item directly from the widget edit page. For details, go to the following section in this article:
If Mobile app Top story is ticked, the widget is used as the top story on the legacy version of the mobile app homepage.
This setting is maintained for compatibility with older app versions. A small number of users who have not updated their mobile app might still see the legacy homepage. The Mobile app Top story setting does not affect the current homepage.
For information about the latest homepage, see the following article:
NOTE: Mobile app Top story can be enabled for one widget at a time. If you enable this setting for a new widget, the previous top story is automatically replaced.
Auto mode reduces the need for manual widget updates. Each widget updates automatically, always promoting the latest content that meets the individual widget requirements. For example, you might configure a widget that always promotes the 5 latest news articles on your website. This approach allows editors to focus on publishing new content, rather than updating widgets.
You need to set the widget requirements from the widget edit page in Pangea CMS. When a new item is published that meets these requirements, the item is automatically added to the widget. This process works as follows:
The new item is added to the top of the widget.
Every other item is moved one position lower.
The oldest item is removed from the widget to make space.
The teaser elements for each promoted story (such as the headline and image) are automatically taken from the edit page for the story in Pangea CMS.
If your service uses auto widgets, you need to consider how each story will look on widgets while you prepare the story. Website teaser settings are available to help prepare a story for displaying on widgets. For details, see the following article:
Set the widget requirements using the settings under the Auto tab.
The following settings are available:
Under Max items, set the maximum number of items for the widget. The widget will always promote this number of items, unless not enough items are available that meet the widget requirements.
The highest number you can select is 20.
NOTE: The Max items setting is not available when the Top story layout is selected. This is because the Top story layout can only display one item.
Under Publication date limit, set a time period (in days). The widget will only promote content that was published during this time period.
For example, if you select 10, the widget will not promote content that is more than 10 days old.
Under Exclude content, optionally set a number of items that will be excluded (not promoted on the widget).
For example, if you select Exclude first 2 items, the widget will not promote the 2 latest items that otherwise meet the widget requirements. This option is useful if your latest content is promoted elsewhere on the same page.
Under Content type, optionally select one or more content types to filter the promoted content.
The widget will only display your selected content type(s). If you do not select content types, the widget can promote any type of content.
For example, if you select Video, the widget will only promote videos.
Content widgets can promote any type of content page. This means the following content types:
Text content:
Article | Blog | FactCheck | Feature | Feature story | Live blog | News | Transcript
Multimedia content:
Audio clip | Audio feature | Broadcast program | Document | Photo gallery | Slider gallery | Video
Under Categories, optionally select one or more Categories to filter the promoted content. The widget will only display content that has at least one of your selected Categories. If you do not select Categories, the widget can promote content with any Categories.
For Categories, the following additional options are provided to control the widget content more precisely:
Primary Category only
If you tick Primary Category only, the widget will only promote content that uses one of your selected Categories as its The Primary Category is the main Category for a content page. A page can have multiple Categories, but only one Primary Category. Any additional Categories are added as Secondary Categories. Both Primary and Secondary Categories impact how the content is shared. However, only the Primary Category impacts the layout and design of the page. Learn more..
Only items with all Categories
If you enable Only items with all Categories, the widget will only promote content that is assigned to all the selected Categories. An item will not be promoted on the widget if it has just one of the selected Categories.
NOTE: The Only items with all Categories setting has no impact if only one Category is selected.
Under Tags, optionally select one or more tags. The widget will only display content that has at least one of your selected tags. If you do not select tags, the widget can promote content with any tags or content without tags.
For detailed information about tags, see the following article:
Manual mode offers full control over the widget content. An editor manually selects every item to promote. This supports a curated approach, allowing you to highlight your most impactful content.
From the widget edit page, you need to manually set the widget content. The widget will continue to display the same content, unless the widget is manually updated.
In manual mode, the following special features are available:
In manual mode, you can customize the teaser for any item. For example, you can change the image or edit the headline that will be displayed on this widget.
To customize a teaser, select Edit teaser or Add teaser in the item box.
On the dialog, you can update any teaser element. However, which elements will actually appear on the current widget depends on the layout settings. To see which elements your current layout displays, go to the Layout subpage.
To confirm the update(s), select your preferred option:
Update widget teaser: Display the new elements on the current widget only.
Update website teaser: Display the new elements on the current widget and replace the default Any content page in Pangea CMS can have Website teaser settings. The Website teaser settings do not appear on the actual content page. Instead, Pangea uses these settings to generate the teaser for the story that is displayed across your website. For example, elements from the Website teaser settings may appear on widgets and Category pages. Learn more. settings for the content page. This means your changes may also be visible on other pages where the story is shared.
In manual mode, you can create a custom item to display on the widget. A custom item looks just like a regular widget item, but it can link to any URL. This is useful for providing links to the following pages:
Pages on external sites (such as social media profiles)
Pages on your website that are not content pages (such as Section pages)
To start creating a custom item:
Select Edit manual content / Add manual content.
Select + Add custom item.
On the Add custom item dialog, manually add every element that will appear on the widget. Content widgets display different elements, depending on the layout settings. To check which elements your current layout displays, go to the Layout subpage.
Configure a standard or manual link.
Standard link
A standard link opens in the same tab and points to one of the following page types on your website:
Category page
Section page
Infopage
Special page (for example, your Subscribe, Podcast, or TV Schedule page)
Complete the following settings:
(A): Link: Select the page type you want to link to (Category, Section, Infopage, or Special page).
(B): Category / Section / Infopage / Special page: Select the specific page you want to link to. Click inside the box and start typing to quickly find a page.
Manual link
A manual link might point to any URL. You can choose how the link opens.
Complete the following settings:
(A): Link: Select "Manual link".
(B): URL: Enter the URL for the link. For pages from your own site, you can enter a relative URL (such as /home). For pages from external sites, you need to enter the full URL (such as https://rferl.org).
Under Link option, set how the link will open:
Open in new tab: The link will open in a new tab. You might use this option for links to external sites.
Open in same window: The link will open in the same tab. Always use this option for links to your own site.
On the Content subpage, custom items are marked with the Custom item badge. The following options are available for custom items:
(A): Set the position of the item using the selector.
(B): Hit the Edit button to adjust the settings for the custom item.
Semi-auto mode combines the benefits of manual and auto mode.
The widget contains a mixture of manual and auto items:
Manual items
Manual items behave according to the rules for manual mode. These items are manually selected on the widget edit page in Pangea CMS. Manual items will not be removed from the widget, unless the widget is manually updated.
The manual widget content can include custom items.
Auto items
Auto items behave according to the rules for auto mode. These are the latest content items that meet the widget requirements. Auto items are added and replaced automatically as new content is published.
For auto widget items, the following options are available:
After configuring the settings, hit the Update button. The content list below the settings will then update to show the latest items that meet your requirements.
By default, auto items appear below the manual items. All auto items are marked with the Auto mode badge.
You can display a text header above the widget. The header can be either plain text or a clickable link to another page.
A clickable header link allows visitors to find more content on the same topic. For example, if a widget promotes content from a particular Categories help to organize content both in Pangea CMS and on Pangea websites. A Category is normally a topic, such as "Politics" or "Sport". Every content page must have at least one Category. Categories act like folders on a computer, where items are stored and organized. Learn more., the header link might point to the A Category page is a page on the public website where visitors can browse all the content from a particular Category. These pages are automatically generated and normally include a list of content, organized by date of publication. Learn more..
To display a text header:
Select Display title under Header options.
Under Title, enter the header text.
If you want the header to be a link, configure the link under Header link.
Configure a standard or manual link.
Standard link
A standard link opens in the same tab and points to one of the following page types on your website:
Category page
Section page
Infopage
Special page (for example, your Subscribe, Podcast, or TV Schedule page)
Complete the following settings:
(A): Header link: Select the page type you want to link to (Category, Section, Infopage, or Special page).
(B): Category / Section / Infopage / Special page: Select the specific page you want to link to. Click inside the box and start typing to quickly find a page.
Manual link
A manual link might point to any URL. You can choose how the link opens.
Complete the following settings:
(A): Header link: Select "Manual link".
(B): URL: Enter the URL for the link. For pages from your own site, you can enter a relative URL (such as /home). For pages from external sites, you need to enter the full URL (such as https://rferl.org).
Under Link option, set how the link will open:
Open in new tab: The link will open in a new tab. You might use this option for links to external sites.
Open in same window: The link will open in the same tab. Always use this option for links to your own site.
Under Widget name, optionally update the internal widget name. This name will only be visible in Pangea CMS. Adding a descriptive name will help editors to identify the widget, which is especially important if the widget is a A library widget is a widget stored in the Widget library. The Widget library is a collection of ready-to-use widgets. One library widget might be used in multiple places across your website. Learn more..
You can display a footer link below the widget. A clickable footer link allows visitors to find more content on the same topic.
TIP: If a widget has both a header link and a footer link, these links should normally open the same page.
Optionally configure a link under Footer link.
Configure a standard or manual link.
Standard link
A standard link opens in the same tab and points to one of the following page types on your website:
Category page
Section page
Infopage
Special page (for example, your Subscribe, Podcast, or TV Schedule page)
Complete the following settings:
(A): Footer link: Select the page type you want to link to (Category, Section, Infopage, or Special page).
(B): Link text: Optionally enter custom link text. Leave this box empty to display the default link text for your website.
(C): Category / Section / Infopage / Special page: Select the specific page you want to link to. Click inside the box and start typing to quickly find a page.
Manual link
A manual link might point to any URL. You can choose how the link opens.
Complete the following settings:
(A): Footer link: Select "Manual link".
(B): Link text: Optionally enter custom link text. Leave this box empty to display the default link text for your website.
(C): URL: Enter the URL for the link. For pages from your own site, you can enter a relative URL (such as /home). For pages from external sites, you need to enter the full URL (such as https://rferl.org).
Under Link option, set how the link will open:
Open in new tab: The link will open in a new tab. You might use this option for links to external sites.
Open in same window: The link will open in the same tab. Always use this option for links to your own site.
On the Preview subpage, you can check how the widget will look for website visitors when it is published. The preview shows the whole page / component, so you can see how all the widgets will look together. Choose your preferred option:
Desktop: Check how the widget will look when viewed on a desktop computer.
Tablet: Check how the widget will look when viewed on a tablet.
Mobile: Check how the widget will look when viewed on a mobile device.
The preview includes unsaved changes. You do not need to save changes before checking them in the preview.
