Content · Elementor
Team Member widget for Elementor
One person: photo, name, role, bio, social links.
Get King Addons
This page describes the PHP/JS for this widget — not a renamed stub. Install the free plugin from WordPress.org.
What it actually does
One person: photo, name, role, bio, social links.
How to add it in Elementor
- Install King Addons. Install Elementor and King Addons. Get King Addons from WordPress.org.
- Edit with Elementor. Open a page and click Edit with Elementor.
- Insert the widget. Search the panel for “Team Member”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Image”, “Name”, “HTML Tag”, “Job”. Style and Content tabs are listed on this page.
When to use it
- An about page.
- A speakers row.
- A staff directory card.
Tip: After King Addons is active, type king in the Elementor search box to list every widget, including Team Member.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Content — Image | Media Library attachment(s); render() uses the URL/ID as the image source. |
| Content — Name | Printed in the widget HTML from render(). |
| Content — HTML Tag | The chosen value is read in render() and applied on the front end. Options: H1; H2; H3; H4; H5; H6; div; span…. |
| Content — Job | Printed in the widget HTML from render(). |
| Content — Description | Printed in the widget HTML from render(). |
| Content — Divider | Switcher inspector control (`member_divider`). |
| Content — Position | The chosen value is read in render() and applied on the front end. Options: Before Job; After Job. |
| Layout — Name Location | The chosen value is read in render() and applied on the front end. Options: Over Image; Below Image. |
| Layout — Job Location | The chosen value is read in render() and applied on the front end. Options: Over Image; Below Image. |
| Layout — Divider Location | The chosen value is read in render() and applied on the front end. Options: Over Image; Below Image. |
| Layout — Description Location | Selects the value used for the post excerpt. Options: Over Image; Below Image. |
| Layout — Socials Location | The chosen value is read in render() and applied on the front end. Options: Over Image; Below Image. |
| Layout — Button Location | The chosen value is read in render() and applied on the front end. Options: Over Image; Below Image. |
| Layout — Vertical Align | Writes CSS `vertical-align` onto the widget’s front-end markup. Options: Top; Middle; Bottom. |
| Social Media — Show Social Media | Switcher inspector control (`social_media`). |
| Social Media — Open in new window | Switcher inspector control (`social_media_is_external`). |
| Social Media — Add nofollow | Switcher inspector control (`social_media_nofollow`). |
| Social Media — Select Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Social Media — Social URL | Elementor URL control (href, new tab, nofollow) applied to a front-end link. |
| Social Media — Select Icon (Social Icon 2) | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Social Media — Social URL (Social Url 2) | Elementor URL control (href, new tab, nofollow) applied to a front-end link. |
| Social Media — Select Icon (Social Icon 3) | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Social Media — Social URL (Social Url 3) | Elementor URL control (href, new tab, nofollow) applied to a front-end link. |
| Social Media — Select Icon (Social Icon 4) | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Social Media — Social URL (Social Url 4) | Elementor URL control (href, new tab, nofollow) applied to a front-end link. |
| Social Media — Select Icon (Social Icon 5) | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Social Media — Social URL (Social Url 5) | Elementor URL control (href, new tab, nofollow) applied to a front-end link. |
| Button — Show Button | Switcher inspector control (`member_btn`). |
| Button — Button Text | Printed in the widget HTML from render(). |
| Button — Member Btn Url | Elementor URL control (href, new tab, nofollow) applied to a front-end link. |
| Overlay — Select Animation | Animation picker; the chosen effect is applied on the front end. |
| Overlay — Animation Size | The chosen value is read in render() and applied on the front end. Options: Small; Medium; Large. |
| Overlay — Animation Duration (ms) | Writes CSS `transition-duration` onto the widget’s front-end markup. (default 300, min 0). |
| Image — Width | Writes CSS `max-width` onto the widget’s front-end markup. (min 0, max 100). |
| Image — Image Size | Elementor image-size group (thumbnail, medium, large, full, custom). |
| Image — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-member-media`. |
| Image — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Image — CSS Filters | CSS filter group (blur, brightness, contrast, saturation). Selector: `{{WRAPPER}} .king-addons-member-media img`. |
| Image — CSS Filters on Hover | CSS filter group (blur, brightness, contrast, saturation). Selector: `{{WRAPPER}} .king-addons-member-media:hover img`. |
| Content — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-member-content`. |
| Content — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Content — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Content — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-member-name`. |
| Content — Distance | Writes CSS `margin` onto the widget’s front-end markup. (min 0, max 50). |
| Content — Alignment | Writes CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Content — Color (Job Color) | Writes CSS `color` onto the widget’s front-end markup. |
| Content — Typography (Job Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-member-job`. |
| Content — Distance (Job Distance) | Writes CSS `margin` onto the widget’s front-end markup. (min 0, max 50). |
| Content — Alignment (Job Align) | Writes CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Content — Color (Description Color) | Writes CSS `color` onto the widget’s front-end markup. |
| Content — Typography (Description Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-member-description`. |
| Content — Distance (Description Distance) | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 50). |
| Content — Alignment (Description Align) | Writes CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Content — Color (Divider Color) | Writes CSS (king-addons-member-divider, border-bottom-color) onto the widget’s front-end markup. |
| Content — Style | Writes CSS (king-addons-member-divider, border-bottom-style) onto the widget’s front-end markup. Options: Solid; Double; Dotted; Dashed; Groove. |
| Content — Weight | Writes CSS (king-addons-member-divider, border-bottom-width) onto the widget’s front-end markup. (min 1, max 10). |
| Content — Width | Writes CSS (king-addons-member-divider, max-width) onto the widget’s front-end markup. (min 1, max 100). |
| Content — Distance (Divider Distance) | Writes CSS (king-addons-member-divider, margin-bottom) onto the widget’s front-end markup. (min 0, max 50). |
| Content — Alignment (Divider Align) | Options: Left; Center; Right. |
| Social Media (Normal) — Color | Writes CSS (color, fill) onto the widget’s front-end markup. |
| Social Media (Normal) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Social Media (Normal) — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Social Media (Hover) — Color | Writes CSS (king-addons-member-social, color, fill) onto the widget’s front-end markup. |
| Social Media (Hover) — Background Color | Writes CSS (king-addons-member-social, background-color) onto the widget’s front-end markup. |
| Social Media (Hover) — Border Color | Writes CSS (king-addons-member-social, border-color) onto the widget’s front-end markup. |
| Social Media — Transition Duration (ms) | Writes CSS `transition-duration` onto the widget’s front-end markup. (default 300, min 0). |
| Social Media — Font Size | Writes CSS (font-size, width, height) onto the widget’s front-end markup. (min 0, max 200). |
| Social Media — Box Size | Writes CSS (width, height, line-height) onto the widget’s front-end markup. (min 0, max 200). |
| Social Media — Gutter | Writes CSS `margin-right` onto the widget’s front-end markup. (min 0, max 25). |
| Social Media — Distance | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 50). |
| Social Media — Alignment | Options: Left; Center; Right. |
| Social Media — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Social Media — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Social Media — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Social Media — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-member-social`. |
| Button (Normal) — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Button (Normal) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Button (Normal) — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Button (Normal) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-member-btn`. |
| Button (Hover) — Color | Writes CSS (king-addons-member-btn, color) onto the widget’s front-end markup. |
| Button (Hover) — Background Color | Writes CSS (king-addons-button-none, background-color, king-addons-member-btn) onto the widget’s front-end markup. |
| Button (Hover) — Border Color | Writes CSS (king-addons-member-btn, border-color) onto the widget’s front-end markup. |
| Button (Hover) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-member-btn:hover`. |
| Button — Select Animation | Animation picker; the chosen effect is applied on the front end. |
| Button — Transition Duration (ms) | Writes CSS (transition-duration, king-addons-member-btn) onto the widget’s front-end markup. (default 300, min 0). |
| Button — Animation Height | Writes CSS `height` onto the widget’s front-end markup. (min 0, max 100). |
| Button — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-member-btn`. |
| Button — Alignment | Writes CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Button — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Button — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Button — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Button — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Overlay — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-member-overlay`. |
| Overlay — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-member-overlay`. |
| Overlay — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
Content and Style tabs from this widget’s PHP, including repeater fields and group controls (typography, background, border, shadow). Elementor’s Advanced tab is core Elementor and is not listed here.
FAQ
What does Team Member actually change on the page?
One person: photo, name, role, bio, social links. Inspector labels from this widget’s PHP include “Image”, “Name”, “HTML Tag”, “Job”.
How do I add Team Member in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Team Member”, drag it onto the canvas, then set Content and Style.
Do I need Elementor Pro?
No. King Addons runs on free Elementor. Some King Addons options (for example template-in-accordion, extra popup conditions, parts of the template catalog) need King Addons Pro — not Elementor Pro.
Related content widgets
Advanced Blog Posts Carousel
A carousel of blog posts with image, title, and meta — lighter than a full magazine grid.
Advanced Card Carousel
A carousel of cards you fill yourself (image, text, button) — not a post query.
Team Member Slider
Several team members in a slider instead of a wrapping grid.
Accordion
Collapsible panels for FAQs, policies, and long answers. One heading per panel; the body stays hidden until the visitor opens it.
Advanced Callout Box
A note, tip, or warning box with an icon and optional button.
Charts
Bar, line, pie, or radar charts from values you enter in the widget.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Team Member after you activate it.