How to Turn Your Instagram Feed into a Landing Page

As Instagram gains popularity among influencers and startups, it is no wonder that most young entrepreneurs start off creating an Instagram account to gain traction and followers, prior to migrating to a fully-fledged website.

This strategy has worked out for many entrepreneurs ranging from food influencers and plant enthusiasts to makeup artists and fashion bloggers, among many others. When perfectly timed in accordance with Instagram trends, your Instagram profile can launch you on a journey to kick-starting your successful business.

If this sounds a lot like you, then you’re probably wondering what the best way to start a website to further your online business would be. Rather than opting for a site that needs constant updating to showcase your latest work, you can now make use of your hard-earned work on Instagram to populate your business page.

In this post, I’ll be taking a look at how anyone can create a sleek and effective landing page using only one plugin – Spotlight.

I’ll be using it in conjunction with the free Twenty Twenty WordPress default theme. Of course, you can apply this tutorial to the theme of your choice.

Let’s get to work.

Getting started

First things first, you’ll have to set up your WordPress website. Start off by purchasing a web hosting service, as well as a domain name. Secondly, you’ll need to install WordPress on your new website:

Spotlight

While WordPress comes with a lot of useful blocks, you will need additional plugins for specific needs.

Spotlight is an Instagram feed plugin geared towards beginners and experienced WordPress users alike. Its intuitive and easy-to-use interface ensures that anyone can design their feed in their own way, with no code required.

Pricing

The good news is that Spotlight is completely free! It can be found on the WordPress plugin directory by searching for Spotlight Social Photo Feeds.

If you’d like to take your feed to the next level, however, there is a premium version which I will be using for the rest of this tutorial.

The PRO version comes in two options for single-site licenses:

PRO – $59/year
PRO Lifetime – $179 (one time payment)

We’re offering an additional 20% off to WP Mayor readers on Spotlight PRO and PRO Lifetime licenses with the promo code: WPMAYOR20.

Spotlight is also available for multi-site licenses. For more information, check out their website.

Installing Spotlight

To install Spotlight, start by going to your WordPress dashboard sidebar. Look for Plugins > Add New. Search for Spotlight Social Photo Feeds, hit Install, and Activate.

Alternatively, clicking on the Download button on the Spotlight website takes you straight to the WordPress.org page.

If you’re using the PRO version of Spotlight, upload the premium version using the Upload Plugin button in the above screenshot and paste in your license key which you will receive by email.

You will be asked whether you want to opt in to security and feature updates notifications and non-sensitive diagnostic tracking. This helps the developers to continue improving the plugin, however, you may choose to skip this step.

There you go! Spotlight is now installed on your website.

Connecting Your Account

Connecting your account takes only 3 clicks.

You first have to choose whether you’re connecting a Personal or Business Instagram account. Given that you’re already using Instagram to start a business, you most probably have already upgraded your account to a Business or Creator one.

If not, there’s no need to worry. Although you can use Spotlight with a Personal account, I recommend you upgrade your Instagram profile for free. Not only can you gain access to insights and business features within Instagram, but you will also unlock some great features in the Spotlight plugin.

Once you’ve made your choice, authorize Spotlight to access your Instagram account and your feed will automatically show up in the live interactive preview within seconds.

Designing Your Feed

For this tutorial, I’ll be using the Masonry layout. I’ve set the plugin to show 20 posts in 5 columns and sorted them by date.

I’ve also set the images to open up in a popup box (or lightbox) to ensure that my visitors will be able to get a good look at my posts without having to go to the Instagram website or app. This neat feature means that your visitors will remain on your website for much longer.

For a modern look, I’ve set the outside padding to 0px to take on the full width of my landing page. I then set image padding to 40px to allow some breathing space around my images.

To achieve an even sleeker look, I’ve set the background color to full transparency. Doing so enables you to then change the landing page background color at any time, without the need to adjust your feed settings to have the same color.

Next, I set the post hover color to grey, with the Instagram Icon showing in white. I’ve taken this approach to let me visitors know that they’re actually viewing Instagram posts and that they can easily be transferred to my Instagram page to join in on the conversation there.

I then disabled the header entirely. In the Popup box section, you can choose to show the sidebar and the number of comments to display once a post has been selected. I’ve left the default settings here.

