How to Embed a Photo Gallery on Webflow?

Example & Intro

We love Webflow, not just because it's our namesake but because it is an excellent tool for building a website. Picflow, on the other hand, is the best tool for creating and designing galleries and collaborating on images. Picflow's Gallery Designer includes layout options that allow you to make any design you can imagine. Choose between different grid options, image sizes, and spacings. The best thing: The gallery is responsive and adapts to any container.

Here's an example of a default Picflow Gallery which is embedded in a Webflow website: embed-gallery.webflow.io

1. Add the Embed Component to your Page

Open your Webflow project and go to the page you want the gallery to be embedded and follow these steps:

• Click on "Add Elements" on the top left of the page.

• Scroll down until you see the "Embed-Component."

• Drag and drop the "Embed-Component" to your page.

2. Open the Embed Settings in Picflow

Next, go to your Picflow gallery to prepare the embed code:

• Open an existing gallery or create a new one.

• Click the "Share" button on the top right of the page.

3. Copy the Embed Code from Picflow

Within the Picflow Gallery, open the context menu (three dots) on the top right and select "Embed Gallery". A dialog will show up with a few options to choose from:

• Image View: You can deactivate this if you only want to show the overview.

• Cover: Hide or show the cover image of your gallery including the gallery title.

• Contact Info: Hide or show the footer with your contact info and social links.

If you're happy with your settings: Click Copy!

That's it, Done!

You just embedded a gallery to Picflow with just a few simple steps. The best thing is, that you can continue to update images and the styling of your Picflow gallery all changes will automatically be reflected on your Webflow website. Try it out yourself!