Vivienne - Instagram Feed

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): 7
  • Number of Posts (Mobile): 8
  • Columns (Desktop): 7
  • Columns (Tablet): 7
  • Columns (Mobile): 4

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.

Once you've connected your Instagram account and customized the feed, your Instagram feed should appear on your site automatically, as long as you imported the demo.

Customize the Instagram Text Overlay

Customize the Follow Along text and @ link

  1. Go to Appearance > Widgets > Footer 6. 
  2. Click your cursor on any of the text to change it to your desired text.
  3. To change the @viviennetheme link, click on the link. A URL box will appear. Click on the pencil icon to edit the URL, then add your own Instagram profile URL.

Change the colors of the overlay

Change the background color: In Footer 6, click on the white space around the text to select the Section. In the block settings on the right, click Style. Select a new color under Background Color.

Change "Follow Along" text color: Click on the Heading block. In the block settings on the right, click Style. Select a new color under Color.

Change "@viviennetheme" link color: Click on the Heading block. In the block settings on the right, go to General > Link Settings. Select a new color under Link Color.

Remove the overlay

If you want to remove the overlay, go to Appearance > Widgets > Footer 6 and click on the white space around the text to select the Section. In the Toolbar, select the 3 vertical dots icon and click "Delete."