How To Use The Member Widget By Atomic Addons

The Member widget by Atomic Addons shows one person from your team as a card: a photo, the name, the role, a short bio and a row of social icons. You can add a second photo that the card swaps to when a visitor points at it. Place several Member widgets side by side for a team section. This guide covers adding the widget, filling in the card and setting up the social icons.

Enable the Member Widget

Member is a Free widget and works with the free Atomic Addons plugin. Switch it on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Member. You can also open the Content category.

4. 4

   Turn the Member widget on.

5. 5

   Click Save Settings.

Add the Member Widget

Member works on any page:

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Member. The widget sits in the Atomic Addons category.

3. 3

   Drag it into the page and set it up with the controls below.

4. 4

   Click Publish (or Update).

Layout

Open the widget and go to Content → Layout:

1. 1

   Choose Photo: The member's photo, across the top of the card. Until you choose one, the card shows an empty frame. The name is used as the photo's alt text.

2. 2

   Alternative Photo: Adds a second photo. Pick it in the Choose Photo field that appears below; the card fades between the two photos when a visitor points at it. Off by default. Use two images of the same size.

3. 3

   Image Resolution: Which image size WordPress serves for the photos. Large by default.

4. 4

   Name: The member's name, “John Doe” to start with.

5. 5

   Role: The job title under the name, “Managing Director” to start with.

6. 6

   Description: A short bio under the role.

7. 7

   Social Icon: Shows a row of social icons at the bottom of the card. On by default.

The photos, Name, Role and Description accept Dynamic Tags. Empty fields are left out of the card.

Social Icon

Content → Social Icon appears while Social Icon is on. It starts with Facebook, Twitter and Instagram icons that link to sample pages, so change their links before you publish. Click an icon to open it:

1. 1

   Title: The network's name. It is the link's accessible name for screen readers and the text of the tooltip.

2. 2

   Link: The member's profile address. Use the gear icon for Open in new window, Add nofollow and custom attributes.

3. 3

   Choose Icon: The icon, from the icon library (the Brands set has the social networks) or an uploaded SVG.

4. 4

   Icon Background / Icon Color: Optional colors for this icon only, for example each network's brand color.

By default each icon shows its Title in a small tooltip above it on hover. Turn that off with Style → Social Icon → Tooltip.

Style the Member

Everything below is on the Style tab:

• Member — the card: background, border, border radius, padding, Content Padding around the text and Text Alignment.
• Photo — background, border, radius, opacity and spacing, with a Hover state. Its Animation zooms the photo in (Scale Up) or out (Scale Down) when a visitor points at the card.
• Name and Role — color, typography and spacing. Text — color and typography.
• Social Icon — the icon row's background, padding and top border color; each icon's background, color, border, radius, padding, Icon Size and Icon Space Between, with a Hover state; and the Tooltip switch.