How to Use TD Composer to Build Out Team Pages

Build out beautiful team pages using the TagDiv Composer. Follow along via our video tutorial and follow the step by step instructions below so you can feel confident!

1. Log into your WordPress backend.
2. Go to Pages > Add New
3. Enter a title for your page and select Save Draft. (This creates a URL for the page which TD Composer needs to allow you to begin editing).
4. Select the Option for TagDiv Composer from the buttons below the Title and Permalink.
5. You’ll be brought to preview of the front end of your site.
6. Select Add Element.
7. Select Row.
8. Choose the alignment of your columns to the # of columns you’d like to have.
9. Click inside the row and element of the first option.
10. Search for Team Member and you’ll see the pre-set element.
11. Click and drag it into the element.
12. Change the Name, Job Title, and Description.
13. Remove the placeholder image and choose the correct image from your gallery.
14. Scroll down to the next section to enter the social handles for the team member.
15. If the author has an external website you want to link to, you’ll need to manually add that by doing this:
    • To include the website directly in the description you could need manually add it like this: <p>INSERT SHOWN TEXT NOT HYPERLINKED <a href=”https://www.momcollective.com/”>THIS IS THE TEXT THAT IS HYPERLINKED</a>.</p>
      ​<p> creates a new paragraph so if you want it to be its own, or if you want it within the current paragraph exclude this part.
16. Scroll to the layout to select the horizontal alignment if you’d like to center, left or right-align the element.
17. To change the shape of the photo go to Border Radius.
    1. For rounded edges choose a number between 1 and 100 to preview it.
    2. For a circular image choose a %.
18. Once you’re satisfied with the layout choose the floppy disk to save option.
19. Duplicate the element by selecting the duplicate option double square and clicking and dragging to the next element to the right until the full row has your layout options.
20. You can also duplicate the entire row by choosing the double square next to the Row to create another row.
    1. Be sure to keep 3 to a row and then create a new row. This will ensure that when it’s viewed on mobile that it keeps the alphabetical order. 
21. Then edit each element with the correct picture, name, job title, description, and social handles.
22. Don’t’ forget to save the final product by using the floppy disk at the top.

If you’re looking to add a link to the author page for your contributors. Here’s a tutorial on how to do that.