New Component Called "Person Listing"

Example of a Person Listing
By Stefan Popoff
1 min read

This article covers the following topics:

  1. What is the Person Listing Component
  2. What the Person Listing Component Looks Like
  3. How to Add the Person Listing Component to a Page
  4. Additional Resources

 

We recently introduced a new component called Person Listing. Many of our users have expressed a need to easily add a person profile card to a page. We created this component so that you can highlight an individual or a team on your website.
 

 

What the Person Listing Component Looks Like:  

  • Horizontally – The person cards will automatically scale to fit the size of the section where they are placed.

    Example of a Person Listing in the Horizontal Direction

     

  • Vertically – The person cards will automatically scale to fit the size of the section where they are placed.

    Person Listing Vertical

 

 

How to Add the Person Listing Component to a Page:

 

  1. Create the new person page:

    1. Log in to your site.
    2. Hover your mouse over Content.
    3. Hover your mouse over Add content.
    4. Click Person.
    5. Complete as many fields as needed:
      • Add the First Name (Mandatory Field)  
      • Add the Last Name (Mandatory Field)  
      • Add a Portrait Image (Mandatory Field)  
      • Add a Position (Mandatory Field) 
         

  2. Go to the page where you would like to place the component:

    1. Click Edit content.
    2. Click the plus icon where you want to place the component.
    3. Select Person Listing.
    4. Add the Title of the group you are creating.
    5. Start typing the name of the person(s) you would like to add in the person field.
    6. Click the Add another item to add additional persons. 
    7. You are able to reorder the person listing by clicking the all direction arrows.
    8. Expand Layout Options.
    9. Select Grid to have your person page displayed horizontally.
    10. Select List to have your person page displayed vertically.
    11. In the Spacer section, you can select the amount of additional space you would like below the component.  Note: By default, there is no space below a component.
    12. Click Save.
    13. Scroll to the bottom of the page and click Save. 

 

Additional Resources:  

  • Review the Paragraph Library for more detailed instructions.
  • Join the next Co-Working Session to have your questions answered.