Divider

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

Enable / Disable

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

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

---

Default Values

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

Property	Default Value
width	100%
border	{ borderTopWidth: '1px', borderTopStyle: 'solid', borderTopColor: '#BBBBBB', }
textAlign	center
containerPadding	10px

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

Width

unlayer.init({
  tools: {
    divider: {
      properties: {
        width: {
          value: '100%',
        },
      },
    },
  },
});

---

Border

unlayer.init({
  tools: {
    divider: {
      properties: {
        border: {
          value: {
            borderTopWidth: '1px',
            borderTopStyle: 'solid',
            borderTopColor: '#BBBBBB',
          },
        },
      },
    },
  },
});

---

Alignment

unlayer.init({
  tools: {
    divider: {
      properties: {
        textAlign: {
          value: 'center',
        },
      },
    },
  },
});

---

Container Padding

unlayer.init({
  tools: {
    divider: {
      properties: {
        containerPadding: {
          value: '10px',
        },
      },
    },
  },
});