What's inside this article:
- Basic information
- Build a new widget
- Add content
- Add a header / footer
- Add a custom widget name
- Preview the widget
- Set the status and save the widget
Basic information
An HTML widget is like a blank canvas that lets you display custom content on pages. Despite the name, you don't need to use HTML code to create an HTML widget. If preferred, you can conveniently add content using CKEditor.
HTML widgets are commonly used to display:
- Approved external media items (such as YouTube videos and Datawrapper visualizations).
- Embedded content items published by your site (such as Snippets and Videos).
- Custom text, such as information and instructions.
This article explains how to build a new HTML widget from Pangea CMS.
Build a new widget
The following pages and segments might include an HTML widget:
- Section pages (including your homepage)
- Infopages
- Landings
- Regions
- You Might Also Like (YMAL)
To build a new HTML widget:
- Go to Build in the primary navigation.
- Choose the type of page / segment where you want to display the widget.
- Select the specific page / segment where you want to display the widget.
- Ensure Editor is selected in the left panel.
- Select the empty area where you want to display the widget.
- Select New widget > HTML to start building a new HTML widget.
The widget builder opens in the same tab. The remaining sections in this article will walk you through each stage of the process.
NOTE: You can also build a new HTML widget from the Widget library.
Add content
In the Content section, add the widget content using CKEditor.
Some useful options for building an HTML widget are described below:
Maximize CKEditor
Hit the Maximize button to open CKEditor in fullscreen. This option is especially useful if you are editing the widget on a mobile device.
Hit the Maximize button again to return to the normal view.
Add embedded content
An HTML widget might include the following types of embedded content:
- External media: Approved external media items (such as YouTube videos and Datawrapper visualizations).
- Content items: Content items published by your site (such as Snippets and Videos).
- Internal images: Images that have been manually uploaded to Pangea CMS by you or another CMS user.
- External images: Images from the following external agencies:
- AFP (Agence France-Presse)
- AP (Associated Press)
- Reuters
To get started, position the cursor where you want to insert the embedded item. Then, hit the Insert embedded content button.
For detailed instructions, see the following articles:
Add text
The following options are available for adding text:
- Enter text manually.
- Paste text from a third-party word processor (such as Microsoft Word).
The CKEditor bar includes many useful tools for adding and formatting text. For details, see the following article:
Switch to Source Code View
Source Code View lets you add content using HTML code. To get started, hit the Source Code View button.
For information about supported HTML tags, see the following article:
Add a header / footer
An HTML widget might include one or both of the following elements:
- (A): Header: Displayed above the widget. The header might be text-only, or it might function as a link to another page. If preferred, you can use an image as the header.
- (B): Footer: Displayed below the widget. The footer always functions as a link to another page.
In the Settings section, optionally add a header and / or a footer.
The steps for adding the header / footer are the same for every widget. For detailed information, see the following article:
Add a custom widget name
Via Settings > Widget name, optionally customize the default widget name.
The Widget name is visible only in Pangea CMS (not on the public site). We suggest providing a descriptive name if your site uses the Widget list tool in CMS to manage widgets.
Preview the widget
In the Preview section, check how the HTML widget will look when it is published on the public site. Select Desktop, Tablet, or Mobile to preview the widget on devices with different screen sizes.
Set the status and save the widget
Before saving the HTML widget, select your preferred status using the drop-down menu in the top-right corner:
- Enabled: After you save the widget, it will be immediately visible on the public site (if it is included on a published page).
- Disabled: After you save the widget, it will not be visible on the public site. However, it will be available for further editing in CMS.
Select Save or Save & close to save the widget.
