Person Element

24/09/2019

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 utilise, you have the power to display your staff, team or favourite people with style and ease. Read below for an overview of the specific features of the Element.

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.
View more examples!

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 the 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 Theme 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 your Theme Options > Fusion 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: http://example.com.

  • 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.

  • 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.

  • Show Custom Social Icons – Show the custom social icons as specified in Theme Options. Options are Yes, or No.

  • Element Visibility –  Allows you to control the element’s visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.

  • CSS Class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.

  • CSS ID – Add a custom id to the wrapping HTML element for further css customization. Learn more here.

View The Options Screen

Global Options

Location: WordPress Dashboard > Avada > Theme Options > Fusion Builder Elements > Person Element. 

The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

  • Person Background Color – Controls the background color of the person area.

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

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

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

  • Person Border Color – Controls the border color of the person image.

  • Person Border Size –Controls the border size of the person image. In pixels.

  • Picture Border Radius –Controls the border radius of the person image. Enter value including any valid CSS unit, ex: 0px.

  • Person Content Alignment – Controls the alignment of the Person content. Options are Left, Center, or Right.

  • Person Social Icon Position – Choose the social icon position. Options are Top or Bottom.

View The Options Screen

Person Element Parameters

Copy to Clipboard
    • name – The profile name. For example, John Doe.
    • title – The title or position. For example, CEO.
    • picture – The URL path of the custom image to be displayed. For example, http://www.sample.com/image.jpg.
    • pic_link – The URL path where the image links to. For example, http://www.sample.com/
    • linktarget – Choose from _blank or _self. Choose _blank to open the link in a new window, or _self to open it in the same window.
    • pic_style – Choose from none, glow, dropshadow, or bottomshadow. Sets the picture’s style type.
    • hover_type – Choose from none, zoomin, zoomout, or liftup. Sets the picture’s hover type animation.
    • background_color – Accepts a hexcode ( #000000 ). Sets the background color.
    • content_alignment – Choose from default, left, right, or center. Sets the content’s text alignment.
    • pic_style_color – Accepts a hexcode ( #000000 ). Sets the style color for all style types except for the border.
    • pic_bordersize – Accepts a pixel value. For example, 1px. Sets the border size.
    • pic_bordercolor – Accepts a hexcode ( #000000 ). Sets the border’s color.
    • pic_borderradius – Accepts a pixel value. For example, 1px. Sets the border’s radius.
    • icon_position – Choose from default, top, or bottom. Sets the icon’s position.
    • social_icon_boxed – Choose from default, yes, or no. Enable or disable the icon’s boxed background.
    • social_icon_boxed_radius – Accepts a pixel value. For example, 1px. Sets the icon background’s radius.
    • social_icon_boxed_colors – Accepts a hexcode ( #000000 ). Sets the social icon’s box colors. Use one color, or individual colors. Separate colors with a vertical line ( #AA0000|#00AA00 ).
    • social_icon_colors – Accepts a hexcode ( #000000 ). Sets the social icon’s colors. Separate colors with a vertical line ( #AA0000|#00AA00 ).
    • social_icon_tooltip – Choose from default, left, right, top, bottom, or none. Sets the icon tooltip position.
    • email – The email address. For example, johndoe@example.com.
    • social links – The custom URL path to your various social media profiles. For example, http://www.facebook.com/johndoe.
    • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
    • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.

    • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.

    • custom content – Insert the profile description between the
      Copy to Clipboard

      tags.