Basic logic and code
CKTechCheck on YouTube
Subscribe to my YouTube channel to learn more about the Monoprive Maker Select V2 and see new videos when they come out
Team Page Design
The key to this design, to the right, was making each team member appear to have their own business card on the page, providing as much detail about each in a confined space and providing a link to an individual bio page.
One key aspect of the design is to have two different levels of appearance. The more senior team members would have a more significant presence while everyone else has a smaller footprint. This was done to allow as many team members on the page as possible without making the page a mile long.
The key features of each profile is a profile picture, name, title, qualifications, email, and a button to the individual bio page.
Originally this page was going to be built just using a standard page builder but I thought there would be an easier way to build the page that can be easily updated going forward.
ACF Field Setup
The ACF setup will require a repeater field so a Pro license will be required. The repeater fields allow the same set of fields to be used multi times for different pieces of information just like we need on companies team field.
There is a field for each piece of the profile box plus one more to determine if the profile will belong to the larger or smaller layout. It's a fairly straightforward setup.
When editing the team page itself the ACF fields appear in a clean format that's easy to update. Each row has a drag and drop feature so rearranging each team member is a breeze. Deleting and adding new members is a no-brainer. Once the page is updated the design will update automatically. This is the beautiful thing of using ACF.
The more technical part of this setup is the actual coding to display all of the fields. Thanks to the ACF documentation it's easy to build the code to display our repeater field. The only tricky part was having two groups of fields that basically display the same information just in a different format. Throw some CSS into the mix and you have a finished product.
This was my first real foray into using ACF to build pages like this and I think it turned out perfectly. Even the though the client doesn't update the page themselves it definitely makes my life easier. Thanks again to the team at ACF for making such an amazing product.
Share the knowledge! It helps me out too so thank you!