Unlayer Documentation

Unlayer Documentation

Welcome to Unlayer Documentation. It takes less than 5 minutes to get our editor up and running on your project.

These guides will take you through the process and get you up and running.

Get Started    

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

Enable / Disable

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

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

Default Values

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

Property

Default Value

text

Heading

headingType

h1

fontFamily

{ label: 'Arial', value: 'arial,helvetica,sans-serif'}

textAlign

left

color

#000000

lineHeight

140%

containerPadding

10px

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

Text

unlayer.init({
  tools: {
    heading: {
      properties: {
        text: {
          value: 'This is a different heading'
        }
      }
    }
  }
});

Alignment

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

Color

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

Line Height

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

Container Padding

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

Updated about a month ago


Heading


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.