Introduction

Text type elements contain text which can be formatted using a subset of standard HTML tags and CSS styles, as detailed below.

Format the text using the html property.

Note: To add an input element for entering large amounts of text, see TextBox. Input elements are available when Dev Mode is enabled.

Formatting Text

Supported HTML Subset

The supported HTML tags are:

  • <p>
  • <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>
  • <a>
  • <span>
  • <ul>, <ol>, and <li>
  • <br>

Text Theme Translation

Each text theme in the Editor corresponds to a specific set of HTML and CSS attributes:

  • Site Title — <h1>
  • Page Title — <h2>
  • Huge Heading — <h3>
  • Large Heading — <h4>
  • Basic Heading — <h5>
  • Small Heading — <h6>
  • Paragraph 1 — <p class="p1">
  • Paragraph 2 — <p> or <p class="p2">
  • Paragraph 3 — <p class="p3">

Inline Styling

Text elements support inline styling via the supported HTML tags listed above. The element can contain the following attributes:

  • style: For example,

    • $w("#text1").html = '<h1 style="color: blue; text-decoration: underline">Site Title Text</h1>';
    • $w("#text1").html = '<span style="color: red; font-size: 10.5em"> Text </span>'
    • $w("#text1").html = '<p style="color: green; font-size: 16px"> Text </p>'
  • dir (text direction): For example, <span dir="rtl"></span>

The style attribute supports the following properties:

  • font-face
  • font-size
  • font-weight
  • font-style
  • text-decoration
  • color
  • background-color
  • text-align
  • margin-left
  • text-shadow
  • line-height
  • letter-spacing

Bulleted and Numbered Lists

Text elements can contain bulleted and numbered lists using standard HTML tags:

  • Numbered lists — using <ol> and <li>
  • Bulleted lists — using <ul> and <li>

You can create links using the standard HTML <a> anchor element. Anchor elements support the href and target attributes. For example:

<a href="http://wix.com" target="_blank">Stunning</a>

The href attribute can contain all link types in the Wix link format.

Did this help?