‍

This type of site can be used and adapted a number of ways. I'm currently building a version of this for Earnest Capital where we have a page for our portfolio founders and mentors (among other things). This live site is built on Webflow and can be updated by adding rows to an Airtable base. This type of site lets you build a lot of things: directories, job boards, employee sites, internal tools, community, members profiles and lots more.

How it works:

• Set up a Webflow project and CMS
• Set up an Airtable base
• Use Zapier to set up new Airtable record as the trigger
• Connect to Webflow action of creating an item
• Design your page

FYI I generated random avatars from here.

First you need to set up a Webflow project and create your CMS Collection. We are going to call this 'People' and all we need is Name, Profile Picture, Twitter URL and Twitter Username.

If you already have a few people to add to your directory, add them via Webflow.

Create your Airtable base (you could use Google Sheets as a replacement here). We have four fields to map to our CMS collection (Name, Profile Picture, Twitter Username and Twitter URL). The Profile Picture field type is an attachment.

The Twitter username field is a formula, which takes the Twitter URL, reads the data after "https://twitter.com/" to pull in the username. I've done this so when we design our website we can display the username but have it actually link to the Twitter URL.

Now lets set up Airtable and Zapier to push live data to the website. Start with Airtable as the Trigger app.

Connect your account

Connect the base and table you are using.

We want to create a live item which will be published on the main site straight away. Now if you are doing this for a job posting site or something that any user can post to, you can always select 'create item' and review it before you publish the site. In the next couple of steps you can see that you can also choose to post the item as a 'draft'.

Conect your webflow account.

Connect the site that you are using. Then connect the right fields to the corresponding Airtable fields.

Make sure you have published the site for the test to work properly or you will get an error.

‍

FYI I generated random avatars from here.

Once you've tested the site you can go into Webflow and design your site. A quick look at the design I did...Started with a Collection List Wrapper

Within each Collection Item (33% width - which is why only 3 fit across a page) I added a Div Block which I've named "People Block". This is white with a small drop-shadow.

Within People Block I added an Image and mapped it to the Profile Picture CMS Item and another Div Block for the text and links.

In that Div is a Link block which is mapped to the URL of the Twitter URL. I put an Image of a Twitter icon and Text which is mapped to Twitter username in the CMS collection too.

I also added a link bock which links to a page - Current Person. This means every person here will have their own page because the CMS collection pages are automatically generated. You can go and edit those to make them look like beautiful profiles too. More on that in a future tutorial.

And there we have it!