Widgets: Text and Titles (Headings)

The text and title widgets offer a wide range of customization options, most of which are accessible through the text toolbar. With this simple editing interface, you can easily change the font, color, alignment, and style of your text. The text toolbar allows you to quickly make adjustments to highlight key points and effectively organize information on your site.

There are three text widgets that can be found in the widget library:

  • Text

  • H1 (Large Title)

  • H3 (Small title)

Once a text widget is added to a site, you can easily switch between different text options. For example, if you add a Text widget but then decide you want it to be an H2, you can make that change directly in the text toolbar.

The available text types are: Paragraph, H1, H2, H3, H4, H5, and H6.

Edit Text (Paragraphs and Titles)

To edit text on your site:

  1. Click the text you want to edit to open editing mode.

  2. Select the text you want to edit by clicking and dragging over the text.

    edit-text.png
  3. Use the inline editing options in the bar above the text to edit text styles, sizes, fonts, alignment, add links, and more. For details on the text bar, see the section in this article Text Tool Bar.

Text Tool Bar

text-tool-bar.png

Number

Setting/option Name

Description and Notes

1

AI Assistant

Generate content quickly and work more efficiently with the AI Assistant. For more information, see AI Assistant for the Text Editor.

2

Basic formatting options

Bold, Italicize, and Underline selected text.

3

More formatting options

Click on the horizontal three dot icon to find the following options to apply to selected text:

  • Letter spacing

  • Text shadow

  • Strike through

  • All Caps

4

Text color

Change the color of the selected text.

5

Clear Formatting

Reset selected text to the format set in the site's theme. For additional information on theme text, see Site Theme.

6

Text type

Select the type of text:

  • paragraph

  • Heading 1 (H1)

  • Heading 2 (H2)

  • Heading 3 (H3)

  • Heading 4 (H4)

  • Heading 5 (H5)

  • Heading 6 (H6)

All text will be converted to the selected text type.

If the style of the text has been manually changed and you want to apply the changes to the theme text, use the Update theme option located at the bottom of the drop down list.

7

Typography settings

Change the font family and text size for the selected text.

This will disconnect the text from the theme text. To reconnect it, click the Clear Formatting icon (labeled as number 5 in both the table and the screenshot).

8

Link text

Add a link to the selected text. For more information on the link picker, see Link Picker.

9

Alignment

Change the alignment of all text in the widget.

10

Line height

Change the line height of the selected text. There are preset options available as well as custom

11

List options

Turn selected text into a numbered or bulleted list. Use the down arrow to change the bulleted list style. For more on lists, see Bullet and Number Lists.

12

Text direction

Change direction of the text.

13

Connect to data

Connect a string of text to data rather than the full text widget.

14

Undo and Redo

-

15

Exit edit mode

Click the check mark to exit out of editing mode for the widget.

Bullet and Number Lists

Create a bullet or number list using the text tools inside the Text widget. Lists are a good way to group content, features, or products so that visitors can quickly understand and compare information.

To add a bullet or number list:

  1. Click the text you want to make into a list.

  2. Highlight the text, and click the Bullet list (bullet-list-icon.png) or Number list (number-list-icon.png) icon on the text toolbar.

    • (Optional) To select a different bullet style, click the down arrow next to the Bullet list (bullet-list-options-arrow.png) icon.

  3. To create nested bullets and lists, press the Tab button on your keyboard. The bullet or number is shown indented to the right.

    You can have multiple nested bullet and number lists.

Design Editor

The design options in the design editor apply to the widget itself, such as adding a background.

To style the text within the widget, use the text toolbar (see the Text Tool Bar section in this article). However, if the widget is connected to data, text settings will be available in the design editor instead. Keep in mind that when you customize text settings in the design editor for data-connected widgets, these changes will override the site’s theme settings and break the connection to the theme. As a result, future changes to the theme won't affect the text in this widget. For more information, see Theme Text. For more information on connected data, see Dynamic Content Overview.

Features and Limitations

  • Text sizes can be up to 500 px.

  • Multiple types of text can be contained in a single text element. For example, Heading 2s, paragraph, and Heading 3s can all be used in the same element. The text should be on its own line, separated by pressing the Enter key.

  • If a font offers other weights, it can be selected within the font list. To select a font's weight, hover over the font to see the font's available weight options (normal, bold).

    font-weights.png
  • Copy and paste works externally and internally. Pasting from both external locations and within the editor (internal) applies the theme text styles and any inline styles that were applied to the text in the editor. Bold, underline, and italic are maintained from the copied text.

  • Custom line height. In addition to the existing default line heights, you can now choose a custom line height.

  • Specify letter spacing. To select letter spacing, click the three dots icon in the inline text editor, and select from the following:

    • Auto

    • Narrow (-0.05)

    • Wide (0.2)

    • Custom (between -2 and 0.5 in increments of .01)

  • All Caps. To change the font to be in all caps, click the three dots icon in the inline text editor, and click the All Caps toggle.

  • Shadow. Select the color and position.

  • Strike-through text.

  • Connect text to data. Click the connected data icon in the inline text editor.

  • There is no option to add a list with heading text.

  • Bullets of items in a list that have more than one fonts size will use the site theme size.

HTML Tags

Due to HTML5 best practices, we do not allow updates to the HTML of the text with a non-supported tag.

To add a specific style to the text, we recommend adding it to the CSS.

The following tags are supported via developer mode: img, sub, sup, blockquote, code