How to use the List block by Zoloblocks

  • BdThemes
  • How to use the List block by Zoloblocks

Table Of Contents

How to use the List block by Zoloblocks

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

Adding a block to the editor

search and insert 5 - BdThemes
  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.
list view and controls 3 - BdThemes

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( BasicStyleExtra ) 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

general 7 - BdThemes

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

layout grid - BdThemes

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

layout flex - BdThemes

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

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

Edit List Item

add list edit n - BdThemes
  1. Click on the carrot icon and it will allow the item to be edited.
  2. Title: Set the title for the list.
  3. Description: Set the description for the list item
add list edit 2 - BdThemes
  1. Select Icon: Select the icon for the list icon.
  2. Link: Set a link for the icon.
  3. Open in new tab: Enable the switcher to open the link for the new tab.

Remove List Item

add list edit 3 remove - BdThemes
  1. Click on the ” Trash ” icon to remove the list item.

Link Hover Icon

Go to Basic > Link Hover

Link hover icon - BdThemes

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

item normal - BdThemes

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.
item normal 2 - BdThemes
  1. Background: Set the background for the list item.
  2. Box Shadow: Set the box shadow for the list item.

Hover Tab

item hover - BdThemes

This list item will be visible on mouse hover,

  1. Border Color: Set the border color for the item.
  2. Box Shadow: Set box shadow for the list item.
  3. 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

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

Hover Tab

title hover 1 - BdThemes
  1. Color: Set the color for the Title, The changes appear on mouse hover.

Description Section

Go to Style > Description

description 2 - BdThemes

This section provides controls for the description,

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

Normal Tab

desctiption normal - BdThemes
  1. Color: Set the color for the description.

Hover Tab

desctiption hover - BdThemes
  1. Color: Set the color of the description, The changes will appear in hover mode.

Icon Section

Go to Style > Icon

icon - BdThemes
  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.
icon 2 - BdThemes
  1. Padding: Set the padding for the icon.
  2. Margin: Set the margin for the icon.

Normal State for Icon

icon normal - BdThemes
  1. Color: Set the color for the icon.
  2. Background: Set the background for the Icon.

Hover State for Icon

icon 3 - BdThemes
  1. Color: Set the color for the Icon, that works on mouse hover.
  2. Background: Set the background for the Icon.

Link Hove Icon

Go to Style > Link Hover Icon

link hover icon 1 - BdThemes

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!

Take advantage of fine-tuned plugins

Get Customizable Elementor Widgets to Power Up Your Website

Take advantage of fine-tuned plugins to speed up web projects without sacrificing quality. We offer a 14-days money-back guarantee.
BdThemes is the sole owner of #1 market-leading addons for Elementor such as Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit, Pixel Gallery, and more useful plugins. This website is powered by Element Pack Pro and Rooten Theme.
Need any further assistance? Call Us:+880 1700 55 95 95
Our supported payment system and security badge