What's inside this article:
- Basic information
- Open the edit screen
- Add the widget content
- Configure the widget settings
- Preview the widget
- Set the status and save the widget
- Request a responsive banner
Basic information
An HTML widget is like a blank canvas that lets you display custom content on the following website items:
- Sections
- Infopages
- Landings
- Regions
- You Might Also Like
We recommend using HTML widgets as follows:
- Display embedded external media (such as from Datawrapper, YouTube, and Twitter). More information here:
- Display embedded content items published by your own site (such as Snippets). More information here:
- Display text content, such as information about your service and instructions.
Open the edit screen
This article assumes that the edit screen for the HTML widget (shown below) is already open. For basic information about creating a new widget, see the following article:
Add the widget content
In the Content section, add the widget content using CKEditor.
See the sections below for more details:
Add text
You can use CKEditor to manually enter and format text content (the same as for creating an article). Detailed information is available in the following article:
You can also paste text content into CKEditor. Detailed information is available in the following article:
Hit the Maximize icon to open CKEditor in fullscreen. This option is especially useful if you are editing the widget on a mobile device. Select the Maximize icon again to return to the regular view.
Insert embedded content
HTML widgets are often used to display embedded content. This includes:
- External media: Supported external media items from Datawrapper, YouTube, Twitter, and more.
- Content items: Content items published by your own site (such as Snippets).
- Images: Images that have already been uploaded to Pangea CMS and images from external agencies.
To get started, hit the Insert Embedded Content icon in CKEditor.
For detailed instructions, see the following articles:
Insert HTML / CSS code
You can enter and adjust the widget content using HTML / CSS code. To get started, hit the Source Code View icon.
Source Code View lets you add and adjust widget content using HTML and CSS code. It is not possible to apply Javascript. Additionally, certain HTML / CSS elements are not supported or blocked for security reasons. Information about using Source Code View is available here:
After setting the widget content, hit Next to configure the widget settings.
Configure the widget settings
In the Settings section, the following options are available:
- Add a Header that is displayed above the widget.
- Adjust the default Widget name that is used to identify the widget in Pangea CMS (not visible on the public site).
- Add a Footer link that is displayed below the widget.
For detailed information about the widget settings, see the following article:
After configuring the widget settings, hit Next to preview the widget.
Preview the widget
In the Preview section, check how the widget will look when it is published on the site. Select Desktop, Tablet, or Mobile to preview the page on different devices.
When you are satisfied, set the status and save the widget.
Set the status and save the widget
Before saving the widget, choose your preferred option in the Status drop-down menu:
- Enabled: The widget will be visible on the public site after you save it (provided it is included on a website item with the Public status).
- Disabled: The widget will not be visible on the public site after you save it.
Hit Save or Save & close to save the widget.
Request a responsive banner
HTML widgets are often used to display responsive banners on website items.
The Pangea Design team can create custom banners on request for services. Banners created by our designers are fully responsive. This means they render properly on all devices (desktop, tablet, and mobile). For detailed information, see the following article:
