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.
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 17 days ago