Animation Addons

Animation Addons

General Widgets

Team

Estimated reading: 3 minutes 71 views

The Team Widget allows you to create professional team member sections with ease. You can display member images, names, roles, descriptions, and social profiles with flexible layout and styling options to match your website design.

Requirement 

  • Elementor (Page Builder) 
  • Animations Addons (Our Plugin)  

Tip: Make sure Animation Addons is installed and activated on your WordPress site before you start.   

How To Activate Team Widgets 

  1. Go to your WordPress Dashboard. 
  2. Click on Animation Addons. 
  3. Head to the Widgets Tab. 
  4. Under General, toggle on Team.  
Team widgets 01

Step 1: Insert Team Widget & Configure Basics

First, click the “+” icon, search for Team, and then select it.

Team widgets 02

After selecting the Team, you will find four sections: Layout, Image, Content, and Social Media Settings. Let’s begin with the Layout section.

Layout 

Team widgets 03

Style: It controls the card layout, structure, and how the image and content are arranged. You will find options like One and Two. If you choose “One,” the social media icons will appear below the designation.

If you choose ‘Two’, the social media icons will appear on the layout when you hover over it.

In this example, ‘Two’ is selected. However, you can choose either option based on your preference.

Alignment: This sets the position of the content inside the widget, such as left, center, or right. You can choose any option based on your design needs. In this example, Center is selected. 

Image 

This lets you choose the team member’s photo to display in the widget.

Team widgets 04

Image Resolution: You can choose any image resolution based on your design needs. In this example, the image resolution is set to Full. However, you can select any option you prefer.

Step 2: Customize Team Info & Social Icons

Add the team member’s details, such as name, role, and description to personalize the card. You can also enable and position social icons to showcase their social profiles.

Team widgets 05

Name: This is the team member’s name displayed on the card. You can set the name as you prefer. In this example, it is set to “David John.”

Name HTML Tag: This sets the HTML tag for the name, such as H1, H2, H3, or a paragraph tag. It helps with structure and SEO. In this example, it is set to H3.

Designation: This displays the person’s job title or role, such as Designer, Developer, or Manager. In this example, the designation is set to Project Engineer.

Description: This adds a short bio or description of the team member. In this example, it is left blank. However, you can add a short bio for each team member if you prefer.

URL: This adds a link to the team member’s profile, portfolio, or any custom page. In many cases, clicking the name or image will open this link.

In this example, no link is set. However, you can add any link based on your preference.

Social Media

Team widgets 06

Show Social Icon: This turns the social media icons section on or off. In this example, the option is On. 

However, if you don’t want to display any social media icons, you can simply disable this option.

Placement: This controls where the social icons appear, such as below the content, over the image, or in another preset position, depending on the widget style. You will find options like Bottom, Left, Right, and Center.

In this example, Center is selected, but you can choose any option based on your needs.

Final Result 

Share this Doc

Team

Or copy link

CONTENTS