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.

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.

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.

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.

Custom Icon

  • 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.

Right alignment

  • 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 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.
  • 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.
  • 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.

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

List with parallax background image and parallax animation

  • 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.

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.