You can click on any post within the live interactive preview to get a preview of what your popup box will look like:

Spotlight PRO also lets you display captions and like and comment counts beneath all your posts. I’ve opted out of this. I then added a white Load More button to be able to bring in more posts at the click of a button. Lastly, I wanted to add a Follow button at the bottom of my feed.

Since most of my current traffic is through Instagram, I want to keep on promoting it and increasing my follower count. Having a Follow button will definitely help in this respect. You can edit the color and text to say whatever you feel best fits your brand.

Stories

If you’re using Instagram Stories to further promote your brand or business, you can easily display them on your new WordPress website in no time at all.

All you need to do is select the stories option in the Header section. Of course, you’d need to enable your header in this case.

For a full tutorial, check out our post on how to display Instagram stories on your WordPress website.

Now, every time you post a new story, an outline will appear around your profile image. Viewers can then click it and access your stories just like they would on the Instagram app or website.

Pro tip: Spotlight also lets you change your profile photo and user bio at any time under the Design tab to make them unique for your website.

Responsiveness

Our feed is looking pretty good at this point. Now we need to make sure it’s as stunning on desktop as it is on mobile and tablet.

By switching to tablet mode, Spotlight instantly gives you a pretty good picture of what your feed will look like. The feed looks great on the tablet view.

However, switching to mobile, the 5 column approach definitely won’t work.

When designing for mobile devices, you need to be aware of the ideal touchscreen target sizes. In this case, I’ll switch to a 2-column layout. The feed is automatically updated and ready to go.

At this point, it’s a good idea to save your work and name your feed. You can do this at any point of your design process.

Filtering and Moderation

Filtering allows you to exclude or include posts that contain certain words or phrases in their captions or hashtags. This is an easy and effective way to filter through your posts to only show specific photos or videos.

Say, for example, you love to post inspirational posts of other people’s work with the word “inspiration” in the caption. With Spotlight, you can easily and automatically exclude them from showing up on your website.

To do so, add the word “inspiration” under Hide posts with these words or phrases:

An additional feature is visual moderation. You can access this PRO feature right in your WordPress dashboard by selecting the Moderation tab. Here, all your posts will be displayed. All you need to do is manually select those posts you would like to show or hide in your feed.

Pro tip: You can also move from one post to another using your keyboard arrow keys and hit Enter to select or deselect your photos.

This kind of moderation gives you absolute full control over your content.

Embed Your Feed

Save your feed and copy the shortcode presented to you under the Embed tab.

Embed your Instagram feed using a shortcode

To display your feed, create a new page, and insert a Shortcode block. Paste in your shortcode and publish your page.

You can also use the dedicated widget if you want to display your feed in the footer or sidebar.

That’s it! Your feed is now live.

Additional Tip: Tagged and Hashtag Posts

Spotlight PRO allows you to display your tagged posts within your feed. This is only available to Business accounts, due to Instagram restrictions.

Tagged posts are a great way to add social proof to your website. In this case, I’ve asked clients to leave testimonials on their respective accounts and tag my profile. In this way, I can easily create a separate feed to display my happy clients!

Additionally, you can also import posts by hashtag from all over Instagram. This works well if you’re using hashtag campaigns.

I’ve used both these techniques to set up my Testimonials page.

Note: To get an overview of all your feeds and where they are being used, head over to Instagram Feeds > Feeds.

You can also connect an unlimited number of accounts by going to Instagram Feeds > Settings.

End Result

With a bit of styling and optional CSS applied to your Twenty Twenty theme, your landing page will look very similar to my following end result:

Conclusion

There are a lot of advantages that come with displaying your Instagram feed on your WordPress website. In doing so, you will help take your well-spent time and effort in creating your Instagram profile and take it to another level.

Potential clients can also now be referred to your dedicated space on the web, rather than having to search for your Instagram profile.

Instagram feeds need not look like typical footer feeds as is seen on most blogs. In this article, we’ve seen how you can create your very own stunning landing page using Spotlight.

Have you used Spotlight in a different way? Let us know in the comments section below.

Free

Pro

Demo

About Gabriella Galea

Gabriella is the Content Manager at WP Mayor. Architect by profession, designer by nature, she is dedicated to helping readers navigate the online world of WordPress. You can find her on Twitter @GabriellaGalea.