Using Webflow and Elfsight, you can showcase a customized Instagram feed on your Webflow website.

In this lesson:

1. Create an Instagram Feed widget in Elfsight
2. Embed Elfsight into your Webflow project

Create an Instagram Feed widget in Elfsight

If you don’t already have an Elfsight account, you’ll need to create one to get access to a number of widgets from Elfsight’s Application page. For this lesson, you’ll want the Instagram Feed widget.

Select a widget and adjust the content

Once you click create widget, you can choose from any of the Instagram Feed templates in the left-side panel. Once you select your template, click Continue with this template.

Next, select your Instagram sources: username (e.g., @webflow), hashtag (e.g., #webflow), location (e.g., California), etc. You can also add multiple sources, if you want.

The feed you’re building can be organized by Elfsight’s Filters and Sorting options.

Filtering lets you narrow your feed to display only from a specific username, hashtag, or URL from the sources you added. You can also exclude sources from a specific username, hashtag, or URL, and limit the number of posts in your feed.

Create a custom widget layout

The Layout tab is where you’ll set all the details of the widget’s layout. You can choose the number of columns and rows, the amount of space between images, and your breakpoints depending on the width of the window. 

Let's talk about breakpoints.

From the Layout tab, click the Columns & Rows button. Here, you can change the breakpoints to match your Webflow breakpoints. Learn more in Intro to breakpoints.

Colors

The Colors tab is where you can choose widget colors that match your project. You can customize overlay, buttons, links, background, and text colors. 

1. Click  Post colors to change overlay colors 
2. Click  Grid colors to change the “Load more” button
3. Click  Popup colors to change overlay, background, text, links, and popup buttons

Note: each Elfsight widget has different color options based on the layout selected.

More

The More tab is where you can change our widget’s title, the language, or add custom CSS. For example, you can use CSS code to change the font.

Save the changes and copy the embed code

Once you finish customizing your widget, save your changes. To copy the embed code, hovering over the code window and click.

Embed Elfsight into your Webflow project and publishing

Head into the Designer of your Webflow project where you want to add your Instagram feed and add click Add elements in the left panel. From the Add panel, drag an Embed element onto your page. Now you can paste your Instagram embed code from the last step into the Custom Code section. Save & Close. 

Note: You can use the embed element to add custom code to your projects if you have a paid Webflow account or if your project has an active site plan.

Click the Publish dropdown and Publish to Selected Domains to see your Instagram feed in action.

You did it — great stuff!

‍