Block List
Block List is a list-like widget with a parent that contains child blocks with the same structure.
The Block List differs from the List in the additional style settings and the ability to switch to another widget: Slider or Ticker.
You can use this widget when you need to create not just a static list but add interactivity to it, i.e. scroll through the items. You can use it, for example, to create project portfolio or testimonials from clients.
You can also add any other elements and widgets to the Block List element, except for the Form.
The Block List can be controlled using the options on the Settings tab in the right panel.
As with the List, you can add, delete, and reorder elements in the Block List.
You can also use the Apply Independent Structure setting with the Block List.
With this setting you can set the structure of the list elements to be independent of each other. That is, each list item can have different elements and widgets with different styles. The list items themselves will have the same style.
This setting can be enabled on the Settings tab in the right panel. Once this setting is enabled, it cannot be cancelled. List items with the independent structure enabled in the settings have the hide function in addition to add, delete, and move functions.
The following options are also available on the Settings tab:
Extra Styles are additional styles that can be applied to the Block List.
- Number of list items per line - By default, there are three items. You can also use auto option or set an arbitrary number from 1 to 5.
- Horizontal alignment – With this option you can adjust the left, middle, or right alignment of list items in a line.
- Same height of list items – This option is used if the height of list items is auto.
Extra widgets are additional widgets, which you can switch the Block List to.
You can switch from the Block List widget to Slider or Ticker.
Slider is a widget that allows you to show slides (Block List elements) in turn. The user can scroll through the slides using the controls, or this can be done automatically.
Slider settings:
- Layout: horizontal or vertical.
- Animation: Slide or Fade (only available if the number of list items per line is 1).
- Duration of the animation effect in milliseconds, 500ms by default. You can select a value from 500 to 1000ms.
- Number of scroll items is 1 by default. You can choose a value from 1 to 5.
- Current slide in the center will show the slide with styles for the "Current" state centered if there is an odd number of displayed list items per line (with an even number, the slide will be off-center). At the same time, the number of scroll items per line will be 1, regardless of what is specified in the setting.
- Infinite repeat items. The Slider scrolling will be infinite. This function is enabled by default.
- Auto-play items. The slider scrolls automatically at intervals in milliseconds specified in the Delay option.
- Delay. Interval for automatic scrolling of slides in milliseconds. The default interval is 5000ms. You can select a value from 5000 to 10000ms.
- Disable swipe gesture. This option is always enabled by default.
- Hide control arrows at each end. When this setting is enabled, the Infinite repeat items function is disabled and when the slider reaches the last slide, the Next arrow is hidden. The same is with the Previous on the first slide.
- Pagination allows you to select the type of pagination from the drop-down list: points, numbers, numbers from 01, page by page (e.g. 1/3), and disable pagination.
- Group control arrows and pagination.
The Block List contains elements to control slide switching: Controls and Pagination. You can style them as you want in the Styles tab. For example, you can make pagination elements (Bullets) round, change their color, space between them, and their position.
Ticker is a widget in which the Block List elements automatically move left or right at a certain speed.
Ticker settings:
- Direction: left or right.
- Scrolling speed. 10 pixels per second by default. You can select a speed value from 10 to 50px in the drop-down list.
- Pause on hover. When you hover the mouse cursor on the ticker, it stops.
