Text Tool

To add text, select the Text tool from the toolbar, or press T, then click anywhere in the page or canvas and start typing.

There are several text styling options and properties in the Inspector under the Text panel. This includes options for: changing the font, changing text weight and size, setting text color and opacity, adjusting line height, character spacing and first line indent, setting horizontal and vertical alignment, setting text horizontal and vertical size, adding shadows, adding links, and applying predefined header styles.

Refer to the image above to identify text styling and properties panels.

1. Text font
2. Weight and size
3. Color and opacity
4. Line height, character spacing and paragraph indent
5. Horizontal alignment
6. Vertical alignment, overflow and wrapping
7. Shadow
8. Link element
9. Predefined Header styles

Learn more about how to use text styles and properties below.

Text font

The Font Selection menu presents fonts in two lists separated by a divider. The first list contains fonts used in the page you are designing while the second list contains all fonts supported in Siter. 

To change the font, select a text layer then click on the Font Selection panel to reveal available fonts. You may also use Search in the Fonts Selection menu to find a font. 

Click on a font to apply it to the selected text. 

You can also change the font by clicking on the Font Selection panel to select the applied font, and type the name of the font to use.

Text weight and size

Fonts support several text weights. To change text weight, click on the active Text Weight panel and select a respective text weight from the menu that appears.

To change text size, click and drag to the right on the Text Size panel to increase text size, or click and drag to the left to decrease it. Alternatively, click on the Text Size value to select it, then type a new value.

Color and opacity

Text color and opacity can be changed using the Color Picker panel.

Line height, character spacing and paragraph indent

To change a text’s line height, click and drag on the Line Height panel; to the right to increase the value, or to the left decrease it. Alternatively, click on the Line Height value to select it, then type a new value.

To change character spacing, click and drag on the Character Spacing panel; to the right to increase the value, or to the left decrease it. Alternatively, click on the Character Spacing value to select it, then type a new value.

Similarly, to change Paragraph Indent for a text, click and drag on the Paragraph Indent panel; to the right to increase the value, or to the left decrease it. Alternatively, click on the Paragraph Indent value to select it, then type a new value.

Horizontal alignment

There are four horizontal alignment options for text:  Left, Center, Right and Justified. To change horizontal alignment, select a respective option from the Horizontal Alignment panel, to apply it to a selected text.

Vertical alignment

There are three vertical alignment options for text: Top, Middle, and Bottom. To change vertical alignment, select a respective option from the Vertical Alignment panel to apply it to a selected text.

Text overflow and wrapping

Text overflow and wrapping determines how text flows or breaks into a new line within the text layer bounding box. There are three overflow and wrapping options:  Auto width, Auto height, and Fixed. To apply an overflow and wrapping option, first select a text layer, then select an overflow and wrapping option to apply it to the selected text.

Additionally, you can set text Overflow and Wrapping to Fixed by clicking and dragging on the text layer’s bounding box.

Text shadow

To add a shadow to a text layer, click on the Add icon along the Text Shadow panel, then set desired shadow values. Additionally, an added shadow can hidden or revealed by clicking on Eye icon on the respective shadow panel. To remove a shadow from a text, click on the Minus icon in the respective shadow panel.

Link element

To add a link element to a text layer, click on the Plus icon along the Link panel and then click on the URL panel labelled No URL/Element to enter a URL value. The Link Element supports complex interactions modes and behaviours.

Predefined header styles

There are six predefined Header styles that can be applied to text. To apply a Header style to text, enable heading styles by clicking on the Toggle along the Heading Element panel, then select a respective header style.