Teams

Team shortcode is a perfect feature to present your team inside your page content. Use Team shortcode:

Your team will be immediately added to your page. Now you can start editing its settings just in the

same way, as by tabs (see above).

Skin Source: Here you can specify, which design to use for the team members displayed. You can select between using the built-in skins/designs for teams (team members displayed in grid) or apply the loop item templates made with TheGem Templates Builder. Learn more about Loop Item Builder

Style: choose the style for displaying your team set

Columns: select the number of columns to be displayed in the team grid

See demo

Useful CSS

Teams title, position, phone, mail, icons:

.team-person .team-person-name.title-h4 {
    font-size: 22px;
    font-weight: 300;
    color: #ccc;
    line-height: 1;
}
.team-person .team-person-position  {
    font-size: 18px;
    font-weight: 300;
    color: #ccc;
    line-height: 1;
}
.team-person .team-person-phone {
        font-size: 18px;
    font-weight: 300;
    color: #ccc;
    line-height: 1;
}
.team-person .team-person-email a {
    font-size: 18px;
    font-weight: 300;
    color: #ccc !important;
    line-height: 1;
}

.team-person .team-person-socials .socials-item-icon:before {
    color: #222;
}

You can modify this css and insert it in Theme Options -> Custom CSS to apply on all teams:

To apply this custom CSS on a single content element only, use the "Extra class name" field in this element in WPBakery:

The example of the css selector for the "custom-team" class name in this case:

.custom-team .team-person .team-person-name.title-h4 {
    font-size: 22px;
    font-weight: 300;
    color: #ccc;
    line-height: 1;
}