Instagram Element
The Instagram Element shows the latest posts of your Instagram account as a grid or masonry layout on your site. New posts appear automatically, so a news page, a footer area or a landing page stays current without extra work.
Visitors can open each image in a lightbox or go to the post on Instagram, load more posts with a button or by scrolling, and follow your account with an optional follow button. The posts are stored on your site for a set time, so not every page view has to ask Instagram.
In this article: How To Use · Element Options · Tips · Related Elements
How To Use The Instagram Element
First connect your account once in Global Options, in the Instagram section of Tirenoa Builder Elements. The connection uses a professional (Business or Creator) Instagram account. Then add the Instagram Element to any column and set the Number Of Posts and the Layout. In the grid layout, Images Aspect Ratio and Image Focus Point crop all images to the same shape.
Choose a Hover Type and what a click does with Image Link: nothing, the lightbox or the post on Instagram. Load More adds a button or infinite scrolling for further posts, and Follow Button adds a link to your profile. Both buttons take custom texts.
On the Design tab set the Number Of Columns, Column Spacing and a border for every post, then arrange the buttons with Buttons Layout, Buttons Span and Buttons Alignment, each with its own text and background color.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
Options left on Default take their value from Tirenoa → Options → Tirenoa Builder Elements → Instagram. Change them there to style every Instagram at once.
Options with a small state switch next to them can be set separately for the normal, hover and active state.
Options marked as responsive can be set separately for large, medium and small screens; the screen icon next to the option switches between them.
General
| Heading | Description |
|---|---|
| Number Of Posts | Choose the number of instagram posts you want to display. |
| Layout | Select the instagram feed layout type. Note: Image lazy loading disabled for masonry layout. |
| Images Aspect Ratio | Select the aspect ratio of the images. Images will be cropped. |
| Custom Aspect Ratio | Set a custom aspect ratio for the images. |
| Image Focus Point | Set the image focus point by dragging the blue dot. |
| Hover Type | Select the hover effect type. |
| Image Link | Choose where the image should link to. |
| Image Link Target | Controls how the link will open. |
| Load More | Choose load more type. |
| Load More Button Text | Insert custom load more button text. |
| Follow Button | Enable/Disable follow button. |
| Follow Button Text | Insert custom follow button text. |
| Element Visibility | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| Element Sticky Visibility | Choose to show or hide the element, based on the current mode (normal or sticky) of its parent container. You can choose more than one at a time. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
Design
| Heading | Description |
|---|---|
| Margin | Enter values including any valid CSS unit, for example 4%. |
| Number Of Columns | Select the number of columns to display. |
| Column Spacing | Choose the spacing between columns. |
| Instagram Post Border Size | In pixels. |
| Instagram Post Border Color | Choose the border color. |
| Instagram Post Border Radius | Controls the instagram post border radius. In pixels (px), for example 1px, or “round”. |
| Buttons Layout | Select the layout of the buttons. |
| Buttons Span | Controls if the buttons spans the full width/remaining width of row. |
| Buttons Alignment | Select buttons alignment. |
| Load More Button Text Color | Select load more button text color. |
| Load More Button Background Color | Select load more button background color. |
| Follow Button Text Color | Select follow button text color. |
| Follow Button Background Color | Select follow button background color. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
| Animation Type | Select the type of animation to use on the element. |
| Direction of Animation | Select the incoming direction for the animation. |
| Animation Color | Select the color of the animation. |
| Speed of Animation | Type in speed of animation in seconds (0.1 – 5). |
| Animation Delay | Select the delay time after the animation starts(0 – 5). |
| Offset of Animation | Controls when the animation should start. |
Tips
- Until an account is connected, the element shows a notice that it is not connected instead of posts.
- How often the element checks for new posts is set with Check For New Posts in Global Options. After you delete or change a post on Instagram, use Reset Instagram Caches there to show the change at once.
- Image lazy loading is switched off in the masonry layout. Use the grid layout for long feeds further down the page.
- The element loads images from Instagram’s servers. Mention this in your privacy policy if your visitors’ data protection rules require it.