Build a fully responsive Instagram gallery in 5 steps.
Use Zapier to connect your Instagram feed to a fully responsive, custom layout with CSS grid.
In this lesson:
Good to know: This grid will add new Instagram posts to your layout, but it won’t grab all existing photos.
In the left toolbar, choose CMS Collections and click the blue button to add your Collection (create the database).
Go ahead and name your collection, e.g., "Instagram feed."
Now:
Okay, that's step one. Next: Zapier.
Zapier has a basic format: when this happens … do this. A trigger event and a result.
When new images are posted to your Instagram account, you want this Zap (this whole process) to activate. Let’s make that happen!
In your Zapier account, for the first step, When this happens ...:
Once you connect your account, you can Test and Continue.
And now for the second step (the result), Do this …, you’ll connect the first step to Webflow:
Now click Test and continue again and you’re ready to activate your Zap.
In the top right, verify your Zap is switched to ON.
In the next step, you’ll design your Collection list.
Before you launch into this step, you may want to post a new image or two to your Instagram account to trigger Instagram to pass new photos to your grid.
In this step, you’ll build your Collection list. A Collection list is a list of items from your Collection — the database you created earlier.
In the Webflow Designer, click the plus sign in the left toolbar and under CMS, drag a Collection list onto your canvas where you’d like it to sit.
In the Collection list setting popup, choose Instagram feeds as the Source. This immediately populates your Collection list wrapper with an entry for every new image you uploaded to Instagram at the beginning of this step.
At this stage, there’s no images or layout for your Collection list wrapper. There are 2 different ways to fix this:
Let's start with the quickest way.
The other option is to create a grid layout and add a lightbox element for the gallery.
To create a grid layout:
Learn more about Grid layouts in Webflow.
Okay. That's our grid layout. Now, our layout looks great as is, but let’s make it so that when you click the image, it shows up in a lightbox.
To add an image lightbox:
To publish your project: click the Publish dropdown and choose Publish to Selected Domains. Now when you visit your live site, you can click the images to see and click through them in a lightbox.
Here’s where you can style your grid to give it a custom look with a frame for your pictures.
You can do this in 2 steps:
Now you can add realism to your framed photos with a shadow: With your frame still selected, scroll down in the Style Settings to Effects, and click the + icon next to Box shadows.
Learn more about box shadows in Webflow.
Don't forget to publish your project — click the Publish dropdown and Publish to selected domains.
Tweak your grid to best fit each breakpoint. Learn more about how to turn a collection list into a responsive grid in Webflow. When you click into any of the images on the live site — you should see the full gallery! You can switch between each of your Instagram photos and new posts will be added automatically.
Amazing work!
Something went wrong while submitting the form. Please contact support@webflow.com