This documentation provides comprehensive insights into the List Block developed by Zoloblocks.

Adding a block to the editor

1. Click the Toggle Block Inserter icon and a sidebar will appear on the left side, All the blocks will be visible here.
2. Search by the List block name.
3. Then select the appear blocks ( with zoloblocks logo T.R corner).
4. After Drag and Drop it on the page.

After Inserting the blocks, Follow this.

1. Click on the Document Overviewer button and the Blocks list view will appear.
2. Here appears the List block.
3. After on the right side, Click on the Block. Then the List details appear.
4. Here show all the control tabs( Basic, Style, Extra ) of a block.

Basic Tab

The Basic tab controller displayed here offers the flexibility to adjust the layout of blocks according to your preferences.

General Section

Go to Basic > General

This section provides control for List customization,

1. Presets: Click on the presets selector and the pre-made styles will appear. you can select any.
2. Show Icon: Enable the switcher to show the Icon.
3. Show Title: Enable the switcher to show the Title.
4. Show Description: Enable the switcher to show the Description.

Layout Section

Go to Basic > Layout

Layout Type Grid

Provides control for the layout,

1. Layout Type: Set the layout grid for the list item.
2. Column Number: Set the number of the column.
3. Gap: Set the gap between the List.

Layout Type Flex

Provides control for the layout,

1. Layout Type: Set the layout Flex for the list item.
2. Item Vertical Alignment: Make the alignment for the vertical item.
3. Gap: Set the gap between the List.

Add List Section

Go to Basic > Add List

Add New List Item

1. Click on the ” + ” icon to add a new list item.

Edit List Item

2. Click on the carrot icon and it will allow the item to be edited.
3. Title: Set the title for the list.
4. Description: Set the description for the list item

5. Select Icon: Select the icon for the list icon.
6. Link: Set a link for the icon.
7. Open in new tab: Enable the switcher to open the link for the new tab.

Remove List Item

8. Click on the ” Trash ” icon to remove the list item.

Link Hover Icon

Go to Basic > Link Hover

This section provides control for the link hover icon,

1. Select Hover Icon: Set the link hover icon for the icon library.

Style Tab

Provide the controller to make the visual appearance or presentation of the tabs. This includes aspects visually appealing and cohesive with the overall design of the interface.

Item

Go to Style > Item

This section provides controls to change the appearance of the items. You can customize it for the Normal and Hover tabs

Normal Tab

Make customization of the item in normal,

1. Border: Set the border for the list item.
2. Radius: Make border corner edges rounded by setting the radius.
3. Padding: Set the padding for inner space.

4. Background: Set the background for the list item.
5. Box Shadow: Set the box shadow for the list item.

Hover Tab

This list item will be visible on mouse hover,

6. Border Color: Set the border color for the item.
7. Box Shadow: Set box shadow for the list item.
8. Background: Set the background for the items.

Title Section

Go to Style > Title

This section provides controls to change the appearance of the items. You can customize it for the Normal and Hover tabs

Normal Tab

1. Color: Set color for the Title.
2. Typography: Set typography for the title.

Hover Tab

3. Color: Set the color for the Title, The changes appear on mouse hover.

Description Section

Go to Style > Description

This section provides controls for the description,

1. Typography: Set the typography for the description.
2. Margin: Set margin for the description.

Normal Tab

3. Color: Set the color for the description.

Hover Tab

4. Color: Set the color of the description, The changes will appear in hover mode.

Icon Section

Go to Style > Icon

1. Vertical Alignment: Set the alignment for the vertical position.
2. Size: Set the size for the icon.
3. Border: Set the border for the icon.
4. Radius: Set the radius for the icon.

5. Padding: Set the padding for the icon.
6. Margin: Set the margin for the icon.

Normal State for Icon

7. Color: Set the color for the icon.
8. Background: Set the background for the Icon.

Hover State for Icon

9. Color: Set the color for the Icon, that works on mouse hover.
10. Background: Set the background for the Icon.

Link Hove Icon

Go to Style > Link Hover Icon

This section provides control for the link hover icon,

1. Vertical Alignment: Set the alignment position for the link hover icon( e.g.: Top, Center, Bottom ).
2. Size: Set the size for the Icon.
3. Margin: Set the margin for the icon.
4. Color: Set the color for the Link hover icon.

Extra Tab Control

The extra tabs provide the controls of any blocks. You can make different visual layouts by following these Controls.
Click to learn more>>.

Video Assist

Video Tutorial Coming Soon! Check the demo page.

Thanks for being with us!