Velo: About Formatting Text Elements

Visit the Velo by Wix website to onboard and continue learning.

You can connect data to elements using Wix Data and datasets or Velo and code. See an example of applying data from a dataset to page elements

When you connect a Text element to data using Velo, the formatting for its text is affected by a number of factors. How you connect the data, what data you connect it to, and how its formatting is set, all contribute to the text's formatting. 

The formatting of a Text element's content that is set using code is determined by the property used to set the the content and the manner in which the content is marked up. 

.text

When a Text element's content is set using its text property, it keeps the formatting that was set in the Editor using the Edit Text button.

The formatting in the Text element will be uniform for all its content. Different parts of the content cannot be formatted differently. If more that one format settings were used in the Editor, the first style is applied to all the content that was set using the text property.

.html

When a Text element's content is set using its html property, the Text element's formatting depends on how you mark up the content. You can mark up the content with tags that are translated to themes or by adding additional tags.

Themes

When a Text element's content is set using its html property, all <hx> and <p class="px"> tags are formatted using the site's themes as described in the API Reference.

Remember, themes are defined site-wide. Use themes when you want to remain consistent with the rest of your site. If the formatting of a theme in your site is changed, you won't have to worry about changing the formatting of the content in your rich text fields. They reflect the new theme's formatting.

Manual Formatting

When a Text element's content is set using its html property, you can use additional, non-theme related tags to further style the content.

For a list of all the HTML tags that you can use with a Text element's html property, see the API Reference.

Did this help?