Jump to content

Creating a staff bio page

Recommended Posts

I need some advice creating a staff bio page with pictures and short, 2-3 sentence bios. I want to do it in a grid format, but I'm having trouble with the WYSIWYG editor.

Link to comment
  • Replies 7
  • Views 25.7k
  • Created
  • Last Reply
  • 4 weeks later...

I have found it really easy to do these kind of things by having a blog page that is "hidden" by not linking it into the main navigation. I essentially use the blog as a database to hold all of the employees and their bios.

In the blog, I then add tags and categories so that I can manipulate how the bios appear. I also have a full bio and in the options using the summary, I can then put in a two line summary of their bio as well. In fact on our site, I just use this to include their email address and phone number.

Then I created a visible page and used various structure blocks such as the summary blocks or tag summaries, to be able to organize the employees. I use the summary blocks on a lot of different pages, to put employees together with areas that they are involved in. I could use several summary blocks next to each other to get a grid effect with employees allocated through a category or tag..

The advantage of this approach is that I can embed employees info in all kinds of different pages and only have to maintain the hidden blog page.

A couple of tricks:

  1. In order for the employees to appear in different priorities, I have created a date coding system for the blog posts. That way all of the moresenior people can appear before themore junior. You can do that tocreate any kind of priority ofappearance you want to achieve.

  2. I also added some CSS to make the blog post dates invisible.

This technique allows you to a lot of flexibility in how you make employees appear. It requires a little more work upfront, however it also means you don't have to touch the forward facing page later. If you add an employee, you just add them to the hidden blog and they magically appear wherever you need them on your site.

Link to comment

The grid WYSIWYG takes a little getting used to, but once you get the hang of it, you'll find it's real easy to manipulate.

Some tips to get you started:

  • Use a different Block of text or codefor each employee image and eachbrief bio.
  • Make sure you use the same kind of Block for each photo,and the same for each bio, so theyline up. (In other words, don't havesome photos as image URL in an HTMLblock, and some as Squarespace imageblocks.)
  • Save after adding each block.
  • Add a few blocks for different employees, and then start dragging them around to see how they line up.
Link to comment
  • 2 years later...


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.