Team Block allows displaying team members with a descriptive block. You can display a team with their name, pictures, designation, social links, etc.
How To Add The Team Block #
- 1.Open a page or a post and click on the plus icon to add a new block and look for the Team or you can search for it if it doesn’t pop up quickly for you.
- 2.Be default, you’ll get the below design-
.png?alt=media&token=9f6796ba-ed2a-4c8b-b988-aa8eb5e08098)
How To Configure The Team Block #
To configure the Team block, switch to the ‘Content’ tab.
General #
- Number of Team Member Boxes: Increase or decrease the number of Team members to display.
- Stack on: You can stack the boxes on tablet and mobile
- Gutter: You can set the gutter between the boxes to small, medium, large, etc.
- Box Shadow: You can give box-shadow to the block with a number of options available for customization such as color, blur, spread, position, etc.
- Border Width: Set a width for the border from here.
- Border Radius: You can give border-radius to the box from here.
- Padding: You can give padding to the content from here.
- Column Background: You can choose a background for a column in the block as color, gradient, or image from here.
.png?alt=media&token=fff301ce-fd80-4881-beac-9815cb25ca31)
Content #
Here you can enable/disable the following elements of the block
- Image
- Name
- Designation
- Description
- Social icons
.png?alt=media&token=fa0390af-752c-49e0-86a2-acdaca2c16c7)
Image #
- Image Shape: Select the style of image as square, circle, or normal.
- Image Size: Select a size for the image as full, medium, large, or thumbnail.
- Image Width: Select the width for the image.
.png?alt=media&token=29b4bcb2-afc4-413f-9626-c88328b3998a)
Social Links URL #
By hovering on social icons such as Twitter, Facebook you can give URLs to them.
- Hide Social Icons: You can enable/disable the display of social icons.
- Social Icon color: You can choose the color of social icons.Icon size – You can choose the size of social icons.
- Icon Size: You can also set the size of the icon.
.png?alt=media&token=9b8da2b6-1456-4543-9a8e-c75acdd25c55)
How To Style The Team Block #
Switch to the ‘Style’ tab to customize every element of the Team block.
Typography #
Under the Typography tab, options for font size, font–weight, color, and line-height are available for Title, Designation, Description, and Social Icon.
.png?alt=media&token=80b4bc1f-2aca-44a9-99fa-799d3f218f88)
Spacing #
Spacing tab offer options to customize the spacing for Title Bottom Spacing, Designation Bottom Spacing, Description Bottom Spacing, Inter Social Icon Spacing, Image Margin Top, and Image Margin Bottom.
.png?alt=media&token=cf289170-7acf-441d-a8a1-c3e8931dfe72)
Color Settings #
Under the Colors tab, color options are available for Title, Designation, Description, and Social Icon.