Heading Small
Heading Medium
Heading Large
Heading X-Large
Heading 2x-Large
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Heading Bullet
Heading Divider
Heading Line
Heading Line Left
Heading Line Center
Heading Muted
Heading Primary
Heading Success
Heading Warning
Heading Danger
Heading Parallax Animation
Heading Settings
Heading settings, learn more about the Heading add-on settings. Here is a short overview.
| Setting | Description |
|---|---|
| Content | A text field for the main text blocks. |
| Use Link | Enable this option to use link to the heading. |
| HTML Element | Choose on of the elements to fit your semantic structure. |
| Style | Heading styles differ in font-size but may also come with a predefined color, size and font |
| Decoration | Decorate the heading with a divider, bullet or a line that is vertically centered to the heading |
| Decoration Color / Decoration Width | Define the decoration color and width |
| Color/Font-size/Lineheight | Select color and font-size and line-height for heading |
| Text transform | The following options will transform text into uppercased, capitalized or lowercased characters. |
General Settings
General settings, which are the same across all add-ons, are grouped in a General section at the bottom. Here is a short overview.
| Setting | Description |
|---|---|
| Margin | Keep the existing vertical margin (e.g. from headings), force specific margin or remove all margin. Margins of an element can be removed from the top and bottom. |
| Remove top margin. | Use this option to remove the add-on's top margin |
| Remove bottom margin. | Use this option to remove the add-on's bottom margin |
| Animation | Overwrite the animation settings from the section. This won't have any effect unless animations are enabled for the add-on. Or enable a parallax animation for this add-on. |
| Alignment | This option specifies the alignment of an add-on according to the surrounding element |
| Text Breakpoint | Define the device width from which the alignment will apply. |
| Visibility | Define when the add-on should be hidden. |
Parallax Background Settings
The Parallax Background settings allow you to use a BACKGROUND IMAGE to animate an add-on depending on the scroll position of the document. To configure a parallax background image animation,just enable the Parallax Background feature.
| Setting | Description |
|---|---|
| Container Width | Use this option to give it a max-width and wrap the main content of your website. Default setting is enabled |
| Grid layout | Columns control the grid layout of your add-on content. |
| Container Alignment | Define the alignment in case the container exceeds the element's max-width. |
| Image | Select Background Image parallax |
| Background Position | To alter the background position of your image — which is in the top left hand corner of the area by default, add one of the following options. |
| Background Image Size | Determine whether the image will fit the section dimensions by clipping it or by filling the empty areas with the background color. |
| Content Padding | Set the vertical padding for content inside parallax background. |
| Text Color | Set light or dark color mode for text, buttons and controls. |
| Background Color | Use the background color in combination with blend modes, a transparent image or to fill the area, if the image doesn't cover the whole section. |
| Blend mode | Determine how the image will blend with the background color. |
| Background Image Visibility | Display the image only on this device width and larger. |
| Horizontal | Animate the horizontal position (translateX) in pixels. |
| Vertical | Animate the vertical position (translateY) in pixels. |
| Parallax Breakpoint | Display the parallax effect only on this device width and larger. It is useful to disable the parallax animation on small viewports. |
Parallax Animation Settings
The Parallax Animation Settings allow you to animate an add-on depending on the scroll position of the document. To configure a parallax animation,just enable the Parallax Animation feature.
| Setting | Description |
|---|---|
| Horizontal | Animate the horizontal position (translateX) in pixels. |
| Vertical | Animate the vertical position (translateY) in pixels. |
| Scale | Animate the scaling. 1 means 100% scale, 2 means 200% scale, and 0.5 means 50% scale. |
| Rotate | Animate the rotation clockwise in degrees. |
| Opacity | Animate the opacity. 1 means 100% opacity, and 0 means 0% opacity. |
| Easing | Determine how the speed of the animation behaves over time. A value below 1 is faster in the beginning and slower towards the end while a value above 1 behaves inversely. |
| Viewport | Set the animation end point relative to the viewport height, e.g. 0.5 for 50% of the viewport. It is very useful to stop the animation of a text when it’s in the middle of the screen. |
| Breakpoint | Display the parallax effect only on this device width and larger. It is useful to disable the parallax animation on small viewports. |