Easily create nice looking lists, which come in different styles.
Default Style
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Disc Style
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Decimal Style
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Image Bullet Style
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Square Style
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Circle
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Hyphen
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Marker Color
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Columns Support
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Divider
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Default Style
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
List Divider
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
List Striped
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Card Hover
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Custom Icon
Right alignment
Image Support
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Image asignment
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Link Support
Content Style Bold
- Soup of the Day with changing toppings
- Italian cornsalad with bacon and mustard vinaigrette
- Burrata in tomato sugo with oven baked bread
- Stuffed chicken with blanched spinach
- Slow-roasted duck with port wine sauce
Content Style Muted
- Soup of the Day with changing toppings
- Italian cornsalad with bacon and mustard vinaigrette
- Burrata in tomato sugo with oven baked bread
- Stuffed chicken with blanched spinach
- Slow-roasted duck with port wine sauce
Content Style Heading 1
- Soup of the Day with changing toppings
- Italian cornsalad with bacon and mustard vinaigrette
- Burrata in tomato sugo with oven baked bread
- Stuffed chicken with blanched spinach
Content Style Heading 2
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
Content Style Heading 3
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
Content Style Heading 4
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
Content Style Heading 5
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
Content Style Heading 6
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
Content Fields
Here is a list of common content fields for List add-on.
| Setting | Description |
|---|---|
| Title | Enter your desired text to use as the addon title. Leave blank if no title is needed. |
| HTML Element | Choose the title html element from the list 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 |
| Text transform | The following options will transform text into uppercased, capitalized or lowercased characters. |
| Items | Add your list items with title and custom icon |
| Layout Style | Create layout boxes with different backgrounds that can be arranged seamlessly next to each other. |
| List Style | Select the list style for list items. |
| Larger padding | Use this option to increase the spacing between list items. |
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. |
| CSS Class | If you wish to style a particular content element differently, then use this field to add a class name and also refer to it in your css file. |
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. |