Team Members element displays team members with their image, description and social profile links as a grid or slider layout. Element popup contains following options;

Layout tab

1. Container box style  -  Adjust .thz-team-members-holder box style.
2. Holder box style  -  Adjust .thz-grid-item-in box style.
3. Layout mode  -  Select members layout mode.
4. Grid settings  -  Adjust grid settings. If the .thz-grid-item-in width is less than desired min width, the columns number drops down by one in order to honor the min width setting. This adjustment is active only if image container height is anything else but metro. On the other hand if the window width is below 980px and grid has more than 2 columns, only 2 columns are shown. Under 767px 1 column is shown.
5. Container metrics  -  Add custom class or ID to HTML container and adjust visibility on specific devices.

Members tab

Team members  -  popup contains following options;

Team members popup Details tab

1. Select Image  -  Select or upload an image.
2. Name  -  Name of the team member.
3. Job Title  -  Job title of the team member.
4. Description  -  Enter a few words that describe the team member.

Team members popup Socials tab

1. Social media links  -  Add member social media link. Drag and drop to reorder.

Members mode tab

1. Display mode  -  Select members display mode.
2. Overlay background  -  Set overlay background.
3. Overlay effect  -  Select overlay hover effect and duration.
4. Image effect  -  Select image hover effect and duration.
5. Overlay element effect  -  Select overlay element hover effect and duration.
6. Overlay distance  -  Distance the overlay from image box edges.

Image container tab

1. Image box style  -  Adjust .thz-team-member-media box style. Known issue: If layout mode is slider and you add box-shadow to container, the box shadow is cut off due to sliders overflow hidden. One way to fix this is to add margin in the size of box shadow to the image container.
2. Image grayscale  -  Add graysale effect to member image.
3. Image size  -  Select the member image size.
4. Image container height  -  Set image container height.

Info containers tab

1. Info box style  -  Adjust .thz-team-member-info box style.
2. Name box style  -  Adjust .thz-team-member-name box style.
3. Job box style  -  Adjust .thz-team-member-job box style.
4. Description box style  -  Adjust .thz-team-member-description box style.
5. Socials box style  -  Adjust .thz-team-member-socials box style.

Typography tab

1. Name font  -  Adjust member name font.
2. Job font  -  Adjust member job font.
3. Description font  -  Adjust member description font.
4. Social links alignment  -  Adjust social links metrics.

Effects tab

1. Animate members  -  Add animation to the member HTML container.
2. Container parallax  -  Activate/deactivate container parallax.
3. Media parallax  -  Activate/deactivate media parallax. This effect works for images only and it does NOT work if media height is auto! To parallax media for specific items only, add specific items in the order that you see them separated by comma like; 1,5,7. This would parallax media for 1st 5th and 7th item.