1. Home
  2. Docs
  3. Content Elements
  4. Person

Person EA Element

Persons EA Element is a great way to demonstrate team members, employees, contributors, etc. on your website including their names, social media links, brief and many more options. It is a very powerful and lightweight element. You can present your company’s professional stuff on your website in a quality and professional way by using this element. Here in this tutorial, you’re going to learn how to use the Person element into Elementor Page Builder. So let’s get straight into it:

 

 


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Person Element

 

»Content

Image

⇒Image: Upload the person profile image here.

⇒Image Size: Customize the fixed size of the person profile image from our pre-defined size type.

⇒Width: Set the width of the person profile photo manually for different dimensions. Enter image width in (PX, EM, %), default is 100%

⇒Alignment: Set the person profile image alignment either left, right or center.

⇒Hover Effect: Set the hover effect for the person image.

 

Person

⇒Name: Enter the name of the person.

⇒HTML tag: Define the HTML tag for the person name. Respectively h1, h2, h3, h4, h5 & h6 from bigger to smaller in size.

⇒Job Title: Enter the job title of the person.

⇒HTML tag: Define the HTML tag for the job title. Respectively h1, h2, h3, h4, h5 & h6 from bigger to smaller in size.

⇒Description: If you want to write a short bio about that particular person, then enter it here.

⇒Alignment: Set the person content alignment either left, right or center.

 

Social Icons

⇒Enable Social Icons: Do you want to show the social profiles of the person? Then activate the social profiles by selecting ‘Yes’.

⇒Facebook: Add facebook link here.

⇒Twitter: Add twitter link here.

⇒Linkedin: Add Linkedin link here.

⇒Google+: Add Google+ link here.

⇒Youtube: Add a youtube link here.

⇒Instagram: Add Instagram link here.

⇒Skype: Add a skype link here.

: Add Pinterest link here.

⇒Dribble: Add dribble link here.

: Add Behance link here.

⇒Email Address: Add person Email address here.

 


»Style

 

Image

⇒CSS Filters: Customize the CSS filters for the image here.

⇒Hover CSS Filters: Customize the hover CSS filters for the image here.

Job Title

Color: Add a custom color to the job title text.

⇒Typography: Set the typography options for the job title.

⇒Text Shadow: Add the text-shadow to the job title text. Customize the shadow color, blur radius, horizontal and vertical shadow manually.

 

Description

Color: Add a custom color to the description text.

⇒Typography: Set the typography options for the description.

⇒Text Shadow: Add the text-shadow to the description text. Customize the shadow color, blur radius, horizontal and vertical shadow manually.

 

Social Icons

Color: Add a custom color to the social icons.

⇒Hover Color: Add a custom color to the description text on hover.

⇒Background Color: Add a custom color to the Social Icons background for normal view.

⇒Hover Background Color: Add a custom color to the Social Icons background for hover view.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the social icons for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border for normal view.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the social icons for different dimensions.

⇒Margin: Set the margin value for the top, right, bottom and left around the social icons for different dimensions. You can link the values together or customize them individually.

⇒Padding: Set the padding value for the top, right, bottom and left around the icons inside of any defined border for different dimensions. You can link the values together or customize them individually.

 

Content

Color: Add a custom color to the person’s content.

⇒Bottom Offset: Customize the bottom offset for different dimensions.

⇒Transition Duration (sec): Set the transition duration based on seconds.

 


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of the Person Element.


Was this article helpful to you? Yes No

How can we help?