Lists

This shortcode allows adding a section with lists to the page.

How To Add Lists Widget To Your Page

  1. Click the   icon to create a Section.
  2. Set your Column structure.
  3. Right-click to Edit, Duplicate, Copy, Delete, etc.
  4. Insert Widget using drag and drop inside your Columns.

5. Choose Widget style (Custo Simple, Bullet List, or List 3) in the  Layout section.

Custo Simple Layout:

Bullet List Layout:

List 3 Layout:

6. Customize widget and add content in  Content Section.  Here you can also customize content Typography.

Content Settings:

1. Custo Simple Layout

Add item - Click the button to add a new item to the list.

Table Lists:

  • Item Title - Add the text for the item title here.
  • Item Subtitle - Add the text for the item subtitle here.
  • Item Label - Add the text for the item label here.
  • FirstRowText - Here you can enter the text of the first row.
  • Add checkmark? - Turn on the switcher if you want to add the checkmark.
  • Add close? - Turn on the switcher if you want to add the X mark.
  • SecondRowText - Here you can enter the text of the second row.
  • Add checkmark? - Turn on the switcher if you want to add the checkmark.
  • Add close? - Turn on the switcher if you want to add the X mark.
  • ThirdRowText - Here you can enter the text of the third row.
  • Add checkmark? - Turn on the switcher if you want to add the checkmark.
  • Add close? - Turn on the switcher if you want to add the X mark.
  • ForthRowText - Here you can enter the text of the fourth row.
  • Add checkmark? - Turn on the switcher if you want to add the checkmark.
  • Add close? - Turn on the switcher if you want to add the X mark.
  • FifthRowText - Here you can enter the text of the fifth row.
  • Add checkmark? - Turn on the switcher if you want to add the checkmark.
  • Add close? - Turn on the switcher if you want to add the X mark.
  • Add button? - Turn on the switcher if you want to add the button for the current item.

Use custom font for column title - Turn on the switcher if you want to customize the font of the column title.

Use custom font for column title label - Turn on the switcher if you want to customize the font of the column title label.

Use custom font for column subtitle - Turn on the switcher if you want to customize the font of the column subtitle.

Use custom font for row title - Turn on the switcher if you want to customize the font of the row title.

How to customize typography you can check in Typography Settings Category:

2. Bullet List Layout

Add item - Click the button to add a new item to the list.

Lists:

  • List - Here you can enter the text of the list item.

Bullets size - Here you can enter the size of the bullets. For example: 15px.

Color Bullet - Please, select the color for a bullet from the color palette.

Use custom font for list? - Turn on the switcher if you want to customize the font of the list.

Button Settings:

Add button? - This option allows you to add the button to this shortcode.

  • Name - Please, enter the button text.
  • Link - Please, add a URL to the button.
  • Style - Here you can select the button style (dark or light).
  • Size - Here you can select button size (small or large).
  • Type - Here you can select the button type (reverse or transparent).
  • Box shadow - This option allows you to add the box shadow to the button. It only works if the box-shadow is specified in the skin generator.
  • Enable Full width? - Turn on the switcher if you want to enable the full width to the current button.

How to customize typography you can check in Typography Settings Category:

3. List 3 Layout

Add item - Please, add the item to create and edit the info.

Lists:

  • List - Add the text for the item here.

Use custom font for list? - Turn on the switcher if you want to customize the font of the list.

Background color for numbers - Here you can select the background color from the palette box.

Color for numbers - Here you can select a number color from the palette box.

Use custom font for numbers? - Turn on the switcher if you want to customize the font of the numbers.

How to customize typography you can check in Typography Settings Category:

Advanced Settings:

  1. Margin: Set the section Margin.
  2. Padding: Set the section Padding.
  3. Z-index: Set the Z-Index. 
  4. CSS ID: Set a CSS ID for your section.
  5. CSS Classes: Set CSS Classes for your section.

Motion Effects

  1. Sticky (Pro only): Set your section as Sticky, and choose between Top or Bottom. 
  2. Scrolling Effects (Pro only): Set Scrolling Effects to On to choose from a variety of animations and interactions that can occur when the user scrolls through the page. 
  3. Entrance Animation: Click the dropdown to choose an animation.

Background

The following options can be set independently for both the normal and hover states.

  1. Background Type: Choose between Classic or Gradient

Border

The following options can be set independently for both the normal and hover states.

  1. Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved
  2. Border Radius: Set the border-radius to control corner roundness
  3. Box Shadow: Adjust box-shadow options

Positioning

  1. Width: Select the width of the element, choosing from Full Width (100%), Inline (auto), or Custom. 
  2. Custom Width: Only available if Custom is chosen. Use the slider to adjust the width of the element within the column.
  3. Vertical Align: Only available if Full Width (100%) or Inline (auto) is chosen. Select to display the element at the Start, Center, or End.
  4. Position: Select the position of the element, choosing either Default, Absolute, Fixed, or Custom. Absolute positions an element absolutely to its first positioned parent. Fixed positions an element relative to the user’s viewport. 

If either Absolute or Fixed is selected, the following options also become available.

  1. Horizontal Orientation: Sets the horizontal reference point for the absolute positioning, with choices of either Start or End.
  2. Offset: Changes the horizontal reference point by the amount of the offset
  3. Vertical Orientation: Sets the vertical reference point for the absolute positioning, with choices of either Start or End.
  4. Offset: Changes the vertical reference point by the amount of the offset

Responsive

  1. Reverse Columns: Slide to reverse the order of your columns (Great for Mobile).
  2. Visibility: Show or Hide your section on Desktop, Tablet, or Mobile