Advanced Layout Builder:
Team Member

The Advanced Layout Builder (ALB) has a Team Member element for building staff/people pages. It can be used to quickly style such a page as long as you're willing to accept the limitations of its design (so pay attention to those limitations before you use it). As its hover text indicates, it assumes that each person will have a picture.

Team Member content element

Team Member content element

Text fields are provided for name, title, and description, so these are styled on the page to reflect the different kinds of content. That's the benefit.

Team Member content dialog

Team Member content dialog

The downside is that the description field assumes you probably need only a single paragraph having little or no internal formatting. You can work around this by typing in html but this could end up being more work than just building a staff page without the ALB.

Team Member description field

Team Member description field

Selecting Insert Image opens the Media Library, from which you can pick the image (or upload it if you haven't already). When you select the image its details and display settings will appear, so be sure to adjust the display size now (if necessary) before clicking insert. The ALB element assumes you want to use a big image so if you don't, change it now.

Insert Image dialog

Insert Image dialog

The ALE element also has an image size setting which defaults to "Fit into container", i.e. the ALB element container, which is approx. 830 pixels square. If your image is smaller, select "Use original size".

Image size dropdown

Image size dropdown

The image will display centered over the person's information. If this is not what you want then, as previously mentioned, this ALB element may not be for you.

Example of team member entry

Example of team member entry

Finally, you can use the Social Service/Icon element to point people to email, social media, or anything else that can be linked. Select Add to begin, and then click on the element (which now should have a default icon).

Adding a contact icon, including social media icons

Adding a contact icon, including social media icons

In the dialog that opens put in the hover text (i.e. name) of the element along with its link, whether that link should open in a new window, and select the appropriate icon for it.

Edit Icon Link dialog

Edit Icon Link dialog

Add as many as you like. When viewed at desktop resolutions they will appear over the person's picture when a cursor hovers over it (at mobile resolutions – because there is no hovering in mobile – the icons will appear below the picture by default). If this is a problem – and it might be, because people who don't hover over the image will miss those links – then you may want to put such links into the description … and because this means adding all the necessary html manually, you might not want to use this feature if there will be a lot of such links. Also, because these icons are dependent upon the presence of an image, you won't be able to use this element if you don't plan to include pictures of your people.

Team member with on-hover icon links

Team member with on-hover icon links