Staff Grid Examples

The 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

Example Photo of Staff Member

Sally Becton

Chief Executive Officer

Example Staff Member Photo

Larry Bowen

Chief Operating Officer

Elizabeth A. Fabian

Chief Financial Officer

Example Staff Member Photo

Maria Juarez

Chief Information Officer

Walter Salmon

VP Marketing

Example Staff Member Photo

Celia Walton

VP Sales

Black Overlay and Caption Background, White Text, and Larger Photos

Example Photo of Staff Member

Sally Becton

Chief Executive Officer

Example Staff Member Photo

Larry Bowen

Chief Operating Officer

Elizabeth A. Fabian

Chief Financial Officer

Example Staff Member Photo

Maria Juarez

Chief Information Officer

Walter Salmon

VP Marketing

Example Staff Member Photo

Celia Walton

VP Sales

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.

Back To Top

Our Team (Text Overlayed without Animation)

White Overlay and Caption Background, Black Text

Example Photo of Staff Member

Sally Becton

Chief Executive Officer

Example Staff Member Photo

Larry Bowen

Chief Operating Officer

Elizabeth A. Fabian

Chief Financial Officer

Example Staff Member Photo

Maria Juarez

Chief Information Officer

Walter Salmon

VP Marketing

Example Staff Member Photo

Celia Walton

VP Sales

Black Overlay and Caption Background, White Text, and Larger Photos

Example Photo of Staff Member

Sally Becton

Chief Executive Officer

Example Staff Member Photo

Larry Bowen

Chief Operating Officer

Elizabeth A. Fabian

Chief Financial Officer

Example Staff Member Photo

Maria Juarez

Chief Information Officer

Walter Salmon

VP Marketing

Example Staff Member Photo

Celia Walton

VP Sales

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.

Back To Top

Our Team (Text Displayed Below Photo)

Text Shown Below Photos, Using Small Photos:

Example Photo of Staff Member

Sally Becton

Chief Executive Officer

Example Staff Member Photo

Larry Bowen

Chief Operating Officer

Elizabeth A. Fabian

Chief Financial Officer

Example Staff Member Photo

Maria Juarez

Chief Information Officer

Walter Salmon

VP Marketing

Example Staff Member Photo

Celia Walton

VP Sales

Text Shown Below Photos, Using Larger Photos:

Example Photo of Staff Member

Sally Becton

Chief Executive Officer

Example Staff Member Photo

Larry Bowen

Chief Operating Officer

Elizabeth A. Fabian

Chief Financial Officer

Example Staff Member Photo

Maria Juarez

Chief Information Officer

Walter Salmon

VP Marketing

Example Staff Member Photo

Celia Walton

VP Sales

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"]

Back To Top