How to use Team Grid block by Zoloblocks

This documentation provides comprehensive insights into the Team Grid 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 Team Grid block name.
3. Then select the appear block ( 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 Team Grid and its child block.
3. After on the right side, Click on the Block. Then the Team Grid 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 will applied to all items.

General Section

Go to Basic > General

This section provides controls for changing the appearance of the team grid,

1. Styles: Click on the styles selector and the pre-made styles will appear. you can select any.
2. Add Detail Page Link: Enable the switcher to open the details page.
3. Show Short Bio: Enable the switcher to show the Short Bio.

4. Show Designation: Enable the switcher to show the designation.
5. Show Social Profiles: Enable the switcher to show Social Profiles.
6. Alignment: Set alignment for the items ( Left, Center, Right, Justify ).

Grid Section

Go to Basic > Grid

This section provides control for the grid,

1. Columns: Set the number for the columns.
2. Gap: Set the gap between the columns.

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 provides control for the item tab,

1. Border: Set border for the team grid items.
2. Border Radius: Set border-radius.
3. Padding: Make inner space by adding the padding.

4. Margin: Set the margin for the item.
5. Background: Set background for the item.
6. Box Shadow: Set the box shadow.

Content Section

Go to Style > Content

This section provides control for the content,

1. Border: Set a border for the content.
2. Border Radius: Make the border-radius.
3. Padding: Set padding for the content.

4. Margin: Set the margin for the content.
5. Background: Set background for the content.
6. Box Shadow: Set the box shadow.

Photo Section

Go to Style > Photo

Make the photo more visually stylish by following,

1. Size: Set the size for the photo.
2. Border: Set a border for the photo.
3. Border Radius: Make the border-radius.

4. Padding: Set padding for the photo.
5. Margin: Set the margin for the photo.
6. Background: Set background for the photo.
7. Box Shadow: Set the box shadow.

Name Section

Go to Style > Name

This section provides control for the name,

1. Typography: Set the typography for the name.
2. Color: Set color for the name.
3. Margin: Set outer space for the name.

Designation Section

Go to Style > Designation

Make the designation section more customizable by following it.

1. Typography: Set the typography for the designation.
2. Color: Set color for the designation.
3. Margin: Set outer space for the designation.

Short Bio Section

Go to Style > Short Bio

Make the Short Bio section more customizable by following it.

1. Typography: Set the typography for the short bio.
2. Color: Set color for the short bio.
3. Margin: Set outer space for the short bio.

Social Profiles Container Section

Go to Style > Social Profiles Container

Make the social profile container visually great by following the,

1. Margin: Set the margin for the container.
2. Padding: Set inner space by setting the padding.

Social Profiles Section

Go to Style > Social Profiles Section

Make changes to the visual appearance of the social profiles,

1. Icon Size: Set the Icon size for social profiles.
2. Icon Spacing: Set spacing for the social profiles.
3. Border: Set a border for the social profiles.

4. Border Radius: Set the radius for the social profiles.
5. Padding: Set padding for the social profiles.

Normal State for Social Profiles

The changes will appear in the normal,

6. Color: Set color for the Social Profiles.
7. Separator Color: Set the separator color.
8. Box Shadow: Make the shadow for the color.
9. Background: Set the background to be visually attractive.

Hover State for Social Profiles

The changes will appear on mouse hover,

10. Color: Set the color for the
11. Background: Set the background to be visually attractive.
12. Box Shadow: Make the shadow for the color.

Details Page Link Section

Go to Style > Details Page Link

Make changes to the visual appearance of the details page link,

1. Icon Size: Set the Icon size for the details page link.
2. Icon Spacing: Set spacing for the details page link.
3. Border: Set a border for the details page link.

4. Border Radius: Set the radius for the details page link.
5. Padding: Set padding for the details page link.

Normal State for Details Page Link

The changes will appear in the normal,

6. Color: Set the color for the details link page.
7. Background: Set the background for the details link page to be visually attractive.

Hover State for Details Page Link

The changes will appear on mouse hover over it,

6. Color: Set the color for the details link page.
7. Background: Set the background for the details link page to be visually attractive.

Team Grid (Child Blocks)

Here we will work with the Child blocks of the Team Grid. 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 Team Grid Child block under the Team Grid parent blocks.
3. On the right side, the selected Team Grid Child details will appear.
4. The Team Grid Child controls will appear here. ( Basic, Style, Extra ).

Basic Tab ( Child Block )

This tab provides control to customize the child item of the Team Grid child.

General Section

Go to Basic > General

Upload Photo For Team Child Item

1. Photo: Click on the photo section and Photo Upload button will appear Click on it and upload photo.

2. Photo Resolution: Set resolution for the photo ( e.g.: Thumbnail, Medium, Large, Full Size).

Set Content for Team Child Item

3. Name: Set name for the child item.
4. Designation: Set designnation.
5. Short Bio: Set short bio for the team child item.
6. Detail Page Link: Set the link for navigating details page.

Social Profiles Section

Go to Basic > Social Profiles

Add New Social Profiles Item

1. Click on the ” + ” Icon to add new social profile item.

2. After adding new content the Social Profile item appears.

Edit Social Profiles Item

3. Click on the ” Carrot ” icon and toggle will open for editing.

4. Title: Set the title for the social profiles item.
5. Icon: Select icon from icon library for the child item.
6. Link: Set the link for the social item.
7. Open in new tab: Enable the switcher to open a new tab.

Remove Social Profiles Item

8. Click on the ” Trash ” Icon to remove relevant item from Social Profiles Item.

Details Page Icon Section

Go to Basic > Details Page Icon

1. Select Icon: Click on the icon and select icon from the icon library.

Style Tab ( Child Block )

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

Item Section

Go to Style > Item

Set visual apperance change by following the item controls,

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

4. Margin: Set margin for the item.
5. Background: Set background for the item.
6. Box Shadow: Set the box shadow for the item.

Content Section

Go to Style > Content

Set visual apperance change by following the content controls,

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

4. Margin: Set margin for the content.
5. Background: Set background for the content.
6. Box Shadow: Set the box shadow for the content.

Photo Section

Go to Style > Photo

Make the photo more visually attractive by following the controls,

1. Size: Set the size for the photo.
2. Border: Set border for the photo.
3. Border Radius: Ser the border corner edges rounded by setting the radius.
4. Padding: Make inner space by setting the padding.

5. Margin: Set margin for the photo.
6. Background: Set background for the photo.
7. Box Shadow: Set the box shadow for the photo.

Name Section

Go to Style > Name

Make the name more stylish by following this,

1. Typography: Set the typography for the name.
2. Color: Set color for it.
3. Margin: Make outer space by setting margin.

Designation Section

Go to Style > Designation

Make the desingation more stylish by following this,

1. Typography: Set the typography for the designation.
2. Color: Set color for it.
3. Margin: Make outer space by setting margin.

Short Bio Section

Go to Style > Short Bio

Make the short bio more stylish by following this,

1. Typography: Set the typography for the short bio.
2. Color: Set color for it.
3. Margin: Make outer space by setting margin.

Social Profile Container Section

Go to Style > Social Profile Container

Make room for the social profile container,

1. Margin: Set margin for the profile containers.
2. Padding: Set padding for the profile containers.

Social Profiles Section

Go to Style > Social Profiles

Make the social profile more visually great by following the Social Profiles controls,

1. Icon Size: Set the size for the social profiles icon.
2. Icon Spacing: Set space between the icons.
3. Border: Set border for the icon.

4. Border Radius: Set the border radius for the icon.
5. Padding: Make inner spca by setting the padding.

Normal State for the Social Profiles

Make customization for the social profiles for normal state,

6. Color: Set the color for the social profiles.
7. Background: Set the background for the social profiles.
8. Box Shadow: Make the shadow for the social profiles.

Hover State for the Social Profiles

The chnges will appera on mouse hover over the social profiles,

9. Color: Set color for the icon.
10. Background: Set the background color for the social profiles.
11. Box Shadow: Set the shadow for the icons.

Details Page Link Section

Go to Style > Details Page Link

Make the social profile more visually great by following the Details Page Link controls,

1. Icon Size: Set the size for the details page link.
2. Icon Spacing: Set space between the details page link.
3. Border: Set border for the icon.

4. Border Radius: Set the border radius for the icon.
5. Padding: Make inner spca by setting the padding.

Normal State for the Details Page Link

The changes will appear on normal state,

6. Icon Color: Set icon color for the details page link.
7. Background: Set background for details page link.

Hover State for the Details Page Link

The chnges will appera on mouse hover over the ,

9. Color: Set color for the icon.
10. Background: Set the background color for the details link page.
11. Box Shadow: Set the shadow for the icons.

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!