How to Add Team Member Widget in Weebly?

Team member widget is most useful to showcase the summary of each of your team member along with a photo and brief introduction. You can use this in Weebly site for purposes like showing team members of your site, organization or business. You can add team member widget in Weebly using the free Weebly app or with custom code. In this article we will explain the issues with default app and using custom code.

Weebly Team Member App

You can connect a free “Team Cards” app to your site from Weebly’s app center. This is an easy option as the app is also from Weebly developers.

However, the app has lot of bugs and create bad user experience when you try to edit the content in the editor. The pop-up for settings will hide the content you want to edit and annoy you all the time. It has been over 5 years and Weebly did not correct and optimize this app. So, instead waiting for Weebly to update the app, you can try the below team member cards.

Add Team Member Widget in Weebly

Let us think of a typical team member widget with social profiles and discuss further on how to add team member widget in Weebly site using traditional “Embed Code” element. The widget what we are talking will look like below with two member cards.

Features of Team Member Widget

• Each team member card consists of the following elements:
  • Profile picture
  • Name and designation
  • Brief description
  • Social icons to social profile links
• You can add multiple team member cards by placing “Embed Code” element next to each other.
• Colors and fonts of each team member card are easy to customize as you need.
• The widget uses Font awesome social icons thus eliminating the need of social icon images. You can add Twitter, Facebook, Skype, LinkedIn or any other social icons to the team members. This essentially means, you can add different set of social icons to different team member based on the profile he / she actually has.

Steps in Adding Team Member Widget

Below are the steps in adding team member widget to your Weebly site.

• Linking Icons CSS
• Adding CSS Code
• Uploading profile images
• Adding HTML Code

Step #1 – Linking Icons CSS

The first step is to link the source CSS of font awesome icons to your site. Login to your Weebly site and add the below code under “Settings > SEO > Header Code” section.

<link rel="stylesheet" href="https://www.webnots.com/resources/font-awesome/css/font-awesome.min.css">

Step #2 – Adding CSS Code

The next step is to add the below CSS code in “main.less” file of your site.

.team {
position: relative;
min-height: 1px;
width:330px;
}

.person-details figure {
display: block;
overflow: hidden;
background: #FFFFFF;
border: 1px solid rgba(216, 216, 216, 0.73);
border-radius: 5px;
margin: 0;
}

.person-details figure figcaption {
padding: 15px;
}

.margin-bottom-10 {
margin-bottom: 10px;
}

.person-details figure small {
font-size: 65%;
}

.h4 small {
font-weight: normal;
line-height: 1;
color: #b3b3b3;
}

.person-details-icons {
background: #bc5e43;
padding: 10px;
text-align: center;
margin: 0;
}

.list-inline {
padding-left: 0;
list-style: none;
margin-left: -5px;
}

.list-inline > li {
display: inline-block;
padding-left: 5px;
padding-right: 5px;
}

.person-details-icons [class^="fa-"]:before, .person-details-icons [class*=" fa-"]:before {
color: #ffffff;
padding: 0;
}

a:hover {
opacity: 0.5;
}

If you are adding this CSS in the header section of the site or a page, ensure to add the code within < style >…</ style > tags.

Step #3 – Uploading Profile Images

Upload the profile pictures of your team members under “Assets” section of Weebly code editor and the uploaded image file path should be like – “http://your-weebly-site.com/files/theme/profile1.png”.

Step #4 – Adding HTML Code

The last step is to add the below HTML code inside “Embed Code” element on the page you want to add team members.

<div class="person-details margin-bottom-30"> 
<div class="team">
<figure>
<img style="width:330px; height:200px" src="https://img.webnots.com/2015/08/Testimonial2.jpg">
<figcaption>
<h4 class="margin-bottom-10">Isabel Tietz
<small>- Plugin Developer</small>
</h4>
<div style="text-align:justify;">Super specialist on PHP template design and development for Weebly and WordPress platforms.</div>
</figcaption>
<ul class="list-inline person-details-icons">
<li>
<a href="#">
&nbsp;&nbsp;&nbsp;<i class="fa fa-twitter">&nbsp;&nbsp;&nbsp;</i>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-linkedin">&nbsp;&nbsp;&nbsp;</i>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-facebook">&nbsp;&nbsp;&nbsp;</i>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-skype">&nbsp;&nbsp;&nbsp;</i>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-google-plus">&nbsp;&nbsp;&nbsp;</i>
</a>
</li>
</ul>
</figure>
</div>
</div>

Customizing the Widget

Adding the above HTML code will enable one team member card and you can customize the widget by modifying the appropriate section.

• Replace the image URL with your own from step 3 and use the height and width attributes to adjust the position and visibility of the profile image.
• The <figcaption> section contains the name, designation and brief description which can be changed as per your need.
• Use any social icons available with the suitable code. For example, use the code <i class=”fa fa-instagram”> to add Instagram icon.
• Use &nbsp; to provide gap between social elements based on the position on your site.
• Replace the # with the social links of the team member.
• Add more team members by placing “Embed Code” elements side by side.
• You can modify colors and font size in the CSS code. We have restricted each team card width to 330px for better appearance on mobile devices, you can try modifying this width if you have longer “name + designation”.

Note: Images in the widget are strictly for demo purposes and do not indicate real team members.