Heading

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.

warning

The text editor for headings has been updated. Existing headings in saved designs will continue using the legacy editor, while new headings will use the updated editor.

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
textJson	{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Heading","type":"extended-text","version":1}],"format":"","indent":0,"type":"extended-paragraph","version":1,"textFormat":0,"isInlineTool":true}],"format":"","indent":0,"type":"root","version":1}}
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: {
        textJson: {
          value:
            '{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"This is a different heading","type":"extended-text","version":1}],"format":"","indent":0,"type":"extended-paragraph","version":1,"textFormat":0,"isInlineTool":true}],"format":"","indent":0,"type":"root","version":1}}',
        },
      },
    },
  },
});

---

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',
        },
      },
    },
  },
});