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/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/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/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]
This shortcode is available in Shortcodes Ultimate Pro
Description
This shortcode allows you to display team members.
Options
| 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 – |
Photos by Brooke Cagle
Helpful?
🤝 Thank you!