Sign up for updates

Get a weekly update every Sunday with our announcements, company updates and a behind-the-scenes of what our community are building.
Over 11,000 people get our updates, join us!
You're in 😍- check your email to get started. Tweet me what you want to build to see how to do it without code.
Oops! Something went wrong while submitting the form.
â­  all tutorials

Website that updates with live data

This tutorial is available for pro members only

Request access

‍

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.

The full tutorial is available for pro members only

Request access

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.

Type image caption here (optional

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!

‍

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.

Type image caption here (optional

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!

Lesson details

‍

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.

Type image caption here (optional

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!

Previous submissions
No items found.
Supporting details

You must be a member to view the full lesson

Get started with
Makerpad today

The #1 platform for no-code education. Join over 10k others and discover what's possible.

Business

Multiple seat access, hire talent and custom training.

Learn more
Individuals

Unlimited all-access to our online bootcamps and community.

Get started
Email updates
You're in 😍- check your email to get started. Tweet me what you want to build to see how to do it without code.
Oops! Something went wrong while submitting the form.

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.

Type image caption here (optional

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!

More lessons
No items found.

If you'd like this template, message @bentossell on Slack with your email for the account to send this template.

Ready to get started?

Join the community and start turning your ideas into solutions