Back to contents

How to add an attractive Instagram feed to the page built with Elementor using JetElements Instagram widget

This tutorial uncovers the step-by-step way of using the Instagram widget from JetElements plugin to feed the page built with Elementor editor.

You will find out how to add a splendid Instagram feed to the web page via Elementor page builder using JetElements Instagram widget. You can change the layout and the style of the photos without ever touching a line of code.

Instagram widget

Preparation

Before working with Instagram widget, make sure you have created the Access Token and inserted it to the corresponding field in Elementor> JetElements Settings> Integrations

Follow this tutorial to do it in a few clicks.

Creating Instagram feed

Step 1 — Firstly, open the web page, to which you want to add the Instagram widget, and click the Edit With Elementor button at the top panel. Secondly, search for the Instagram widget, drag and drop it into a new section.

Instagram widget

Step 2 — Then, move to the Content > Instagram Settings block. Open the What to Display dropdown, where you should choose whether to display the Tagged Photos or My Photos.

 

Instagram Settings block

Step 3 — After step 2 is done, the Instagram publications will appear on the web page. Pick the period, so that the widget will update and pull the latest Instagram publications in the Cache Timeout dropdown. There are None, Minute, Hour, Day and a Week options.

Step 4 — Afterwards, you should choose the size of the items, the number of the items displayed (up to 18), enable linking, hide or show captions, etc.

Step 5 — Consequently, proceed to the Layout Settings block, where you can pick the Layout Type out of the Masonry, Grid and List options and from 1 to 6 columns in the Columns option.

Layout Settings block

Step 6 — Now it’s high time to switch to the Style block. In the General settings you can set the Items Margin, the Padding, the Border Type, the Box Shadow, and the Border Radius. If you want to add round images, set the radius as 200 px.

Step 7 — Go ahead to the Caption block, where you can style up the captions by means of changing the Color, Typography, Padding, Margin, Caption Width, Alignment, and Text Alignment options.

Style block

Step 8 — At that time, go forward to the Meta block. Here you can pick the Comments Icon, the Likes Icon, the Icon Color, the Icon Size, the Text Color, the Typography, the Background Type, etc.

Step 9 — Proceed to the Overlay block in order to customize the overlay. Here you can choose if you want the capture and meta be displayed all the time or only on hover. Set the preferable background type here as well.

Content Order and Alignment block

Step 10Content Order and Alignment block allows you to select the Caption Order and the Meta Order, as well as decide on the needed Cover Content Alignment.

Step 11 — Finally, press the Update button in the bottom-right corner of the Elementor page builder.

Congratulations, now you have a fabulous Instagram feed!