Product support

Get help in the plugin support forum.

  • Added on Feb 20, 2020
  • Current version: 1.0.3
  • Platform Compatibility
    v3.x not tested
    v2.x not tested
    v1.x use latest
  • Created by


This plugin was designed specifically for people who would like to display an Our Team section on their page with ease.


  • Bootstrap 4 or higher
  • FontAwesome 5 or higher

Note: Plugin comes with both of the above libraries, however, if you have lower versions or do not have them installed then this may cause layout or rendering problems with your page.


{% set themes = __SELF__.theme %}
{% set employees = __SELF__.ourteam.employee %}

<section id="ourteam" class="mt-5">

<div class="container">

    <div class="row">

        {% for employee in employees %}

        <div class="col-md-4 ourteam-col mt-5">

            {% for theme in themes %}
            <div class="ourteam-info">

                <div style="background:{{theme.overlay_colour}};" class="overlay"></div>

                <h3 style="color: {{theme.name_colour}};"> {{ employee.name }} </h3>
                <h5 style="color: {{theme.job_colour}};"> {{ employee.job_role }} </h5>

                <div class="ourteam-social">

                    {% if employee.twitter_link %}
                    <a class="social-links twitter" style="color:{{theme.social_colour}};" target="_blank" href=" https://{{ employee.twitter_link }} "> <i class="fab fa-twitter"></i> </a>
                    {% endif %}

                    {% if employee.facebook_link %}
                    <a class="social-links facebook" style="color:{{theme.social_colour}};"  target="_blank" href="https://{{ employee.facebook_link }}"> <i class="fab fa-facebook"></i> </a>
                    {% endif %}

                    {% if employee.instagram_link %}
                    <a class="social-links instagram" style="color:{{theme.social_colour}};"  target="_blank" href="https://{{ employee.instagram_link }}"> <i class="fab fa-instagram"></i> </a>
                    {% endif %}

                    {% if employee.linkedin_link %}
                    <a class="social-links linkedin" style="color:{{theme.social_colour}};"  target="_blank" href="https://{{ employee.linkedin_link }}"> <i class="fab fa-linkedin"></i> </a>
                    {% endif %}


            {% endfor %}
            <img class="img-fluid img d-block m-auto" src="{{ employee.employeephoto.thumb(350, auto) }}" alt="">


        {% endfor %}





  1. Install plugin by going to Settings > Updates & Plugins and search for Vektar.OurTeam or by adding it to your project.
  2. Go to Our Team in the navigation > Create a new team > Create a team member > apply team member > create team.
  3. Go to CMS > Pages > add to existing page or create a new one > go to Components > Our Team > drag Our Team component onto your desired page.
  4. You can then choose which team and how many members are displayed.

That's it! You can also choose which colours you'd prefer by heading over to Our Team in the navigation > Theme.


Added image previews in lists

Apr 11, 2020


Create tables

Feb 20, 2020


Initialize plugin.

Feb 20, 2020