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.
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.
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.
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.
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.
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.
Step 10 — Content 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!