Available with Extra Shortcodes add-on.

This shortcode allows you to display team members.

Photos by Brooke Cagle

Roland HallPersonnel manager
Member bio
Ramona FieldsTechnology officer
Member bio
Steven DavenportPersonnel director
Member bio
[su_row]
[su_column size="1/3"]
[su_member text_align="center" photo="https://getshortcodes.com/wp-content/uploads/sites/2/2017/08/person-1.jpg" name="Roland Hall" role="Personnel manager" icon_1="icon: facebook" icon_1_url="#" icon_1_color="#3B5998" icon_2="icon: twitter" icon_2_url="#" icon_2_color="#1DA1F2"]Member bio[/su_member]
[/su_column]
[su_column size="1/3"]
[su_member text_align="center" photo="https://getshortcodes.com/wp-content/uploads/sites/2/2017/08/person-2.jpg" name="Ramona Fields" role="Technology officer" icon_1="icon: facebook" icon_1_url="#" icon_1_color="#3B5998" icon_2="icon: twitter" icon_2_url="#" icon_2_color="#1DA1F2"]Member bio[/su_member]
[/su_column]
[su_column size="1/3"]
[su_member text_align="center" photo="https://getshortcodes.com/wp-content/uploads/sites/2/2017/08/person-3.jpg" name="Steven Davenport" role="Personnel director" icon_1="icon: facebook" icon_1_url="#" icon_1_color="#3B5998" icon_2="icon: twitter" icon_2_url="#" icon_2_color="#1DA1F2"]Member bio[/su_member]
[/su_column]
[/su_row]
Option name Possible values Default value
background
Panel background color
#HEX color #ffffff
color
Panel text color
#HEX color #333333
border
Panel border
CSS border shorthand property 1px solid #cccccc
shadow
Panel shadow
CSS box/text-shadow shorthand property 0 1px 2px #eeeeee
radius
Panel border radius (px)
Number from 0 to 60 0
text_align
Text alignment for panel content
left (Left)
center (Center)
right (Right)
left
photo
Select the photo for this member
The URL of uploaded file http://lorempixel.com/400/300/business/
name
Member name
Any text value John Doe
role
Member role
Any text value Designer
icon_1
Select social icon for this member
FontAwesome icon name (with “icon:” prefix) or icon image URL. Examples: icon: star, http://example.com/icon.png

none

icon_1_url
Enter here social profile URL
Any text value

none

icon_1_color
Choose color for this icon. This color will only be applied to the built-in icons
#HEX color #333333
icon_1_title
This text will be shown as icon tooltip
Any text value

none

icon_2
Select social icon for this member
FontAwesome icon name (with “icon:” prefix) or icon image URL. Examples: icon: star, http://example.com/icon.png

none

icon_2_url
Enter here social profile URL
Any text value

none

icon_2_color
Choose color for this icon. This color will only be applied to the built-in icons
#HEX color #333333
icon_2_title
This text will be shown as icon tooltip
Any text value

none

icon_3
Select social icon for this member
FontAwesome icon name (with “icon:” prefix) or icon image URL. Examples: icon: star, http://example.com/icon.png

none

icon_3_url
Enter here social profile URL
Any text value

none

icon_3_color
Choose color for this icon. This color will only be applied to the built-in icons
#HEX color #333333
icon_3_title
This text will be shown as icon tooltip
Any text value

none

url
You can type here any hyperlink to make this panel clickable
Any text value

none

class
Additional CSS class name(s) separated by space(s)
CSS class name(s) separated by space(s)

none