Step 2: Adjusting layout and style of your Instagram Feed widget
App customization has become a vital element in optimizing user experience. By offering options to modify layouts and change design, apps can cater to individual preferences and attract more attention. This article will help you chose the desired layout in your Instagram Feed widget and adjust its settings according to your liking.
In this article
Choosing Layout of your Feed
The Layout tab features two available feed templates – Slider and Grid.
The choice between these two layouts relies on how you want to display your widget. The Slider layout is ideal when you would like your Instagram Feed widget to be one of the elements on your webpage (for example, when it is placed above the footer or within a social section). If you want to dedicate an entire page to your Instagram Feed and have it occupy the entire space, the Grid layout is the optimal choice.
Columns and Rows
In this section, you can set your widget's dimensions, both for mobile and desktop devices:
While Auto Mode is suitable for most cases, if you require a specific number of columns and rows, it's recommended to switch to Manual Mode. In Manual Mode, you have the flexibility to adjust the desired number of columns and rows in the corresponding sections. Additionally, you can customize the gap between images and modify the width of your feed to suit your preferences:
For configuring display parameters on mobile devices, navigate to the Mobile Optimization section. Here you can specify the breakpoints to set the columns, rows and space between images in the feed depending on the screen size. The section provides three default resolutions with predefined settings that can be modified or retained. Additionally, you have the option to delete, duplicate, or add breakpoints as needed:
For more detailed information on resolving issues related to the responsiveness of Instagram Feed on mobile devices, we recommend taking a look at the following article - Why Instagram Feed is not going responsive on mobiles.
HeaderThis section allows you to choose which elements to display in the widget's header:
In this section, you can also select which header elements you want to display or hide the header entirely:
Slider SettingsThe Slider Settings section will appear only if the chosen layout is Slider:
This is where you can activate/deactivate controls, as well as adjust animation speed and autoplay:
- Arrows Control - Easily toggle the arrows in the widget on or off.
- Drag Control - Enable this option for effortless scrolling through the feed by simply dragging and moving posts, eliminating the need for arrows.
- Animation Control - Adjust the speed at which posts move in the widget when using arrows.
- Autoplay - Want your feed to scroll automatically? This option will make it happen.
To change the title of your feed, go to the Feed Title section:
Post StyleThe Post tab allows you to customize the appearance of the posts in your feed. You can pick one of the two post styles in the Post Styles section:
This option allows you to manage the information displayed in the popup:
Post Click Action
In this section, you can choose what will happen when a user clicks on a post. You can have the image open as a popup, direct users to Instagram to view the image there, or you can choose None. In the latter case, clicking on an image in the feed won't do anything:
Call to Action Buttons
Call to Action Buttons are used to draw more attention to a post, and to encourage your users to take some actions. Please note that buttons will appear only in the popup, not in the gallery itself:
For more detailed instructions on how to adjust Call to Action buttons in your widget, please refer to the following article - Setting up Call to Action Buttons in Instagram Feed.
Well done! Now you can move to the next step and adjust the colors of your widget!