Team Member

How to use Team Member Widget of Sky Addons for Elementor

Sky Addons Team Member Widget is a versatile element designed to showcase your team members with style and functionality. Create beautiful team profiles with customizable layouts, social media integration, and interactive elements. Perfect for company pages, about sections, or any content where you need to highlight the people behind your organization.

The Team Member widget offers multiple style presets and extensive customization options to display your team’s information professionally. Showcase profile images, names, positions, descriptions, and social profiles with elegant hover effects and responsive layouts that adapt seamlessly to all devices.

Key Features:

1. Multiple Style Presets – Choose from 6 beautiful styles including Default, Ardent, Folk, Folker, Slide, and Mold
2. Customizable Member Information – Display name, job title, description text, and more
3. Social Media Integration – Add unlimited social media profiles with custom icons
4. Interactive Elements – Hover animations, alternative images, and call-to-action buttons
5. Highly Customizable – Complete control over colors, typography, spacing, and animations
6. Fully Responsive – Looks perfect on all devices from mobile to desktop

Insert Team Member Widget

1. Open Elementor Editor. In the Elementor panel, search for “Team Member”
2. Drag and Drop the Widget to the desired location on your page / editor.

Member Info Section

Configure the basic information and layout for your team member.

1. Select Style – Choose from 6 different layouts (Default, Ardent, Folk, Folker, Slide, Mold)
2. Slide Effect – When using the Slide style, select direction (Top to Bottom, Bottom to Top, etc.)
3. Image Position – Position the image left, top, or right relative to content (Default style)
4. Image – Upload the primary team member image
5. Alternative Image – Add a secondary image that appears on hover
6. Name – Enter the team member’s name and select heading tag
7. Job Title – Add position/role and select heading tag
8. Short Text – Include a brief description or biography
9. Social Icons – Toggle to display social media links
10. Show Button – Add a call-to-action button to link to additional content

Social Media Section

Configure social profiles for your team member. Add unlimited Social Media Links via repeater with full customization:

1. Social Links – Add multiple social platforms with custom icons and links
2. Customize Icons – Personalize each icon with custom colors and backgrounds
3. Icon Styling – Apply custom hover effects and transitions to social icons

Button Section

Configure the call-to-action button for your team member.

1. Button Position – Place the button before or after social icons
2. Button Text – Customize the button label
3. Link – Set URL destination, open in new tab, and nofollow options
4. Full Width – Make button span the full width of the element
5. Button Icon – Add an optional icon before or after the text

Style Customization

The Team Member widget offers extensive styling options to match your website’s design perfectly. Customize every aspect of appearance including colors, spacing, typography, borders, and more.

Member Section

Adjust the general appearance of the team member element.

1. Alignment – Set content alignment (left, center, right, justify)
2. Content Padding – Control spacing around the content area

Mold Content Section

Style the content area specifically for the Mold style preset.

1. Background – Set different backgrounds for normal and hover states
2. Hover Effects – Create visual transitions when users interact with the element

Overlay Section

Customize the overlay appearance for Ardent, Folk, and Slide styles.

1. Overlay Color – Set the background color/gradient for the information overlay
2. Padding – Adjust spacing within the overlay area

Image Section

Style the team member’s profile image.

1. Spacing – Control distance between image and other elements
2. Width & Height – Set precise dimensions for the image
3. Offset – Apply horizontal/vertical positioning and rotation
4. Border & Border Radius – Customize the image frame and corners
5. Effects – Add filters, opacity changes, and hover animations

Name Section

Style the team member’s name display.

1. Typography – Control font family, size, weight, and style
2. Spacing – Set distance below the name
3. Colors – Different colors for normal and hover states
4. Text Shadow – Apply shadow effects to the text

Job Title Section

Style the team member’s position/role display.

1. Typography – Customize font appearance for the job title
2. Spacing – Control distance below the job title
3. Colors – Set different colors for normal and hover states
4. Text Shadow – Add depth with custom shadow effects

Text Section

Format the biographical text/description.

1. Typography – Set font styling for the descriptive text
2. Spacing – Control margin below the text block
3. Colors – Customize text color in normal and hover states

Social Icons Section

Style the social media icons display.

1. Spacing – Adjust distance between icons
2. Icon Size – Control the dimensions of social icons
3. Padding & Border – Customize the area around each icon
4. Colors – Set custom colors for icons and backgrounds
5. Hover Effects – Apply interactive color changes and transitions

Button Section

Style the call-to-action button appearance.

1. Typography – Customize font appearance for button text
2. Padding & Margin – Control spacing within and around the button
3. Colors – Set text and background colors for normal and hover states
4. Border & Border Radius – Create custom button shapes
5. Shadows – Add text and box shadows for depth
6. Hover Animation – Apply interactive effects when users hover

Save and Preview

1. Once you’ve customized and styled your team member, click “Publish” or “Update” to save your changes.
2. Preview the page to ensure the widget looks and functions as desired.

Troubleshooting

1. Images Not Displaying Correctly – Ensure your images are the appropriate size and format. For best results, use images with consistent dimensions.
2. Social Icons Alignment Issues – Check the spacing and padding settings in the Social Icons style section.
3. Content Overflow – If text or content appears cut off, adjust the content padding or container sizing.
4. Mobile Responsiveness – Review your team member on different screen sizes and adjust responsive settings as needed.
5. Style Preset Limitations – Some features may be disabled in certain style presets by design. Try another preset if needed.

Conclusion

The Team Member widget is a powerful tool for showcasing your team with professional style and functionality. With its multiple layout options, extensive customization capabilities, and responsive design, you can create engaging team profiles that highlight the people behind your organization.

If you have any questions or encounter any challenges while using, please don’t hesitate to reach out to our dedicated support team at http://wowdevslive.bdkoder/support/ where our expert team is ready to provide prompt and helpful assistance.

Your feedback and questions help us continuously improve our products, so please don’t hesitate to get in touch!