Use this widget to create and edit text on your project pages. To add new text click + (W) in the widget bar and select Text.
Click the Text widget once to open general widget settings on the right side: Edit, Align, Animation, Rotation, Position, and Lock. Click Edit or double-click the Text widget, to access text properties such as typography (basic and advanced) and alignment. You can also add Links and special symbols (Insert), change Color, or split a text into Сolumns.
Note: If you are pasting text from an external document but do not want to keep its format, you can use the shortcut Cmd+Shift+V to paste text without formatting.
To add a text style—e.g., H1 or Caption—select a text fragment and choose Typography in the widget controls. To see a full list of styles, click on the down arrow next to No style. To create your own style or modify defaults, click on the three dots next to their title: you can change font size, color, line height, tracking, etc.
For SEO purposes, you can apply HTML tags—<h1>, <h2>, <h3>, or <h4>—to any style. As a result, the text in the final code will be wrapped with these tags. By default, the H1 and H2 styles are wrapped with <h1>…</h1> and <h2>…</h2>
To change the order in which styles are shown in your widget attributes, simply drag and drop them into the desired order. This also works for List styles.
When you add a new Text widget, it automatically remembers the last style you used and applies it to the new text fragment. But in some cases, when you copy your text from a rich text editor, it can inherit formatting from the initial document. To avoid this, use these shortcuts:
- Cmd + Shift + C to copy
- Cmd + Shift + V to paste
(Cmd + Option + Shift + С/Cmd + Option + Shift + V for Safari)
- Ctrl + Shift + C to copy
- Ctrl + Shift + V to paste
(Ctrl + Option + Shift + С/Ctrl + Option + Shift + V for Safari)
To copy a style from another widget, use shortcuts Cmd + Opt + C/V for macOS and Alt + Shift + Ctrl + C/V for Windows. Learn more about other useful shortcuts for working with text here: Shortcuts.
If you create a global style, it will automatically appear across all projects in your account — both existing and new. To do so, switch to the Global tab in style settings, click +, and set a style.
Project styles exist only within the project where they were initially created.
To add fonts from Adobe Fonts (Typekit), Webtype, Google Fonts, and type.today to a project click Typography in the widget controls, then click on the font’s title and select Library.
Hint: double-click the Text widget to directly access text properties.
With paid plans, you can upload custom fonts in TTF, OTF, WOFF, or WOFF2 format to your Library. Click Upload on the Custom tab in the Fonts drop-down, type in a name for your font, pick the weight, and upload the file.
Note: you must have a proper license to use any copyright-protected fonts.
Custom fonts do not transfer when a project is transferred to another account per the user’s request. The destination account owner will have to re-upload any such fonts in the transferred project manually.
Note: Due to licensing restrictions all Adobe Fonts (Typekit) or type.today fonts are replaced by default system fonts when a project is exported to PDF.
Click Align to position the text inside your widget. Besides four basic alignments (flush left, flush right, justified, and centered), you can also select a right-to-left (RTL) orientation for your text in the Writing section.
Additionally, there are two resizing options:
- Auto height—the height of the widget changes automatically according to the length of the text
- Fixed size—set the fixed width and height for your widget and use arrows to select whether the text should be shown at the top or bottom.
Double-click the Text widget and select Advanced Typography in its attributes. This section offers different options to help fine-tune text.
Allows you to transform your whole text into upper or lower case, capitalize the first letters of each sentence, or change fonts to bold or italic with just one click.
Apply overline, underline, or strikethrough to your text.
Convert text to subscript or superscript, create fractions, add small caps, ligatures, or stylistic sets.
Enable this option to convert text to an ordered or unordered list.
You can also customize styles for lists. The default list style is set as ‘Same as text’—that means lists inherit the attributes of the text widget in which they are created. Click on ‘Same as text’ to start adding a new style. Next click + and select your desired settings.
List styles work the same way as text styles: you can make them global and rearrange by dragging and dropping.
Add an outline to your text: specify width and color.
Select a background color for the text widget and set opacity.
Set a display color for when text is selected in the published project.
Note: The Decoration and Ligature features are available only to those fonts (and symbols within these fonts) that support such modifications.
You can add a link to one or several words within a text widget, or turn the entire widget into a link.
To do so, select the text with your mouse cursor and press the Link icon in the right-positioned menu.
Note: For Global widgets, you can define the Current Link style. It’s a link style for the page that the visitor is currently on.
To set the Current Link style, open the Link panel, select Edit Style from the drop-down menu, and go to the Current tab.
Choose one of the provided link types:
- Website URL. Link to an external website.
- Jump to Page. Link to any page within the project. Type in the page number or page custom link. These links are updated automatically when you rearrange pages in the project.
- Email. Standard ’mail to’ URI scheme that creates a new email message to a specified address.
- Phone Number. ‘Tel’ URI scheme that starts a call for mobile devices. The number has up to fifteen digits without spaces, hyphens, or separators: +[country code][national destination (area) code][subscriber number], as per E.164 recommendations.
- Anchor. Link to any particular position on the same page. Click anywhere to set your anchor, or type the height in pixels, e.g. 748 px. The anchor can’t be placed on a different page.
- Scroll to Top. Brings your visitor to the top of the page.
- Go Back. Leads to the previous page of the project.
Push the Arrow button to activate the link settings.
After that, you will see the Open in tab switcher and the option to choose the Link style from ones that already exist in your project or account (Global styles). You can also create a new style by pressing the Plus icon.
Note: To edit the link, simply put the mouse cursor in the link area.