Requirements

• 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.

Default.htm

{% 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 %}

                </div>

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

        </div>

        {% endfor %}

    </div>

</div>

</section>

Instructions

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.