Persons Widget Tutorial

Intro

Premium Person Widget is a great way to demonstrate team members, employees, and contributors on your website. With the widget, you can display your team members with their image, name, social media links and description. You can adapt the style of the widget with the help of CSS filters, hover effects, and color options.

Click here to check Premium Persons Widget demo.

Key Features

  • Image
  • Person
  • Social Icons

1. Image

  • Image: Upload or select a custom image from the Media Library.
  • Width: Enter the image width in pixels, em or %. The default is 100%.
  • Height: Choose the image height in pixels or em.
  • Hover Effects: Choose from the following effects:
    • None
    • Zoom In (Default)
    • Zoom Out
    • Scale
    • Greyscale
    • Blur
    • Bright
    • Sepia
Premium Persons Widget for Elementor Page Builder

2. Person

Person’s Name, Job Title, and Description will be displayed below the image. The content will slide in from the bottom of the widget when a visitor hovers over the image.

  • Name: Add a person’s name.
  • HTML Tag: Add an HTML tag to the name. Select between H1 to H6, where the H1 is the largest and the H6 is the smallest.
  • Job Title: Add the person’s job title.
  • HTML Tag: Add an HTML tag to the name. Select between H1 to H6.
  • Description: Add a short description as it will be shown right after the Job Title.
  • Alignment: Align the text to the left, center, or right.
Persons Widget Available Options

3. Social Icons

Include the optional links for email and for the following social media websites. The social links are displayed below the description.

  • Facebook
  • Twitter
  • LinkedIn
  • Google+
  • YouTube
  • Instagram
  • Skype
  • Pinterest
  • Dribbble
  • Behance
Social Media Link in Elementor’s Persons Widget

Style

  • Image
  • Name, Job Title and Description
  • Social Icons
  • Content Background

1. Image

  • CSS filters: You can customize the image by selecting one of the available filters: Blur, Brightness, Contrast, Saturation and Hue.
  • CSS Hover filters: Select a filter that will be used when a visitor hovers over the image.
Image CSS Filters are Available in Persons Widget for Elementor

2. The Name, Job Title and Description

These three sections all have the following options:

  • Color: Select text color.
  • Typography: Adjust font settings.
Persons Widget Styling Options

3. Social Icons

  • Color: Set a color for social icons.
  • Hover Color: Select the color that will be used when a visitor hovers over the social icons.
Social Media Icons Styling Options

4. Content Background

  • Color: Set a background color for the content area.
  • Height: Adjust the content background height as per your needs.
Premium Persons Content Background Color and Height