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. This can be used in Weebly site for different purposes like showing team members of your site, organization or business. Weebly’s app center has a free “Team Cards” element which can be added in your site easily. Unfortunately the element has lot of bugs which are not corrected till the date of this article and we hope Weebly will correct the bugs soon.

Weebly Team Card Element
Weebly Team Card Element

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:

Team Member Panel Widget

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 can be customized as you need.
  • Font awesome social icons are used eliminating the need of social icon images. Twitter, Facebook, Skype, Google+, LinkedIn or any other social icons can be added. This essentially means different set of social icons can be added to different team member based on the profile he / she actually has.
Related:  500+ Free Web Directories to Submit Your Site

Steps in Adding Team Member Widget

Listed below are the steps involved in adding team member widget to your Weebly site.

Step 1 – Linking Icons CSS

Step 2 – Adding CSS Code

Step 3- Uploading profile images

Step 4 – Adding HTML Code

Step 1 – Linking Icons CSS

Font awesome icons are used in the widget and add the below code under “Settings > SEO > Header Code” section to link the icons CSS in your Weebly site:

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

Linking Font Awesome CSS in Weebly

Linking Font Awesome CSS in Weebly

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 :before, .person-details-icons :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 the 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.
  • &nbsp; is used to provide gap between social elements which you can delete 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.
  • Colors and font size can be modified in the CSS code. Each team card width is restricted to 330px for better viewable in mobile devices, you can try modifying this width if you have longer “name + designation”.
Related:  How to Create Portfolio Page in Weebly?

Images shown are strictly for demo purposes and do not indicate real team members.

Recommended Articles:

2 thoughts on “Add Team Member Widget in Weebly”

  1. I tested the first version of this and passed — mainly as it did a poor job of handling long names — should you want a nice clean, even look to the cards (as you see in the sample above).

    Reply
    • Obviously you need to customize if the name + designation is long. Each team card width is restricted to 330px in the 4th line of CSS code. Increase this width and check it is fitting.

      Reply

Leave a Comment