Text and Text Link
Text is an element that is used for text content.
Text has default font style: size - 14px, color - black, font - Arial (font type is inherited from the parent element or Canvas).
Text can be styled using the Styles tab in the right panel.
You can use the following properties to format Text:
- Font
- Font weight
- Font size
- Font color
- Line-height
- Letter-spacing
- Text Align
- Text Stroke
- Text Shadows
- More Type Options: Decoration, Capitalize, Overflow Wrap, Breaking.
You can style the entire text or a part of it by selecting it with the mouse. With text selected in the Text block, you will see options in the right panel for styling it. In addition to other options, you can set Diacritics (superscript or subscript) here.
Also, the selected text can be made a link to a web page or an external resource by specifying a link in the Insert link field. By clicking on three dots to the right of the link, you can select a page on your website as a link and set the option to open the link in a new window.
For more details about styling text, see Typographics (link).
You can select a tag for a Text block: H1, H2 , and so on up to H6 on the Settings tab in the right panel. The default Text block tag is div.
Setting the required tags for different types of text will help the browser, screen reader programs, and search engines understand how the text on the page is arranged and determine its structure. This can be important for search engine optimization.
Text Link is used when a text element contains only a link, for example, when creating an anchor text.
By default, a Text Link has the following styles:
- Font size - 14px, color - blue, underlined, font – Arial (is inherited from the parent element or Canvas)
- Cursor - Pointer (shows whether a link is clickable or not when hovered)
This is the default style for a text link. However, you can change it in the Styles settings in the right panel.
It is recommended to customize Text Link styles for different states: hover, active, focused, or visited. This will make the interaction with the site more convenient for the user.
For Text Links, click-triggered actions are usually used. However, it is also possible to set hover-triggered actions to a text link.
By default, click-triggered actions are set to a text link. You can change or customize the action on the Logic tab in the right panel.
To do this, click on the icon to the left of the action name.
You can find the following options in the action settings:
- Action trigger – condition for an action to take place: upon clicking or hovering.
- Action – an action that will take place upon hovering or clicking on a text link.
The following actions are available when clicking on a Text Link:
- Go to link – add a link in the Link field that will be used to move to another page when clicking on a text link. You can set to open the link in a new tab.
- Go to page – select a project page from the drop-down list, which you will be redirected to when clicking on a text link. You can set to open the page in a new tab.
- Go to anchor – use Select element button to set an anchor on a page (for example, a section), which you will be redirected to when clicking on a text link.
- Send mail – add an email address in the Email field, which a user letter will be sent to. When clicking on a text link with the Send mail setting, a user application will be opened for sending a message.
- Phone – add a phone number in the Phone field that will be dialed when clicking on a button. This action is available on mobile devices.
- Show element – use Select element to set an element that will be shown when clicking on a text link. You can also select the Display setting from the list for this element.
- Hide element – use Select element to set an element that will be hidden when clicking a text link.
- Toggle element – use Select element to set an element that will switch its current display state to the Display value from the list and vice versa.
The following actions are available when hovering a text link:
- Show element
- Hide element
- Toggle element