Person Element

Last Update: March 12, 2024

With the Person Element, you can include a small biography for staff members or people of importance on your website. With several customization options to utilize, you have the power to display your staff, team or favorite people with style and ease. Read below for an overview of the specific features of the Element, and watch the video for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.
I Accept

How To Use The Person Element

The Person Element allows you to add a personal profile, replete with an image, name, title, description, and a whole bunch of styling options. To start, simply add the element into your desired column.

Start with the basics of Name, Title, and Description, and then upload an image. The image can also link to another page.

The styling options come next with a collection of Picture styling options, from the style type and color, as well as border size, color, and radius. There is also a Hover Type, Background Color, and Content alignment before there are a bunch of Social Media options. This styles the social media links, which are entered further down. You can choose the radius and color type of icons, including custom colors. These are entered in hexadecimal values – one for each social media profile you enter.

Once you have set all your styling options, there is a long list of possible social media links for you to choose from. Simply enter the relevant URLs in the correct fields. There is also an option for an email link at the bottom. Finally, there is a choice to show the custom social icons specified in Avada Options, if you have set any of these up.

Read below for a detailed description of all element options.

Element Options

Note: The Default setting will use the global settings assigned for this element in the Avada > Options > Avada Builder Elements > Person Element section. Also, please note that the displayed options screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

General

HeadingDescription
NameInsert the name of the person.
TitleInsert the title of the person.
Profile DescriptionEnter the content to be displayed.
PictureUpload an image to display.
Picture Link URLAdd the URL the picture will link to, ex: http://example.com.
Link TargetControls how the link will open.
Social Icons PositionChoose the social icon position.
Blogger LinkInsert your custom Blogger link.
Deviantart LinkInsert your custom Deviantart link.
Discord LinkInsert your custom Discord link.
Digg LinkInsert your custom Digg link.
Dribbble LinkInsert your custom Dribbble link.
Dropbox LinkInsert your custom Dropbox link.
Facebook LinkInsert your custom Facebook link.
Flickr LinkInsert your custom Flickr link.
Forrst LinkInsert your custom Forrst link.
Instagram LinkInsert your custom Instagram link.
LinkedIn LinkInsert your custom LinkedIn link.
Myspace LinkInsert your custom Myspace link.
PayPal LinkInsert your custom PayPal link.
Pinterest LinkInsert your custom Pinterest link.
Reddit LinkInsert your custom Reddit link.
RSS LinkInsert your custom RSS link.
Skype LinkInsert your custom Skype link.
Snapchat LinkInsert your custom Snapchat link.
Teams LinkInsert your custom Microsoft Teams link.
SoundCloud LinkInsert your custom SoundCloud link.
Spotify LinkInsert your custom Spotify link.
Telegram LinkInsert your custom Telegram link.
Tiktok LinkInsert your custom Tiktok link.
Tumblr LinkInsert your custom Tumblr link.
Twitch LinkInsert your custom Twitch link.
X LinkInsert your custom X link.
Vimeo LinkInsert your custom Vimeo link.
VK LinkInsert your custom VK link.
WeChat LinkInsert your custom WeChat link.
WhatsApp LinkInsert your custom WhatsApp link.
Xing LinkInsert your custom Xing link.
Yahoo LinkInsert your custom Yahoo link.
Yelp LinkInsert your custom Yelp link.
Youtube LinkInsert your custom Youtube link.
Email AddressInsert an email address to display the email icon.
Phone NumberInsert a phone number to display the phone icon.
Show Custom Social IconsShow the custom social icons specified in Global Options.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Design

HeadingDescription
MarginEnter values including any valid CSS unit, ex: 4%.
Picture Style TypeSelect the style type for the picture.
Picture Glow / Drop Shadow BlurChoose the amount of blur added to glow or drop shadow effect. In pixels.
Picture Style ColorFor all style types except border. Controls the style color.
Picture Border SizeIn pixels.
Picture Border ColorControls the picture's border color.
Picture Border RadiusChoose the border radius of the person image. In pixels (px), ex: 1px, or "round".
Hover TypeSelect the hover effect type.
Background ColorControls the background color.
Content AlignmentChoose the alignment of content.
Social Icon Tooltip PositionChoose the display position for tooltips.
Boxed Social IconsChoose to get boxed icons.
Box Border SizeControls the border size. In pixels or percentage, ex: 10px or 10%.
Social Icon Box RadiusChoose the border radius of the boxed icons. In pixels (px), ex: 1px, or "round".
Social Icon Color TypeControls the color type of the social icons.
Social Icon ColorSpecify the color of social icons.
Social Icon Background ColorSpecify the box background color of social icons.
Social Icon Border ColorSpecify the border color of social icons.

Extras

HeadingDescription
Animation TypeSelect the type of animation to use on the element.
Direction of AnimationSelect the incoming direction for the animation.
Animation ColorSelect the color of the animation
Speed of AnimationType in speed of animation in seconds (0.1 - 5).
Animation DelaySelect the delay time after the animation starts(0 - 5).
Offset of AnimationControls when the animation should start.

In this article