How to Use Team Grid – Video Demo

1. Requirements

Php version: The required version is 5.6 or higher.

WordPress version: The required version is 4.3 or higher.

2. Installation

  1. Login to your website and go to Plugins -> Add New
  2. Click Upload link
  3. Browse and select the .zip file you downloaded from Codecanyon.com
  4. Click “Install Now” button and wait while plugin is uploaded to your server.
  5. Click “Activate Plugin” button.

2.1. How to Activate your License

To activate your license you only need your Envato username and your purchase code.

The Envato Licenses allow to use the plugin in a single domain, but we have enabled 2 domains (One for production site and one for your testing site).

Go to TeamGrid Settings > Plugin Activation.

  1. Envato Username: This is the username you choose when you created your Envato (Codecanyon) account.
  2. Purchase Code: Visit your downloads page and next to TeamGrid, click on “Download > License certificate & purchase code (text)”. Then open the purchase receipt, and inside, copy the Item Purchase Code.

2.2. How to Deactivate your License

  1. To deactivate your license you must enter the data required in the previous step.
  2. Then in the option “Activation type” you must choose “Deactivation” and enter the URL of the website where you want to remove the license.


Tip: Deactivation can be done from any website. That is, you do not need to be on the website that you are going to deactivate. You can do it from your new website.

3. Creating a Member

Go to the left menu Team Grid > New Member

Then add the member’s data.

Member Basic Info.

  1. Member Name.
  2. Member image.
  3. Member Role.
  4. Member Description: Short description. Use 15 words or less.
  5. Member Content: Full member content.
  6. Filters: The filters will be used to generate the Team filter.

Member Social Icons.

You can add an unlimited number of social icons.

Member Fields.

Add additional fields such as email, phone, address, etc.

Member Skills.

Use this option to add skills of your members.

To add a new Skill name, click on “Add New” and then add it in from the box highlighted with a yellow background.

Member Shortcodes.

Use the shortcodes to add the member information anywhere on the page, post or in some Elementor block or a page builder that you are using.

[ teamgrid_member id=”985″ ]

Member image: [ teamgrid_member_image id=”985″ ]

Member content: [ teamgrid_member_content id=”985″ ]

Member fields: [ teamgrid_member_fields id=”985″ ]

Member skills: [ teamgrid_member_skills id=”985″ ]

Member social icons: [ teamgrid_member_social id=”985″ ]

*Change 985 to real Member ID

Attributes:

  • id: Member ID
  • class: Html class for the container

4. Creating the Filters

5. Creating the Field names

6. Creating the Skills

7. Creating a Team

From here you can create the Team by inserting the previously created members and use the more than 15 available Layouts and then customize the styles to achieve the desired result.

Basic Team Info.

  1. Team Title.
  2. Layout: You can choose from the more than 15 available Layouts. All are fully customizable.
  3. Viewer: The viewer allows you to view the complete information of the member. You can choose: Popup, Inline, Slide In Left, Slide In Right and Member Permalink.
  4. Members: Select the members you want to show on this team.

Live Preview.

The live preview in the admin area is a gem, as you will be able to change the colors, fonts, borders and see the changes instantly. Creating a team has never been easier!

Fully Customizable Filters.

We have made it very easy for you. You can choose from over 20 predefined and fully customizable filter styles.

Design Templates.

There are 7 design templates and 17 layouts, making a total of 7×17 = 119 predefined and fully customizable styles.

Fully customizable.

Customize everything you want, colors, borders, fonts, backgrounds, etc. etc.

Team Shortcode.

Use the shortcode to add the Team anywhere on the page, post or in some Elementor block or a page builder that you are using.

[ teamgrid_team id=”1050″ ]

*Change 1050 to real Team ID

Attributes:

  • id: Team ID
  • class (optional): Html class for the container
  • show_title (optional): Valid values: on, off
  • columns (optional): Valid values: 2, 3, 4, 5, 6
  • viewer (optional): Member viewer. Valid values: none, popup, inline, slide-in-left, slide-in-right, member-link
  • responsive_by (optional): The reference to resize the items. Valid values: window, parent