Rich Text element
Get to know the rich text element in detail.
The Rich Text element is a powerful WYSIWYG editor that allows you to create formatted text on your snap. This means you can mix text styles like (font-size, font-weight, font-family, color, alignment, etc.)
In general we distinguish between Select and Edit mode.
This is the mode when you just select the rich-text element. On the right-toolbar you'll see the usual settings. If you change something, it will apply to the whole rich-text content.
You'll enter the edit mode when you double-click on the rich-text element. In this mode you can obviously edit the content. You can select a part of the text and change the settings for that part only (e.g. its color).
Let's have a look at the right toolbar and what you can configure there.
By default the rich text has a padding of 8px on each side.
The padding top and bottom as well as left and right are also linked with each other by default. This means if you change the padding top, the value will also applied for padding bottom. So will the left and right padding. If you want to change those values separately, you can do so by clicking on the linking icon between the inputs.
Pro: Tip 💡
You can change any number input values conveniently by using mouse wheels. Just focus the input and scroll up or down. It works with the arrow keys as well.
The rich-text elements supports the following advanced styles:
- Border-radius (default: 8px)
- Box shadow
Of course the rich text element can be aligned to the left, center or right. But there is more to keep in mind. As already mentioned the rich text element is a powerful wysiwyg editor. This means you can align each paragraph individually. Here you see an example how this would look like:
Since the rich-text element can be resized bigger than the text content (more in next section), you can also align the text content vertically (top, middle or bottom).
Initially the rich-text element is auto-sized. This means it will always grow with the content. If you want that the element has a fixed width and increase in height according to the content, you can switch to the auto height mode. Or you can resize the element manually by dragging its resize handle on the canvas.
The other settings are pretty self-explanatory. You can change font-size, font-weight, font-family, color, line-height and letter-spacing.
Again each of those settings can be applied to the whole rich-text content or to a part of the text only.
Pro: Tip 💡
You can also apply a gradient color to the text.
The background color can be applied to the whole rich text element the configured border-radius will apply to it.