Rich Text Widget

Rich Text widget allows for flexible management of text and graphic content, just like in a regular text editor. With its help, you can add and format various types of text and media content — headings, lists, links, quotes, images, videos, and more.

This widget is well-suited for large volumes of text, such as articles or product descriptions.

Other elements/items cannot be inserted into Rich Text widget.

How to Add Rich Text Widget

Drag the widget From Elemets/Items panel onto the canvas or simply click on its name.

Drag the widget from the left panel onto the canvas

How to Edit Content in Rich Text Widget

By default, the widget contains static data. To edit it, double click the widget – a pop-up will appear where you can edit and format the content.

Click the widget two times

Pop-up for editing opens

In the pop-up window, you can work just like in a regular text editor — enter, copy, and delete text, format it, and also insert images and videos.

To edit and format the content inside the widget you can use standard keyboard shotcuts (hotkeys) of text editors. Examples:

  • editing: copy (Ctrl + C), cut (Ctrl + X), paste (Ctrl + V)
  • formatting: bold (Ctrl + B), italic (Ctrl + I), etc.

You can also use browser’s context menu (opens with the right-click).

When inserting text from other text editors the formatting partially or fully preserved – it depends on the source of the text.

Text Formatting Options in Rich Text Widget

The following options are available for formatting the text:

  1. Paragraph (<p> tag) and headers of various levels from 1 to 6 (<h1>-<h6> tags)

  1. Basic formatting: Bold, Italic, Underlined, Strikethrough, Superscript / Subscript

3. Link

Link button is only available when text is selected. By clicking the button, you can enter the URL (link address) in the pop-up window and set it to open in a new tab.

4. Bulleted and Numbered Lists

5. Quote

6. Code Block

7. Markdown

You can use Markdown syntax to format text. For example:

  • Wrapping text with “**” on both sides makes it bold.
  • Typing “---“ and “***” symbols creates a horizontal divider line.

Adding Media Content into Rich Text Widget

You can add the following into the widget:

1. Images

Click Image button, then Select Image and in the pop-up window choose the desired picture/image.

Set the parameters for the image:

  • Size: Default, Full Width or Custom (you can specify the size in percentages or pixels).
  • Position relative to text: above, below, wrap on the right or left.
  • Link: you can add clickable link to the image.
  • SEO-settings: alternative text and title.

2. Video

Click Video button, then click Replace Video and choose the desired video file in the pop-up window.

Videos can only be added with Team Pro or Hosting Basic plans.

Configure the settings for the video:

  • Fit: Contain, Cover, or Original Size.
  • Size: By Default, Full Width, or Custom (you can specify the size in percentages or pixels).
  • Position relative to text: above, below, left, or right.
  • Playback optios: Show controls, Mute, Loop, Autoplay, Fullscreen View on iOS.
  • Cover: when you check Add thumbnail checkbox, and additional button Replace Image will appear — click it and choose the desired image for the cover.

3. Videos from third-party platforms: YouTube, Vimeo, Rutube, VK, Kinescope.

Click the Video by Link button and paste the desired link or embed code into the pop-up window.

After adding the link or code, additional settings will appear in the pop-up window:

• Size: Default, Full Width, or Custom (you can specify the size in percentages or pixels)

• Position relative to text: above, below, left, or right

• Playback settings: Mute, Loop, Autoplay, Fullscreen Viewing on iOS

Using Rich Text in Collections

If you’re using collections and dynamic pages in your project, then with the help or Rich Text Widget you can conveniently format the content. It’s especially useful for blogs, news sites, and products’ and services’ catalogs, where every text requires an individual formatting.

How to Add Rich Text Widget to a Collection

1. Go to Collections section, select the desired collection and create a field of Rich Text type within it.

Adding a Rich Text field to the collection

2. Go to the necessary page of the project (for example, dynamic page of the collection) and add Rich Text widget onto the canvas.

Rich Text widget is added on the page

3. Link the created Rich Text (Formatted Text) field from the collection to the Rich Text widget.

To do this, go to Settings on the right panel and select the desired field under Dynamic Data.

We link the created field of the collection to the widget

Done! Now you can manage the content of Rich Text widget directly from the collections items table. It’s especially convenient for the customers – any manager can now edit and format the content via CMS without having to open the website pages.

How to Edit Rich Text Widget Content in a Collection

You can manage the content of Rich Text widget added to a collection page through the collection entries.

To do this, go to the Collections section, open the desired collection and click on the relevant table entry.

Clicking the relevant entry in the collection table

In the pop-up window that opens, find the field of the Rich Text type (Formatted Text) that you added earler – here you can add the desired text and media content and adjust the formatting.

Editing and formatting of the content in the collection table

All changes made in the collections table will automatically apply to Rich Text widget and display on the collection page.

Formatted content automatically displays on the collection page