Build an HTML widget

What's inside this article:

• Basic information
• Create 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, which 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 the widget content using our WYSIWYG (What You See Is What You Get) rich text editor.

HTML widgets are commonly used to display:

• Approved external media items (such as YouTube videos and Datawrapper visualizations).
• Content (such as Videos and Snippets) created inside Pangea CMS by your own site.
• Custom text content, such as information and instructions.

This article explains how to create a new HTML widget from Pangea CMS.

Create a new widget

The following segments might include an HTML widget:

• Sections (including your homepage)
• Infopages
• Landings
• Regions
• You Might Also Like (YMAL)

To create a new HTML widget:

1. Go to Build in the primary navigation. Select a segment type, depending where you want to display the widget (Sections, Infopages, Regions, Landings, or YMAL).

   

2. Select the name of the specific segment where you want to display the widget.

   

3. Ensure Editor is selected.

   

4. Select the empty area where you want to add the widget.

   

5. Select New widget > HTML to create a new HTML widget.

   

The widget edit page opens in the same tab.

NOTE: You can also create a new HTML widget from the Widget library.

The chapters below describe each stage of the creation process:

• Add content
• Add a header / footer
• Add a custom widget name
• Preview the widget
• Set the status and save the widget

Add content

On the Content subpage, you can add the widget content using our WYSIWYG (What You See Is What You Get) rich text editor.

Some useful options for HTML widgets are described below:

• Maximize the text editor
• Add embedded content
• Add text
• Switch to the HTML editor

Maximize the text editor

Hit the Maximize button to open the text editor 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

You might use an HTML widget to display the following types of embedded content:

• External media: Approved external media items (such as YouTube videos and Datawrapper visualizations).
• Directly embedded content: Content (such as Videos and Snippets) created inside Pangea CMS by your own site.
• Images: Images that were manually uploaded to Pangea CMS or images from supported external agencies.

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:

• Embed external media
• Directly embed your content
• Embed images

Add text

You might use an HTML widget to display custom text (such as information or instructions). The following options are available:

• Enter text manually.
• Paste text from a third-party word processor (such as Microsoft Word).

The text editor includes many useful options for formatting your text. For details, see the following article:

• Use the text editor

Switch to the HTML editor

You can switch to the HTML editor to add content using HTML code. To get started, hit the HTML editor button.

For information about supported HTML tags, see the following article:

• Use the HTML editor

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.
• (B): Footer: Displayed below the widget. The footer always functions as a link to another page.

On the Settings subpage, 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:

• Build a Content widget

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 Pangea CMS to manage widgets.

Preview the widget

On the Preview subpage, check how the HTML widget will look when it is displayed 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 displayed on the public site (if it is included on a published page).
• Disabled: After you save the widget, it will not be displayed on the public site. However, it will be available for further editing in Pangea CMS.

Select Save or Save & close to save the widget.