Text

Text is a built-in tool so users can add text to their designs. This tool is supported for both display modes: emails and web pages.

Enable / Disable

Text tool is enabled by default but you can choose to disable it.

unlayer.init({
  tools: {
    text: {
      enabled: false
    }
  }
});

Default Values

Text tool comes with the following default values. You can choose to change any of these.

Property	Default Value
text	`<span style="font-size: 14px; line-height: 19.6px;">This is a new Text block. Change the text.</span>`
textAlign	`left`
color	`#000000`
lineHeight	`140%`
containerPadding	`10px`

Here are a few examples on how to change these default values.

Text

unlayer.init({
  tools: {
    text: {
      properties: {
        text: {
          value: '<span style="font-size: 14px; line-height: 19.6px;">This is a new Text block. Change the text.</span>'
        }
      }
    }
  }
});

Alignment

unlayer.init({
  tools: {
    text: {
      properties: {
        textAlign: {
          value: 'right'
        }
      }
    }
  }
});

Color

unlayer.init({
  tools: {
    text: {
      properties: {
        color: {
          value: '#000000'
        }
      }
    }
  }
});

Line Height

unlayer.init({
  tools: {
    text: {
      properties: {
        lineHeight: {
          value: '140%'
        }
      }
    }
  }
});

Container Padding

unlayer.init({
  tools: {
    text: {
      properties: {
        containerPadding: {
          value: "10px"
        }
      }
    }
  }
});