Company Directory Pro’s Staff Grid widget displays your staff members in an attractive and easy to browse grid format. The Staff Grid is a great way to display a larger staff, or the members of a particular department.
Below are examples of the Staff Grid in action. These are just a few of the ways you can customize the Staff Grid for your website.
Each example includes a shortcode you can copy and paste into your own website to display a similar Staff Grid. You may also want to click here for more instructions on how to add a Staff Grid to your own website.
Examples:
Our Team (Text Overlayed with Animation)
White Overlay and Caption Background, Black Text, and Small Photos
Black Overlay and Caption Background, White Text, and Larger Photos
Code for these examples:
// Output a Staff Grid with small photos, a white caption background + overlay, and black text // Reveal each Staff Member's name + title when the mouse is hovered over their photo // Show 10 staff members per page [staff_grid order_by="last_name" order="ASC" grid_photo_width="170" grid_photo_height="170" grid_text_position="overlay" grid_overlay_animate_text="1" grid_name_color="#000" grid_title_color="#000" grid_overlay_color="#fff" grid_overlay_opacity="15" grid_caption_background_color="#fff" grid_caption_background_opacity="70" show_name="1" show_title="1" show_photo="1" staff_per_page="all"] // Output a Staff Grid with 240x240 photos, a black caption background + overlay, and white text // Reveal each Staff Member's name + title when the mouse is hovered over their photo // Show 10 staff members per page [staff_grid order_by="last_name" order="ASC" grid_photo_width="240" grid_photo_height="240" grid_text_position="overlay" grid_overlay_animate_text="1" grid_name_color="#fff" grid_title_color="#fff" grid_overlay_color="#000" grid_overlay_opacity="30" grid_caption_background_color="#000" grid_caption_background_opacity="70" show_name="1" show_title="1" show_photo="1" staff_per_page="all"]
Tip: You can choose any color and any opacity for the overlay and the background color. You can also choose any text colors you like.
Our Team (Text Overlayed without Animation)
White Overlay and Caption Background, Black Text
Black Overlay and Caption Background, White Text, and Larger Photos
Code for these examples:
// Output a Staff Grid with small photos, a white caption background + overlay, and black text // Don't animate the name + title when the mouse is hovered over their photo (always show it) // Show all staff members [staff_grid order_by="last_name" order="ASC" grid_photo_width="170" grid_photo_height="170" grid_text_position="overlay" grid_overlay_animate_text="0" grid_name_color="#000" grid_title_color="#000" grid_overlay_color="#fff" grid_overlay_opacity="15" grid_caption_background_color="#fff" grid_caption_background_opacity="70" show_name="1" show_title="1" show_photo="1" staff_per_page="all"] // Output a Staff Grid with 240x240 photos, a black caption background + overlay, and white text // Don't animate the name + title when the mouse is hovered over their photo (always show it) // Show all staff members [staff_grid order_by="last_name" order="ASC" grid_photo_width="240" grid_photo_height="240" grid_text_position="overlay" grid_overlay_animate_text="0" grid_name_color="#fff" grid_title_color="#fff" grid_overlay_color="#000" grid_overlay_opacity="30" grid_caption_background_color="#000" grid_caption_background_opacity="70" show_name="1" show_title="1" show_photo="1" staff_per_page="all"]
Tip: You can choose any color and any opacity for the overlay and the background color. You can also choose any text colors you like.
Our Team (Text Displayed Below Photo)
Text Shown Below Photos, Using Small Photos:
Text Shown Below Photos, Using Larger Photos:
Code for these examples:
// Output a Staff Grid with small photos, and the names + titles displayed below the photos. Show all staff members. [staff_grid order_by="last_name" order="ASC" grid_photo_width="170" grid_photo_height="170" grid_text_position="below_photo" show_name="1" show_title="1" show_photo="1" staff_per_page="all"] // Output a Staff Grid with 240x240 photos and the names + titles displayed below the photos. Show all staff members. [staff_grid order_by="last_name" order="ASC" grid_photo_width="240" grid_photo_height="240" grid_text_position="below_photo" show_name="1" show_title="1" show_photo="1" staff_per_page="all"]