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.

    Example text highlighted.
  3. Use the inline editing options in the bar above the text to edit text styles, sizes, fonts, alignment, add links, and more.

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 or Number list icon on the text toolbar.

    • (Optional) To select a different bullet style, click the down arrow next to the Bullet list 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. 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.

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).

    List of fonts with one selected and displaying all available font weights.
  • 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