Magnolia - Instagram Feed

Note: This screenshot also depicts the 3-column footer, which is set up separately. Click here for instructions on that area.

1. Connect your Instagram account to the Instagram plugin

Click here and follow the instructions to connect your Instagram account to the Instagram Feed plugin on your website. Then return to this tutorial!

2. Customize the appearance of your Instagram Feed

After following the tutorial above and selecting a feed source, you'll be taken to an area where you can customize the appearance of your feed. It should look like this:

To set up your feed like the demo, you're going to make a few simple modifications to the feed settings. There are four sections that you will modify, which we'll go through below:

Feed Layout

• Padding: 0
• Number of Posts (Desktop): 8
• Columns (Desktop): 8

Header

• Deselect the "Enable" box

Load More Button

• Deselect the "Enable" box

Follow Button

• Deselect the "Enable" box

In the feed preview, your feed should now roughly resemble the demo. You're welcome to customize the feed further if you wish — these are just the settings to set up the feed as shown in the demo. Once your feed is customized how you want, click Save.

3. Add the Instagram feed to your website

Note: If you imported the demo widgets, you should be able to skip this step! Visit your site to check if your feed is displaying.

1. Click "Back to All Feeds" (or go to Instagram Feed > All Feeds).

2. Under Shortcode, click the Copy icon:

3. Go to Appearance > Widgets. Drag a Custom HTML widget into the Instagram Footer widget area.

4. Paste your Instagram feed shortcode in the box, then click Save.