The Text Element is used to add text content to your website.
Text elements can be placed directly onto the page, or within containers or grids. Once placed, you can type your text content into the element, define the text tags, and style it using the control panels in the right toolbar.
Adding a Text Element to the Page
Click and drag the text element icon from your left side element bar:
Then drag to position the text element wherever you want it on the page.
The text element may be placed as a root element on the page, or placed within a container or a grid.
Once placed, the text element will appear as an empty component that takes up 100% of the width of the page (or its parent container):
Adding Text Content to a Text Element
To add text to an Text Element, double click on it. You'll see the border of the element turn orange, and you can type your text content directly into it:
Assigning Tags to Text Content
By default, the text you type into the element will be tagged as paragraph text <p>. The tag is indicated at the left-hand side:
To set the tag for a piece of text content, first select it within the text element. You'll see the tag menu appear above the selected text:
To assign a different tag to the selected text, choose the tag you want from this menu. You will immediately see the text inherit the styling for that tag as it's defined in the global styles:
Why assign tags to text?
There are a few reasons why you should assign additional tags to your text content, including:
Tagging header text is essential for improving your website's SEO.
Each tag will inherit the styling defined in the global styles. This allows you to easily control the styling of all similarly-tagged text on your entire website.
Using <ul> and <ol> list tags is the easiest way to create numbered and custom-bulleted lists.
Styling a Text Element
To edit the size, margin, padding, and other attributes of a text element as a whole, single-click the element to select it. (Do not double-click into it.)
Once the text element has been selected, you can use the Focus Frame, Dimensions Panel, and other control panels in your right toolbar to style it.
Styling Text Within a Text Element
By default, text will inherit the default global style that has been defined for that tag in the global styles menu.
You can override the global styling for any text element or selected piece of text by adding inline styling. Just select the text element or highlight the text you want to style, then use the control panels in your right toolbar to set the font, colors, etc. STYLING TEXT BY DIRECTLY SELECTING IT IS NOT RESPONSIVE.
If you leave a field blank in Global Styles for a tag (like font weight, text size, etc) and let it inherit a Website-level value, you can change that value on a specific text element by selecting the text element (NOT directly selecting the text) and applying the changes there.
Deleting a Text Element
To delete a text element, select it and then press <delete> on your keyboard, or select "Delete" from the "Edit" menu.