Plugin Installation

Before installing the plugin, you should have wordpress installed already.

There are 2 ways to install the plugin:

1- First way:

WordPress Upload: Just navigate to Plugins -> Add New Plugin -> Upload. Click the "browse" button and locate the zipped plugin folder. Within seconds, you will have the plugin installed. Just click "Activate" and congratulations, you have succefully installed the plugin

Creative team showcase plugin upload
2- Second way:

FTP Upload: Unzip the downloaded zippped plugin file and upload the plugin directory /creative-team-showcase/ into your WordPress plugins directory /wp-content/plugins/ .

Adding Team members

After plugin installation, you should be ready now to start adding your team members.

screenshot

To add team member, click on Team Members -> Add Team Member as shown at the above image. Then, you should be directed to "Add Team Member" page.

screenshot

Groups

You have the option to add groups and assign team members to these groups. This is helpful in case you would like to show only team members at some groups. Also there are some layouts like (hexagonal grid and normal grid) have the option of jquery group filter. Think of groups like categories for each team member i.e some team members are in engineering category and others are in management category.

screenshot

You will notice at each group there is a toggle button "Override default theme color". This feature only works with wave layout and you will find more explanation for this feature at wave settings section .

Shortcode Settings

To generate a shortcode, simply navigate to Team Members -> Shortcodes then click Add New Shortcode. Then, you should be directed to another page where there are the shortcode settings.

Shortcode General Settings

screenshot

Layout: You should select the preset that you would like to show. There are 5 different presets:

  1. Mosaic
  2. Wave
  3. Hexagonal Grid
  4. Inline Preview
  5. Normal Grid

Number of team members to load: If you would like to limit the number of team members that will be loaded, change this value. Otherwise, leave this value empty or 0 and at that case it will load all team members.

Order by: You have various options to order your team:

  • Menu Order: and at this case only you can navigate to team ordering page to easily order your team members by drag and drop.
  • Team Member Name (Alphabetical)
  • Publish Date
  • Modified Date
  • ID
  • Random

Order: Select whether you would like to order the team members in ascending or descending way. Note that option will be hidden in case of choosing Random option in "Order by" option.

Groups to show: If you would like to select team members in specific groups, select these groups. Otherwise, if you don't want this group restriction, leave this field empty.

Members to include: If you would like to include only specific team members, select them. Otherwise, leave this field empty.

Members to exclude: If you would like to exclude only specific team members, select them. Otherwise, leave this field empty.

Entry link: What should happen when the user clicks on the team member image? You have 3 options:

  1. Inactive: Nothing will happen.
  2. Right Modal: Modal sliding from right.
  3. Left Modal: Modal sliding from left.

Note: Entry link option will be hidden in case of selecting inline preview layout because its concept is to display all member details inline.

Advanced customization for modal: This toggle button will be shown in case of choosing (Right modal or left modal option) and the following image will provide you with better understandig of modal parts so you can easily understand modal settings.

screenshot

Mosaic Settings

screenshot

Mosaic settings section will be shown once you select "Mosaic" layout.

Mosaic settings are pretty easy to be understood. The following image provides you with better understanding of mosaic settings.

screenshot

Odd Rows are the first row, third row, fifth row and so on.

Even Rows are the second row, forth row, sixth row and so on.

Each of even and odd rows has its own color settings for team member name, job title and social icons.

The media queries are the settings for the font sizes in each screen size.

Wave Settings

screenshot

Wave settings section will be shown once you select "Wave" layout.

Heading and subheading are shown in the middle by default.

Theme color is the color for job title, connectors and waves around team member image. See the below image for better understanding.

screenshot

Note: Theme color can be overridden for groups. Each group can have its own theme color. This feature is only for wave layout.

The media queries are the settings for the font sizes in each screen size.

Inline Preview Settings

screenshot

Inline Preview settings section will be shown once you select "Inline Preview" layout.

List style: You have 3 options for list style:

  1. Hexagonal
  2. Square
  3. Circle

Number of columns: You can choose number of columns per row. In case of hexagonal, number of columns will be for odd rows (first row , third row, fifth row and so on).

For the other options, they are clear enough and the following image will make it more clear for you.

screenshot

Note: Advanced customization for member details column is almost similar to "Advanced customization for modal". Please have a look here

Hexagonal Grid Settings

screenshot

Hexagonal grid settings section will be shown once you select "Hexagonal Grid" layout.

Hexagonal grid settings are pretty easy to be understood. The following image provides you with better understanding of hexagonal grid settings.

screenshot

The media queries are the settings for the font sizes in each screen size.

Normal Grid Settings

screenshot

Normal grid settings section will be shown once you select "Normal Grid" layout.

Normal grid settings are almost like "Hexagonal Grid" settings .

Enable offset between columns: If you would like to have a small gap between columns.

Shortcode and Attributes

After making your own shortcode settings, it is the time now to click "Publish" and then you will have the following screen:

screenshot

Copy the shortcode and paste it in your page or post and you are done.

Id attribute is very important to include at your shortcode.

Title attribute is not important to include. It is just for helping you which shortcode you are copying.

Visual Composer Element

Instead of copying the shortcode, you have the option to add it with WP Bakery Page Builder (Visual Composer formerly).

screenshot

Team Ordering

Team ordering page simply enables you to change the order of team members with drag and drop.

Note: Team ordering works only with shortcodes that have the setting of "Order by" equal to "Menu order".