How to use Fancy List block by Zoloblocks

This documentation provides comprehensive insights into the Fancy List Blocks 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 Fancy 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 Fancy list and its child block.
3. After on the right side, Click on the Block. Then the fancy list details appear.
4. Here show all the control tabs( Basic, Style, Extra ) of a block.

Basic Tab (Parents Blocks)

The Basic tab controller displayed here offers the flexibility to adjust the layout of blocks according to your preferences. Customize for the Parent’s blocks. Any changes applied will all items

General Section

Go to Basic > General

In this section, you can set the general controls of accordion,

1. Show Title: Enable this switcher will show the Title.
2. Show Description: To show the description please enable the switcher.
3. Show Media:  Enabling this switcher will allow you to show the Media.
4. Enable Icon:  Enabling this switcher to show the Icon.

Gird Section

Go to Basic > Grid

This section provides control to customize the grid for the fancy list items.

1. Column: Set the column number for the items.
2. Columns Gap: Set the gap between the columns.
3. Rows Gap: Set the gap between the rows.

Media Section

Go to Basic > Media

In this section, you can set the media type,

1. Media Type: Set the media type Text to show the text.

1. Media Type: Select the Image as a media type.

Style Tab (Parents Blocks)

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 Section

Go to Style > Item

This section has several controls to customize the Item of the Fancy list.

1. Border: Set the border for the item.
2. Border Radius: Set the border radius of the item.
3. Padding: Set padding for the inner space of the item.
4. Margin: Set margin for outer space.

5. Background: Set the background for the item.
6. Box Shadow: Set the box shadow of the item.

Title Section

Go to Style > Title

Here you can customize the appearance of the Title,

1. Typography: Set the typography of the Title.
2. Title Tag: Set any HTML Tag for Title ( H1, H2, H3, H4, H5, H6, p, span ). The title tag is essential for both user experience and search engine optimization (SEO).
3. Margin:

Normal State of Title

4. Color: Set the Color for the Title, in a normal state.

Hover State of Title

5. Hover Color: Set the hover color for this title, It will work on mouse hover.

Description Section

Go to Style > Description

This section provides controls to change the appearance of the description,

1. Typography: Set the typography for the description.
2. Magin: Set margin for the outer spacing of the description.

Normal State of Description

3. Color: Set the color for this description, in the normal state.

Hover State of Description

4. Hover Color: Set the Hover color for this description, It works on the hover state.

Icon Section

Go to Style > Icon

This section provides control for the Icon,

1. Size: Set the size of the icon.
2. Border: Set the border of this icon.
3. Border Radius: Set the border radius for this icon.
4. Padding: Set padding for inner spacing.

Normal State of Icon

5. Color: Set the color of the icon.
6. Background: Set the background for the icon.

Hover State of Icon

7. Color: Set the color for the icon in the hover state.
8. Background: Set the Background for the icon in the hover state.

Image Section

Go to Style > Image

This section provides controls of the Image,

1. Width: Set the width of the image.
2. Height: Set the Height of the image.
3. Gap: Set the gap between the image and the icon.

4. Border: Set the border of the image.
5. Border Radius: Set the border corner edges rounded by following the radius.
6. Padding: Set the padding for the image.

Fancy List (Child Blocks)

Here we will work with the Child blocks of Fancy List. The changes will applied to the relevant item only. Let’s follow this.

1. Click on the Document Overviewer button and the Blocks list view will appear.
2. Select the Fancy List Child block under the Fancy List parent blocks.
3. On the right side, the selected Fancy List Child details will appear.
4. The Fancy List Child controls will appear here. ( Basic, Style, Extra ).

Basic Tab ( Child Block )

This tab provides control to customize the child item of the Fancy list child.

Content Section

Go to Basic > Content

In this section, you can set the content for the fancy list child item.

1. Title: Set the title for the single item.
2. Description: Set the description for the child item.

3. Add item link: Enable the switcher will allow you to set a link for the item.
4. Enter Link: Set the link for the relevant item.
5. Open in new tab: This switcher works on navigating the link. Disable this to open default.

Icon Section

Go to Basic > Icon

Here set the icon for the single item.

1. Select Icon: Click on it and an icon library will open then select any icon you prefer.

Media Section

Go to Basic > Media

This section provides controls for selecting the media,

1. Click on the Replate and it will open a media library, select any media image that you prefer.

Style Tab ( Child Block )

This tab provides the controls of the Fancy List Child Items. The changes will apply only to relevant items. Let’s Explore all the controls.

Item Section

Go to Style > Item

In this section, you can customize the item for interactive style,

1. Border: Set the border for the single item.
2. Border Radius: Make the border radius by following it.
3. Box Shadow: Set the shadow of the box.

4. Padding: Set the padding of the item.
5. Margin: Set the margin for the item.
6. Background: Set the background color of the item.

Title Section

Go to Style > Title

This section provide the customization of the Title,

1. Typography: Set the typography for the Title.
2. Select Tag: Set any HTML Tag for Title ( H1, H2, H3, H4, H5, H6, p, span ). The title tag is essential for both user experience and search engine optimization (SEO).
3. Margin: Set the margin for the title.

Normal State of Title

4. Color: Set the color for the Title in a normal state.

Hover State of Title

5. Hover Color: Set the hover color for the Title.

Description Section

Go to Style > Description

This section provides the control to customize the Descriptions,

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

Normal State of Description

3. Color: Set the color of the description. It appears in a normal state.

Hover State of Description

4. Hover Color: Set the hover color for the descriptions. it will work after hovering over it.

Icon Section

Go to Style > Icon

This section provides controls to customize the Icon,

1. Size: Set the size of the icon.
2. Border: Set the border for the icon.
3. Border Radius: Set border radius for this Icon.

Normal State of Icon

5. Color: Set the color of the Icon.
6. Background:

Hover State of Icon

7. Color: Set the color of the Icon.
8. Background: Set the background color for the icon. It will work on hover.

Image Section

Go to Style > Image

This section provides controls to customize the image,

1. Width: Set the width of the image.
2. Height: Set the height of the image.
3. Gap: Set between the image and content.

4. Border: Set the border of the Image.
5. Border Radius: Set border radius for making corner edges rounded.
6. Padding: Set the padding of the Image.

Extra Tab Controls

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!