Text boxes allow you to add and highlight your text on Content pages. In this article, we'll guide you through the basics of Text boxes, including how to add, style, format, and configure your Text box widget.
Add a Text box
Click the "+ Add content" button.
Select "Text box" from the Content menu.
Text box shortcuts
There are a few different Text box shortcuts available from the Content menu for more streamlined content creation. These are based on the common formatting choices.
Text box: No formatting applied.
Heading 1: Large heading text formatting applied.
Heading 2: Mid-heading text formatting applied.
Call to action: Text box with link in button style.
Note: To add a Text box to a blank Content page you can also click on the "Add content" button in the Content page editor.
Convert text to Text box
Note: Convert text to Text box is only available while using the Column grid.
Highlight any free-flowing text and click on the "Convert to Text box" in the Formatting toolbar. Your selected text will be converted to a Text box.
Overflowing Text box
If the size of your Text box is preventing all the content from displaying you will see an "Overflowing" tooltip in the bottom right corner of a Text box when hovering over it in Preview.
This tooltip will disappear once you resize the Text box appropriately to fit all the content.
This is a useful way of checking if the text in a Text box is displaying as intended.
Find out more about how to resize your Text box and other widgets.
Format text in a Text box
Highlight any text in a Text box in Content page editor to display the text formatting options.
Text box column count
Text boxes have an option to display the text in columns.
How to change the Text box column count:
Hover over a Text box in Preview. Right-click on it or click on the three-dot icon.
Move to the menu option "Column count".
Choose the number of columns.
Note: The gap between the columns is dictated by "Grid density" settings in the "Grid settings" modal.
Text box configuration
Text box style
You may have access to several Text box styles that are predefined by your brand theme. They allow you to quickly change the formatting of your text, and background color, or add additional elements such as lines or icons all while staying within your brand design guidelines.
How to change the Text box style:
In Preview
Hover over a Text box in Preview. Right-click on it or click on the three-dot icon.
Move to the menu option "Styles".
Choose your style from various options pre-defined by your brand theme.
In Content page editor
Hover over a Text box in Content page editor until the Widget toolbar appears at the top.
Click the settings "cog" icon.
The Text box configuration modal opens.
Click on the "Styles" tab.
Select Text box style from the dropdown menu.
Press "OK" to save your selection.
Text box background opacity
This setting changes the background opacity for the Text box styles that use background.
How to change the Text box background opacity:
In Preview:
Hover over a Text box in Preview. Right-click on it or click on the three-dot icon.
Click on the "Background opacity" option in Widget menu.
The Text box configuration modal opens.
Adjust the Background opacity with the slider.
Press "OK" to save your changes.
In Content page editor
Hover over a Text box in Content page editor until the quick icons appear at the top.
Click the settings "cog" icon.
The Text box configuration modal opens.
Adjust background opacity with the slider.
Click "OK" to save your changes.
Text box corner radius
You can adjust the corner radius of Text boxes. Options to change all corners at once or each one individually are available.
How to change the Text box corner radius:
In Preview:
Hover over a widget in Preview. Right-click on it or click on the three-dot icon.
Click on the "Corner radius" option in Widget menu.
The Text box configuration modal opens.
Choose to set all the corners at once or each one individually.
Enter the rounding values in em.
Press "OK" to save your changes.
In Content page editor
Hover over a Text box in Content page editor until the quick icons appear at the top.
Click the settings "cog" icon.
The Text box configuration modal opens.
Choose to set all the corners at once or each one individually.
Enter the rounding values in em.
Press "OK" to save your changes.
Break text
Note: This option is only available on Freeform pages.
When a widget is placed over a Text box, you can choose to break text with the widget.
The "Break text" option is available for all widgets from the widget menu or widget settings.
Place any widget on top of a Text box.
Hover over a widget in Preview. Right-click on it or click on the three-dot icon.
Click on the "Wrap text" option in the widget menu.
A modal for widget configuration will open.
Select "Break text".
Press "OK" to save your selection.