With Team Member, you can showcase team members creatively. It includes options to include images, descriptions, social links, and more. 

Video Instruction #

Using Team Member #

To use the Team Member tool and design your website creatively, follow the steps mentioned below. 

Step 1 #

From the menu bar on the left-hand side, select the Team Member. Drag and drop the widget on the area you want it to be. 

Step 2  #

Once the widget is in place, you can add the contents in the team member widget. You can select the style you want to display from the Preset option. Pick the preset that matches with your preference. 

Team Member widget on Elementor page builder

Step 3 #

In the Content option, you can select a photo of the team member. You will have the chance to fix the size of the image as well. We recommend using a professional picture to give a proper vibe to the viewers. Also, you can add team member details such as name, designation and so on. 

Team Member widget's content section

Step 4 #

Another function you can enjoy with the Droit Elementor Addon is tagging the Social Profile Link of the team members as their information. You can add links to the existing option. You can also add or remove items to include links to different social media. 

Team Member social profile section

Step 5 #

In this section, you can get creative as you get the option to edit and stylize the following elements of the widgets, ‘Image’, ‘Content’, ‘Icons’ are the available options that you can customize. 

Team Member style menu

Image: In this section, you can edit the height, width, padding, and design of the image you have selected. The navigation of these tools is easy to understand and apply. 

Team Member image style settings tab

Content: This section will allow you to customize the names of the team members and job description with options such as font type, font color, shadow, and other styling options.  

Team Member widget's content style settings tab

Icons: You can customize and modify the social icons with different options such as icon size, margin, padding, distance, color and more. 

Team Member widget's icon style settings tab

These are the different tools and options you can use to create a top-notch team member section to showcase the information of your team members. 

Step 6 #

In the Advanced section of the widget, you will have the flexibility to add margin and padding to the widget. You can also modify the Z-index to customize the widget more. 

Team Member widget's advanced settings tab

You will also get the chance to edit and customize the following options: Motion Effects, Background, Border, Positioning, Responsive, Attributes, Custom CSS. 

Motion Effects #

From the Motion Effects option you can add different effects such as fading, zooming, bouncing, sliding, rotating, attention seeking motion, lightspeed and more effects to make your widget look different. 

Team Member widget's motion effects settings tab

Background #

If you want to customize the background with specific color, gradient or images, you can do that from the advanced settings as well. 

Border #

If you want to add any line, box, dots and other design variations as borders of the widget, you can do it from here. You can also customize the size and insert shadow effects if you want to. 

Team Member widget's border settings tab

Positioning #

This feature will allow you to fix the positioning of the widget. From the width section you can select if the position will be full width, inline or customized. And you can set the position as absolute or fixed as well from these settings. 

Team Member widget's positioning settings tab

Responsive #

You can check the responsive of the widget if you toggle through the available options. However the change of the widget will be only visible on the live page or preview, not in the Elementor.

Team Member widget's responsive settings tab

Attributes #

With Attributes, you can add custom HTML attributes to any elements. However, this feature is only available with the pro version of the Droit Elementor Addons. 

Custom CSS #

Custom CSS lets you add CSS code to any widget, and see it render live right in the editor. However, this feature is only available with the pro version of the Droit Elementor Addons.  

Powered by BetterDocs