In order to add the text element to your block, click the Add Element icon and in the expanded bar click the Text element or drag & drop it into the block building area. In case you click on it, it will appear right in the center of the block.
Smart Bar - Text Options
As soon as you added Text block and you have it in focus, you will see a vertical grey bar to the right – Smart Bar. While text options are not expanded you will see 2 options in Smart Bar – to position the text element vertically and horizontally within the whole block.
When you double click the element to open Settings sidebar, you will see additional options in the Smart Bar that will be text alignment, text markup, text formatting (bold, italic, etc) and text color.
Text Alignment (applied to the whole element)
The option will be aligned to the whole text element.
Text Markup (applied to a paragraph)
The option is required for SEO markup. It will not affect how the font looks, but will add corresponding tags to it. (For example, H2 for title). By default the text is added as paragraph.
Text Formatting (applied to a highlighted selection up to one letter)
These are standard text formatting options – bold, italic, all caps, etc.
Text Color (applied to a highlighted selection up to one letter)
Select the whole text or a part of it to apply custom color.
Hyperlink (applied to a highlighted selection up to one letter)
Select the whole text or a part of it to add link to it.
Double-click the new Text block to expand its settings that will appear to your right side:
- at the top of each element’s settings you will see the Sizes and Positions section. This is an informative section where X and Y show the top left angle position, o shows the rotation angle, W and H show the width and height of the element. These fields are functional and you can use them to move, resize or rotate your element. However the same actions can be achieved by manually tweaking the element with your mouse.
- Heigh Auto option that will automatically adjust the text element frame in case it’s activated. You will also get Padding options if Height Auto is activated, see more info below.
- If Height Auto is not activated, you will see the options for Vertical Text Alignment that allow you to align the text vertically within its frame.
- The next block of options is Typography – here you can manage the font type, font size, letter spacing and line height for the whole element.
- The Text Element can have its own background color, outline border and rounded corners.
Important for Text - element frame and height auto
When you add a text element to your block and add text into it, you should be careful to not have the element frame larger or smaller than it should be. If the text frame is too long and overlaps with some other functional element (like a button) it will make that button partially non-clickable.
To be on the safe side we recommend using the Height Auto option that will adjust the element’s frame to the content:
In addition to this, if you activate Height Auto, you get access to the text padding options that can be very useful if you use a background color: