Team Member

Team Member

The Team Member block is used to display to the office crew if you have a business website. You just need to upload an image of the employee and enter other details like name, destination, hobbies, etc.

You can create amazing team member layouts with lots of listing, customization, and styling options using this block for WordPress using Gutenberg.

Pro tip
Why not add your office crew on the about page of your business using this block. This not only looks good but people prefer to work with businesses that are more open.

Configuration for Team Member

In the Team Member block, you can create a team member profile with designation and many more using different layouts and styling options.

How to use the Team Member Block of The Plus Addons For Gutenberg

The Team Member block comes with different styles and a plethora of customization options using which you can create stylish looking players for your websites.

Table Of Contents

Setting up

Gutenberg gives multiple ways to add a Team Member into the content building area or we say playground. Check for the “+” icon in the top toolbar or click the “+” icon in the content area or start typing Team Member after “/” sign, eg.“/Team Member”, in the content area. Gutenberg also provides drag & drop after opening the list of Blocks panel.

After placing the Block you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.

1. Layout

Content Layout

Select Style

Select your preferred Style for the Team member listing. You will get four style options to choose from.
Style 1
Style 2
Style 3
Style 4

Select Layout

Select your preferred Layout for the Team member listing. You will get four layout options as listed below:
Grid
Masonry
Carousel

Content Alignment

Select your preferred alignment for the content in the team member listing.

Credit : Gutenberg, WordPress
Credit : Gutenberg, WordPress
Credit : Gutenberg, WordPress
Credit : Gutenberg, WordPress

Content Source

Team Members Repeater Menu

Name

Set the team member’s name for listing.

Upload Image

Set the team member’s profile image for listing.

Designation

Set the team member’s designation for listing.

Category (Separated by comma)

Set the team member’s category for listing. You add more than one category too.

Single Page URL

Set the single-page URL.

Website URL

Set the website URL.

Facebook Link

Set the team member’s Facebook profile link.

Email Link

Set the team member’s email link.

Instagram Link

Set the team member’s Instagram profile link.

Twitter Link

Set the team member’s Twitter profile link.

LinkedIn Link

Set the team member’s LinkedIn profile link.

Telephone

Set the team member’s telephone/mobile number.

Column Manager

Columns Gap/Space Between

Select how much Gap will be there in between the Columns.

Desktop Column

Set the column you want to display on desktop devices. You will get six-column styles to choose from:
Column 1
Column 2
Column 3
Column 4
Column 5
Column 6

Tablet Column

Set the column you want to display on Tablet devices. You will get six-column styles to choose from:
Column 1
Column 2
Column 3
Column 4
Column 5
Column 6

Mobile Column

Set the column you want to display on Mobile devices. You will get six-column styles to choose from:
Column 1
Column 2
Column 3
Column 4
Column 5
Column 6

Filters

Category Wise Filter

By enabling this option you can see the filter category and filter customization options here.

Select Filter by

You can select filter by an option between category or tag here.

All Filter

By enabling this option you can see all category options here.

All Category Text

Change the custom text of the All Filter default text.

Child Category Filter

By enabling this option you can see the child category here only if you have a child category.

Select Style

Select a style for category filter.

Select Hover Style

Select a style for category filter hover.

Filter Name

You can set the custom filter name for category style 4 here.

Alignment

Set the alignment of your filter to left, right or center.

Extra Options

Title Tag

Select a title tag of the team member’s name.

Display Designation

Enable this to display designation.

Display Social Icon

Enable this to display a social icon.

Disable Link

Slide right to disable the link in the team member listing.

Image Size

By enabling this option, you can see the display image size options.

Image Size

Set the Display Image Size options here.

2. Style

The Style tab is used for customizing the appearance of all the Team Member Block components. All these styling options include customizing the fonts, colors, background, margins, and padding which are common across all the Blocks. So, we have created a single detailed article explaining these Styling Options.

View The Style Tab Article

Title

Typography

Assign a size, weight, spacing, and much more to fonts.

Title Color

A color picker to assign a suitable color to the title.

Background

Apply suitable background like color/ gradient to an element.

Border

Draw a border around the element and give width and color to it.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Designation

Typography

Assign a size, weight, spacing, and much more to fonts.

Text Color

A color picker to assign a suitable color to the designation.

Social Icon

Icon Size

Set the size of the icon from here.

Icon Width

Set the width of the icon from here.

Icon Color

A color picker to assign a suitable color to the icon.

Background Color

A color picker to assign a suitable background color to the icon.

Shape Options Style 4

Mask Image

You can upload the image from this option.

Image Shadow

Give Box/Text/Drop shadow effect and color to an image.

Extra Layer Image

You can upload the image from this option.

Animation for Extra Layer Image

You can select the animation for the extra layer image.

Featured Image

Margin

Put-in some outer space to an element.

Padding

Put-in some inner space to an element.

Border Radius

Set the radius curve of the element’s corner.

Inner Background Color

A color picker to assign a suitable color to the inner text.

CSS Filters

You can set the CSS filters effects from this option.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Filter Category

Typography

Assign a size, weight, spacing, and much more to fonts.

Padding

Put-in some inner space to an element.

Margin

Put-in some outer space to an element.

Category Filter Color

A color picker to assign suitable color to the text.

Background

Apply suitable background like color/ gradient to an element.

Border Radius

Set the radius curve of the element’s corner.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Count Background

Apply suitable background like color/ gradient to an element.

Category Count Color

A color picker to assign suitable color to the count value.

Count Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Box Loop Background

Padding

Put-in some inner space to an element.

Box Border

Enable and draw a border around the element and give width and color to it.

Border Radius

Set the radius curve of the element’s corner.

Background

Apply suitable background like color/ gradient to an element.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Carousel Options

Slider Mode

Select slide direction of slider from here.

Height Ratio

You can set Hight ratio for vertical layout here.

Slide Speed

Slider speed in milliseconds.

Columns

Select how many columns you want to have per slide.

Default Slide Active

Select the first slide to display on slider load.

Next Previous

Select if you want to rotate all rows at once or not.

Columns Gap/Space

Put in some space between columns.

Draggable

If slider is draggable, then you can drag any slide to side and see the next one without using arrows for navigation.

Infinite Mode

If slider is in infinite mode, slider will repeat it self after last slide.

Pause on Hover

Slider will stop sliding on mouse hover.

Auto play

If auto play is enabled, slider will be in play state when page load is completed.

Auto play Speed

Slide shifting time for auto play.

Show Dots

Select if you want dots / slide count or not.

Dots Style ⭐

Select dots / slider counter style from here.

Border Color

A color picker to assign suitable color to the border.

Active Border Color

A color picker to assign suitable color to the currently active slide’s border.

Background Color

A color picker to assign suitable color to the background.

Active Background Color

A color picker to assign suitable color to the currently active slide’s background.

Dots Top Margin

Apply space from top in root container from here.

On Hover Dots ⭐

Show dots only on hover.

Show Arrows

Show arrows / slider navigator or not.

Arrows Style ⭐

Select arrows / slider navigator’s Style from here.

Arrows Position⭐

Select arrows / slider navigator’s Position from here.

Background Color

A color picker to assign suitable color to the background of arrows.

Icon Color

A color picker to assign suitable color to the icons of arrows.

Hover Background Color

A color picker to assign suitable color to the background of arrows on hover.

Hover Icon Color

A color picker to assign suitable color to the icons of arrows on hover.

Outer Arrows

Place arrows outside it’s root container or not.

On Hover Arrows ⭐

Show arrows only on hover.

Center Mode

Center mode enables active slide to be shown as visually center or in braced up mode.

Center Padding ⭐

Put-in some inner space to centered slide.

Center Slide Effect ⭐

Choose how you want to make look center slide different from others.

Scale ⭐

Choosing scale would make centre slide look bigger than others. Choose scale for centre & normal slides from below options.

Shadow ⭐

Choosing shadow would create shadow effect on center slide different than others. Apply custom shadow from below option provided.

Normal Slide Opacity ⭐

Apply opacity / transparency for normal slide from here.

Trim Space ⭐

Apply opacity / transparency for normal slide from here.

Extra Options

Messy Columns

Enable and set the Messy Columns options here.

3. Advanced

Advanced Tab Options are common across all the Blocks. So, we have written a detailed tutorial explaining how to use these options.

View The Advanced Tab Tutorial

Note : ⭐ Symbol as a suffix displays a Pro feature field.
Was this article helpful?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.