settings
The Page Builder Special Lists component is designed to help making the display of lists more engaging.
It allows the display of the list in a grid pattern to make better use of the space in the page.
Configurations
The component allows for the following configurations:
- Title
- If the title should be displayed before the list grid
- Number of columns
- Gap between columns
- Component width as a percentage of the total width available for the component
- Color
- Placement (inline, top of page, bottom of page, inside a simple content, etc.)
- Introduction text displayed before the list items
- Container Settings
Container Settings
Container settings allows the configuration of the container housing the component. It allows the following settings:
- Padding (in px): top, right, bottom, left. Defaults to 0px for all.
- Margins (in px): top, right, bottom, left. Defaults to 32px in the bottom.
- Border (in px): top, right, bottom, left. Defaults to 0px for all.
- Border Radius (in px): defaults to 0px.
- Border Color
- Background
- Color
- Text Color
- Extend text color to items or not
- Opacity (%)
- Blur (in px)
- Media (image / video)
- Parallax Effect (for Image only)
Each item in the list has the following configuration:
- Title
- Title & Icon color
- Display title or not
- Description
- Type of title (link to Url, link to File or no link)
- Icon to display for the item
- Position of the icon (top, bottom, left or right)
- Icon size (small, medium = normal, large, extra large
Example 3 columns
This example was configured with small icons on the left and a different color for each item. The component width was set to 100%.
This example also displays the use of the container settings to set the background color to red, text to white and padding all around.
Example 3 columns and 75% width
This is an example of introduction text before the list of items.
This example uses large icons placed on top. This is configurable for each item in the list.
Some items in orange, others in green.