Creating a responsive Instagram feed for your website can do wonders for both your Instagram account and the website itself.
With mobile internet usage on the rise yet again – it accounts for almost half of the web’s traffic worldwide – it’s no wonder why so many websites nowadays are expected to be responsive right out of the box.
This means that not only is the website mobile-friendly, but it won’t have you zooming in to access buttons and squinting to read text. When it comes to WordPress plugins, you must ensure that the ones you’re using offer you built-in responsiveness to put your mind at rest.
Luckily for you, Spotlight is a responsive Instagram feed plugin that comes with built-in responsiveness features. It ensures that your Instagram feed looks great on all devices with absolutely no code required.
Not only that, but it also enables you to design one particular feed in different ways, depending on the device you view your website on.
In this post, we’ll take a look at how you can design a responsive Instagram feed for WordPress using Spotlight.
Setting up your feed
For the purposes of this tutorial, I’ve assumed that you’ve got Spotlight installed and set up on your WordPress site and you’ve connected your Instagram accounts. If you would like a more in-depth tutorial, check out our post on how to create an Instagram gallery in WordPress.
The first and most essential thing to figure out is where your feed is going to be shown on your website. Designing a feed for a sidebar is very different from designing a feed for a footer.
Once you’ve got that set, click on the Add new button on the Instagram Feeds page and follow the 3 simple steps as shown below.
Once you’ve created your Instagram feed and selected your Instagram account, go to the Design step.
You will notice that the live interactive preview is displaying your account’s Instagram feed. With every design customization you set from now on, the live preview customizer will automatically update itself – giving you a clear picture of what our feed will look like once it’s embedded on your page.
To start off, design your feed for desktop and once you’re happy with the way it looks, proceed to design the responsive versions of your feed.
Design a Responsive Instagram Feed
To design a responsive Instagram feed, Spotlight has a dedicated section at the top of the feed preview area. Click on the desktop, tablet, or phone icon and Spotlight will automatically take on your previous design options and show you what your feed will look like on any device.
As you will notice, Spotlight will automatically override some of your desktop settings for tablets and phones to make sure your feed looks good on all devices.
These presets can be overridden but they’ve been applied with out-of-the-box responsiveness in mind.
Change column settings while on tablet or mobile
While a 4 or 5 column layout can work great on desktop, switching to smaller screens results in much smaller images. To mitigate this, Spotlight lets you change the number of columns for each device.
To do so, click on the tablet or phone icon at the top of the preview area, go to the Feed section and change the number of columns, the number of posts shown, and in the case of the “Highlight” layout, as seen above, you can also change how often to highlight a post.
Pro tip: We suggest not going beyond 4 columns for tablets and 3 columns for phones.
Adjust outside and image paddings
Adding generous spacing around your images lets the whole layout breathe. The importance of blank space in design is not one that should be overlooked, even when creating a responsive Instagram feed.
However, problems tend to arise on mobile devices. Here you don’t have the luxury of allowing for so much ample space around your images. For this reason, Spotlight provides you with the ability to set different outside and image padding for each device.
To edit these settings, go to the Appearance section and adjust the outside and image padding accordingly for each device.
Beautify your typography and styling
Spotlight was designed to integrate with your website’s current theme. In fact, fonts are taken from your theme and applied to all the text in the feed such as headings, captions, and buttons.
While the font is applied automatically, you have full control over the size of your feed text through Spotlight. Let’s take a common example. You want to create an eye-catching header and have set your text size to 18px. This looks great on desktop but it is way too big for mobile devices.
With Spotlight, you can apply different font sizes for tablet and mobile devices. This ensures that your text looks great on any device. To set your text size, go to the Appearance tab and adjust your settings for each device.
Additionally, Spotlight’s default responsive design enables headers to go from default on desktop and tablet to centred on mobile. Since we don’t have the luxury of having much real estate on mobile devices, the central header with the Follow button below the feed looks much better.
Open posts in a lightbox
One final step you need to look out for is the way your posts will react once a visitor clicks on them. For desktops and tablets, we suggest opening up the images in a popup lightbox as seen below.
For mobile phones, to keep with the theme of a responsive Instagram feed, you can choose to open up your images directly on the Instagram app, giving your visitors a better experience.
To do so, set posts to open in a new tab from the Feed options and site visitors who have the Instagram app on their phone will be taken directly to it. Spotlight does that for you out of the box, which can help to boost your Instagram follow count.
Conclusion
Responsiveness is an important thing to keep in mind when designing your Instagram feed. The good news is that with Spotlight, you can do so easily directly within your WordPress dashboard.
Here’s an actionable list that you can use to quickly check your Instagram feed:
- Are your posts too small on mobile devices? Check the number of columns.
- Is there too much or too little space around your posts or feed? Adjust your outside and image paddings.
- Is there any text which is too large for mobile devices? Change the px size for each device.
- Are you using a popup box to display posts? Consider changing this setting to open in a new tab for mobile.
