> For the complete documentation index, see [llms.txt](https://modernpress-io.gitbook.io/modernpress/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modernpress-io.gitbook.io/modernpress/widgets/team.md).

# Team

### Introduction

The **Team Widget** in **ModernPress** lets you showcase your team members with multiple layouts and interactive hover effects. Whether you want a clean grid, stylish cards, or engaging overlays, this widget helps you present your team professionally and creatively.

***

#### Key Features:

✅ 8 Unique Layouts\
✅ Grid and Card Styles\
✅ Hover Overlays for Team Details\
✅ Round and Square Image Variations\
✅ Customizable Typography, Colors, and Spacing

***

### Adding the Team Widget

{% stepper %}
{% step %}
Open your WordPress Dashboard.

{% endstep %}

{% step %}
Edit a page with **Elementor**.

{% endstep %}

{% step %}
Search for **"Team"** in the **ModernPress Widgets** panel.

<figure><img src="/files/MVYffKexljGRBROnEkKo" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
Drag and drop the widget into your section.

{% endstep %}

{% step %}
Choose a layout and customize it as needed.

<figure><img src="/files/7uQsbTRdSQ3Q1AGvnrpT" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

***

### Layouts Overview

#### Layout 1 - Grid (No Gap, Overlay on Hover)

📌 A seamless grid where team member details appear as an overlay on hover.\
🎨 Best for **modern and minimalistic team displays**.

<figure><img src="/files/3ccxxS1XidLIo80THch7" alt=""><figcaption></figcaption></figure>

#### Layout 2 & 3 - Round Images with Overlay on Hover

📌 Displays team members with circular profile images.\
📌 Hovering reveals their name, designation, and details.\
🎨 Great for **aesthetic and creative team sections**.

<figure><img src="/files/QlgI3wiFOrp5yQ8iA5SJ" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/EyaSkbf49ZrBc49u20iH" alt=""><figcaption></figcaption></figure>

#### Layout 4 - Grid with Square Images & Overlay

📌 A structured grid where square images align perfectly.\
📌 Hover effect reveals additional details.\
🎨 Works well for **corporate and agency websites**.

<figure><img src="/files/IVS7XyDSY3etkxMuBxBU" alt=""><figcaption></figcaption></figure>

#### Layout 5, 6, 7, 8 - Card Styles

📌 Showcases team members in different card styles.\
📌 Includes profile images, names, designations, and social media links.\
🎨 Ideal for **business teams, agencies, and professional showcases**.

<figure><img src="/files/ndd0Ui3swIIZjnhXaykY" alt=""><figcaption><p>layout-5</p></figcaption></figure>

<figure><img src="/files/uFgwZIAv5a2YntR5SWfp" alt=""><figcaption><p>layout-6</p></figcaption></figure>

<figure><img src="/files/awtYPDsWzI79u5eMNjJf" alt=""><figcaption><p>layout-7</p></figcaption></figure>

<figure><img src="/files/aWVdUYrk6Hc1oBQ2UPkA" alt=""><figcaption><p>layout-8</p></figcaption></figure>

***

### **Customization Options**

#### **Content Settings**

👤 **Add Team Members** – Name, designation, bio, and social links.\
🖼 **Choose Layout** – Grid, cards, or overlay styles.\
🔗 **Social Media Links** – Add Facebook, LinkedIn, Twitter, etc.

<div><figure><img src="/files/BXoRmTpeQboVEsUF4mPU" alt=""><figcaption></figcaption></figure> <figure><img src="/files/pGooshtZSrHBgGHvNNDr" alt=""><figcaption></figcaption></figure></div>

#### **Style Settings**

🎨 **Typography & Colors** – Customize fonts, colors, and text styles.\
📏 **Spacing & Alignment** – Adjust margins, paddings, and layout gaps.\
🖌 **Hover Effects** – Control overlay colors, animations, and transitions.

<div><figure><img src="/files/GygKQUuRW6vG2hIjZjv7" alt=""><figcaption></figcaption></figure> <figure><img src="/files/12KsLH7BuutBgTv1txmI" alt=""><figcaption></figcaption></figure> <figure><img src="/files/seTcfuHo6KtB936bFmxS" alt=""><figcaption></figcaption></figure></div>

#### **Advanced Features**

📱 **Responsive Adjustments** – Optimize for mobile and tablet screens.\
✨ **Animation Effects** – Add hover transitions for a smooth experience.

***

### FAQs

<details>

<summary>Can I add more social media links?</summary>

Yes! In the **Content Settings**, you can add multiple social profiles per team member.

</details>

<details>

<summary>Can I customize the hover overlay effect?</summary>

Absolutely! You can change the overlay color, animation, and text visibility in the **Style Settings**.

</details>

***

### **Need Help?**

For support, contact us at <support@modernpress.com>.