Text
Rich text for paragraphs, lists, links and emphasis.
The Text widget holds body copy of any length: paragraphs, bullet and numbered lists, links, bold and italic, and subheadings inside the text. Its font and size come from the Body text style in your Design System. You can split it into columns and start it with a drop cap.
Add text
Insert it
Open Insert in the left panel, find Text under Basic (or type
textin Search widgets) and click it or drag it onto the canvas.Write
Double-click the text on the canvas and type, or use the rich-text field in Content → Text. On the canvas, Ctrl+B and Ctrl+I make text bold or italic (⌘ on a Mac), and pasted text arrives as plain text.
Format it
The toolbar of the rich-text field has Paragraph, Heading 2, Heading 3, Bold, Italic, Bulleted list, Numbered list, Quote, Link and Clear formatting. Edit HTML shows the source.
For longer text, click Full screen (the arrows at the end of the toolbar). The text opens in a large editor over the page, with the same toolbar, and the canvas behind it still updates as you type. Click Exit full screen or press Esc to go back.
With AI writing set up, text fields have AI actions such as Improve writing, Make shorter, Fix spelling & grammar and Translate to…. See AI in the editor.
Settings
Settings marked Per device can differ on desktop, tablet and mobile (see Responsive editing). The content supports dynamic tags (see Dynamic tags).
Content tab
| Setting | What it does |
|---|---|
| Content | The text. Edit it in the rich-text field or type straight on the canvas: paragraphs, headings inside the text, lists, links, bold and italic. Supports dynamic tags. |
| Columns | Splits the text into newspaper-style columns. Per device. |
| Columns gap | Space between the columns. Shown when Columns is set. Per device. |
| Alignment | Aligns the text. Options: Left, Center, Right, Justify. Per device. |
Design tab
| Setting | What it does |
|---|---|
| Typography | A text style from the Design System (Body, Lead, Small…), or your own font, size, weight, line height and spacing. |
| Color | Color of the text. |
| Link color | Color of links in the text. |
| Link hover color | Color of links on hover. |
| Paragraph spacing | Space between paragraphs. Per device. |
| Max width | Limits the line length, for example 65ch, for comfortable reading. Per device. |
| Drop cap | Makes the first letter large, spanning several lines. |
Every element also has these sections at the end of the Design tab.
| Section | What it does |
|---|---|
| Spacing & position | Margin, padding, width, alignment in its container, order, position (relative, absolute, fixed), offsets, z-index and global classes. See Spacing, size & position. |
| Background & border | Background, border, border radius, box shadow, overflow and opacity of the whole element. See Colors & backgrounds and Borders & shadows. |
| Mask | Crops the element to a shape (circle, arch, blob, star…) or your own SVG or PNG. See Shape dividers & masks. |
Behaviour tab
The Behaviour tab is the same for every element.
| Section | What it does |
|---|---|
| Anchor & classes | An Anchor ID for #links and your own CSS classes. |
| Animations | Entrance, scroll, hover and loop animations from presets or your own timeline. See Motion & effects. |
| Motion & effects | A simple entrance animation, transforms (also on hover), CSS and backdrop filters, and sticky positioning. |
| Scroll & mouse effects | Movement, rotation, scale, fade and blur while the page scrolls, and pointer effects (follow the pointer, 3D tilt). |
| Visibility | Hide the element on desktop, tablet or mobile, or in dark or light mode. See Visibility. |
| Conditions | Show the element only when rules match, such as logged-in visitors, a date range or a URL parameter. See Display conditions. |
| Interactions | Show, hide or change other elements when this one is clicked, hovered or scrolled into view. See Interactions. |
| Attributes | Custom HTML attributes for this element. See Anchor, classes & attributes. |
Tips
- Readable lines. Set Design → Text → Max width to about 65ch for long text.
- Headings are widgets. For section titles use a Heading widget, so the title gets its own style and appears in the page outline.
- Columns on phones. Set Columns back to 1 on mobile; narrow columns are hard to read.
- Text reveal. Behaviour → Motion & effects → Text reveal can reveal a short intro line by line. Avoid it on long text.