What's inside this article:
- Basic information
- Get started
- Select a layout
- Set content: Auto mode
- Set content: Manual mode
- Set content: Semi-auto mode
- Manage settings
- Check the preview
- Save the widget
Basic information
This article explains how to create a new Content widget.
What is a Content widget?
Content widgets promote content pages. 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.
Get started
This article assumes that the Content widget edit page (shown below) is already open.
Find more details below:
The Content widget edit page 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 and Previous buttons to move between subpages. You will not be able to save the new widget until you reach the Preview subpage.
For existing widgets:
You can navigate directly to any subpage using the options in the left panel.
When you work on the Content widget edit page, your changes are not saved or applied on the public site until after you hit the main Save or Save & close button in the bottom-right corner. This applies for both new and existing widgets.
When you work on the Content widget edit page, your changes are not saved or applied on the public site until after you hit the main Save or Save & close button in the bottom-right corner. This applies for both new and existing widgets.
For more information, go to the following section in this article:
The remaining sections in this article describe each stage of the creation process:
- Select a layout
- Set content: Auto mode
- Set content: Manual mode
- Set content: Semi-auto mode
- Manage settings
- Check the preview
- Save the widget
Select a layout
On the Layout subpage, you can select a layout and manage the layout settings.
The following main actions are available on the Layout subpage:
Browse available layouts
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:
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:
Manage layout settings
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 selected, an additional element is shown above the headline 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 each 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. The text is not clickable. Labels are commonly topics that categorize the content on a widget (such as "Politics" or "Sport").
A widget item can only show a label if a label is available in the data for the content page. Add a label via Website teaser > Label on the edit page for the story.
In Manual or Semi-auto 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:
Exact time
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.
Set content: Auto mode
This section explains how to use auto mode to set the widget content. To enable auto mode, select the Auto tab on the Content subpage.
For information about auto mode, browse the sections below:
Auto mode: Benefits
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.
Auto mode: Set widget requirements
Set the widget requirements using the settings under the Auto tab.
The following settings are available:
Auto mode: Check your requirements
After configuring the settings, hit the Update button. After you hit "Update", the item list (below the settings) will update to show the latest content that meets your requirements.
If you are not happy with the content, you can adjust the settings. To check the results, hit the Update button again.
Auto mode: Pin & hide items
In auto mode, you can customize the widget content as follows:
- Pin an item so it is not removed from the published widget as new items are added.
- Hide an item so it is not displayed on the published widget.
Find more details below:
While an item is pinned:
- You can set the position of the item on the widget. The item stays in its set position. It does not move down the widget as new items are added.
- The item will not be removed from the widget, unless it is manually removed or unpinned.
To pin an item:
- Enable the Pin slider in the item box.
- Use the selector to set the position.
For example, if you select 1, the item will be positioned first.
Set content: Manual mode
This section explains how to use manual mode to set the widget content. To enable manual mode, select the Manual tab on the Content subpage.
For information about manual mode, browse the sections below:
Manual mode: Benefits
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.
Manual mode: Add content
Hit the Add manual content button to start adding the widget content.
On the Search & attach dialog, search for and attach every item that you want to promote on the widget. To run a content search:
- Hit Clear if needed to clear any existing search filters.
- Enter keywords and adjust the filters according to your needs.
- Hit Search.
The results refresh to match your search filters.
To attach an item, click the + Attach button in the item box. This action adds the item to the Attached items list.
After attaching every item, hit the main Add button. This action adds the attached items to the widget edit page.
For detailed information on how to run a content search in Pangea CMS, see the following article:
NOTE: If the Top story layout is selected, a Content widget can only promote one item. You cannot select multiple items for this layout.
Manual mode: Set the order of the items
In manual mode, you can set the order of the items on the widget.
To change the position of an item, use the selector in the item box. For example, if you select 1, the item will be positioned first.
Manual mode: Customize a teaser
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 appear on the widget depends on the layout settings. To see which elements your current layout displays, go to the Layout subpage.
To confirm any updates on the dialog, 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 Website teaser settings can be added for any content page. These settings are not displayed on the page itself, but are visible in the teaser (preview) for the page across your website. For example, Website teaser settings may be displayed 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.
Manual mode: Create a custom item
In manual mode, you can create a custom item to display on the widget. A custom item 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.
Set content: Semi-auto mode
This section explains how to use semi-auto mode to set the widget content. To enable semi-auto mode, select the Semi-auto tab on the Content subpage.
NOTE: Semi-auto mode is not available when the Top story layout is selected. This is because the Top story layout can only promote one item.
For information about semi-auto mode, browse the sections below:
Semi-auto mode: Benefits
Semi-auto mode combines the benefits of manual and auto mode.
Semi-auto mode: Add manual content
Hit the Add manual content button to start adding the manual widget content.
For detailed instructions on how to add manual content, go to the following section in this article:
By default, manual items appear above the auto items. All manual items are marked with the Manual mode badge.
Semi-auto mode: Add auto content
The Auto settings set the requirements for the auto widget content. Manual items are not restricted by these settings.
For a detailed description of each setting, go to the following section in this article:
After configuring the settings, hit the Update button. After you hit "Update", the list of auto items will update to show the latest content that meets your requirements.
By default, auto items appear below the manual items. All auto items are marked with the Auto mode badge.
Manage settings
The following main actions are available on the Settings subpage:
Display a title
You can display a title above the widget. The title can be either plain text or a clickable link to another page.
To display a title:
- Select Display title under Header options.
- Under Title, enter the title text.
- If you want the title 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.
Update the widget name
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..
Display a footer link
You can display a footer link below the widget. The footer link allows visitors to find more content on the same topic. For example, if a widget promotes the latest 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 footer 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..
TIP: If a widget has 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.
Check the preview
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.
NOTE: When you edit / create a widget directly from the Widget library page in Pangea CMS, the preview is not available.
Save the widget
To save the Content widget, hit Save or Save & close on the widget edit page.
After you save the widget, the following actions may be triggered:
- If the page or component that contains the widget is published, the widget is immediately published.
- If the page or component that contains the widget is in draft, the widget is saved in Pangea but not published.
Save without publishing
The widget statuses give you added flexibility when the page or component that contains the widget is published. The following statuses are available:
- Enabled: The widget is visible on the public site.
- Disabled: The widget is hidden (not visible on the public site).
IMPORTANT: If you are editing a widget that is already published, changing the status to Disabled will make the widget disappear from the public site.
To save a new widget without publishing it:
- Select the Disabled status.
- Hit Save / Save & close.
The widget is now saved with the Disabled status. It is not visible on the public site.
