Umbraco 7 - How to allow users to add new content fields on-the-fly?

I'm setting up Umbraco 7.7 for the first time and creating the document types and templates for a page that displays the people that work at our organization (includes their names, photos, and bios).

How do I configure it such that the content manager can add another "person"—effectively a cluster of divs with user-editable images and text—without having to manually add another "person" to the template? Using Partial Views seems like part of the solution, but I'm unclear on how to fit it all together.

My template (simplified) currently looks something to the effect of:

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
  Layout = null;
}

<!doctype html>
<html>
  <body>
    <div class="person-bio">
      <img src="/media/person-01-photo.jpg">
      <p>@Umbraco.Field("person-01-name")</p>
      <p>@Umbraco.Field("person-01-title")</p>
      <p>@Umbraco.Field("person-01-bio")</p>
    </div>
    <div class="person-bio">
      <img src="/media/person-02-photo.jpg">
      <p>@Umbraco.Field("person-02-name")</p>
      <p>@Umbraco.Field("person-02-title")</p>
      <p>@Umbraco.Field("person-02-bio")</p>
    </div>
    <div class="person-bio">
      <img src="/media/person-03-photo.jpg">
      <p>@Umbraco.Field("person-03-name")</p>
      <p>@Umbraco.Field("person-03-title")</p>
      <p>@Umbraco.Field("person-03-bio")</p>
    </div>
    <!-- etc., etc. -->
  </body>
</html>

Thank you! Any help would be much appreciated.

Solution

You'll probably will want to use the Nested Content control for this. It allows you to add a list of entities (in your case persons) on a document

More documentation about the nested content control can be found here: https://our.umbraco.com/documentation/getting-started/backoffice/Property-Editors/Built-in-Property-Editors/Nested-Content