Person Element


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.

Helen Parkins
Helen ParkinsDeveloper
In sit amet imperdiet erat. Nulla luctus orci sit amet diam varius tristique. Neque in, facilisis nulla.
Brian McArthur
Brian McArthurDeveloper
In sit amet imperdiet erat. Nulla luctus orci sit amet diam varius tristique. Neque in, facilisis nulla.
Julia Atkinson
Julia AtkinsonDeveloper
In sit amet imperdiet erat. Nulla luctus orci sit amet diam varius tristique. Neque in, facilisis nulla.
For privacy reasons YouTube needs your permission to be loaded. For more details, please see our Privacy Policy.
I Accept
View Element Demo Page!

How To Use The Person Element

The Person Element allows you to add a personal profile, replete with image, name, title, description, and a whole bunch of styling options.

Step 1 – Create a new page or post, or edit an existing one.

Step 2 – Select the container and column you would like to place the flip boxes into.

Step 3 – Click on the + Element button at the bottom of the column. Select Person.

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

Step 5 – 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. These style 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.

Step 6 – 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.

Step 7 – Once you have completed styling your Person, click Save. You will be returned to the edit page. You can preview the page to view your Person, and you can always edit the element again to make changes or duplicate it to style another.

Read below for a detailed description of all element options.

Element Options

Location: The edit screen within each Element.

You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative 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.

  • Name – Insert the name of the person.

  • Title –  Insert the title of the person. If you wish to leave it blank, just click in the field to remove the placeholder text.

  • Profile Description – Enter the content to be displayed for the Profile Description. If you wish to leave it blank, just click in the field to remove the placeholder text.

  • Picture – Upload an image to display. The image will display at whatever size and aspect ratio you insert.

  • Picture Link URL – If you wish, you can add a URL the picture will link to, ex:

  • Link Target – Select whether you want the link to open in the same browser tab (_self) or a new tab (_blank).

  • Picture Style Type – Select a style type for the picture. Options are Default, None, Glow, Drop Shadow, and Bottom Shadow.

  • Picture Glow / Drop Shadow Blur – Choose the amount of blur added to glow or drop shadow effect. In pixels.

  • Picture Style Color – Controls the style color for all style types except border.

  • Picture Border Size – Set a border on the Element Picture. In pixels.

  • Picture Border Color – Controls the picture border color.

  • Picture Border Radius – Choose the border radius of the person image. In pixels (px), ex: 1px, or “round”.

  • Hover Type – Select the hover effect type. Opinions are None, Zoom In, Zoom Out, and Lift Up.

  • Background Color – Controls the background color for the Element. If not selected, the default theme options value will be used.

  • Content Alignment – Choose the preferred alignment of the Element content. Options are Default, Left, Center, or Right.

  • Social Icons Position – Choose the social icon position. Options are Default, Top, or Bottom.

  • Boxed Social Icons – Choose to get boxed Social icons. Options are Default, Yes, and No.

  • Social Icon Box Radius – Choose the border radius of the boxed icons. In pixels (px), ex: 1px, or “round”.

  • Social Icon Color Type – Controls the color type of the social icons. Choose from Default, Custom Colors, or Brand Colors.

  • Social Icon Custom Colors – Specify the color of social icons. Use one for all icons, or separate by | symbol. e.g: #AA0000|#00AA00|#0000AA.

  • Social Icon Custom Box Colors – Specify the box color of social icons. Use one for all icons, or separate by | symbol. ex: #AA0000|#00AA00|#0000AA.

  • Social Icon Tooltip Position – Choose the display position for tooltips. Options are Default, Top, Bottom, Left, Right, and None.

Social Media Links Section

  • Blogger Link – Insert your custom Blogger link.

  • Deviantart Link – Insert your custom Deviantart link.

  • Digg Link – Insert your custom Digg link.

  • Dribbble Link – Insert your custom Dribbble link.

  • Dropbox Link – Insert your custom Dropbox link.

  • Facebook Link – Insert your custom Facebook link.

  • Flickr Link – Insert your custom Flickr link.

  • Forrst Link – Insert your custom Forrst link.

  • Google+ Link – Insert your custom Google+ link.

  • Instagram Link – Insert your custom Instagram link.

  • LinkedIn Link – Insert your custom LinkedIn link.

  • Myspace Link – Insert your custom Myspace link.

  • PayPal Link – Insert your custom PayPal link.

  • Pinterest Link – Insert your custom Pinterest link.

  • Reddit Link – Insert your custom Reddit link.

  • RSS Link – Insert your custom RSS link.

  • Skype Link – Insert your custom Skype link.

  • SoundCloud Link – Insert your custom SoundCloud link.

  • Spotify Link – Insert your custom Spotify link.

  • Tiktok Link – Insert your custom Tiktok link.

  • Tumblr Link – Insert your custom Tumblr link.

  • Twitter Link – Insert your custom Twitter link.

  • Vimeo Link – Insert your custom Vimeo link.

  • VK Link – Insert your custom VK link.

  • WhatsApp Link – Insert your custom WhatsApp link.

  • Xing Link – Insert your custom Xing link.

  • Yahoo Link – Insert your custom Yahoo link.

  • Yelp Link – Insert your custom Yelp link.

  • Youtube Link – Insert your custom Youtube link.

  • Email Address – Insert an email address to display the email icon.