Instagram Element

Last Update: March 19, 2024

The Instagram Element allows you to add an Instagram feed anywhere in your content. Read the document to see the full range of options, and watch the video below for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.
I Accept

Connect Your Instagram Account

Before using this Element, you need to connect your Instagram account in Options > Avada Builder Elements > Instagram. Here, you will see a Connect With Instagram button. This opens Instagram ina new tab, where you can connect your feed to your website.

There is also a global option to determine how often you check for new posts. Set this as you prefer. You can choose from Every 30 minutes, Every Hour, Every 6 Hours, Every 12 Hours, or Every Day. There is also a Reset instagram Caches option if you are having cache issues with your feed.

Instagram Element > Permission

How To Use The Instagram Element

Once you have connected your account, add the element to your desired column.

Then it’s just a matter of configuring and styling the element to your liking. You can control the layout, and the number of images displayed, and a number of other things. Read below for a description of all Element options.

Element Options

Please note that the displayed option screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen look somewhat different.

General

HeadingDescription
Number Of PostsChoose the number of instagram posts you want to display.
LayoutSelect the instagram feed layout type. Note: Image lazy loading disabled for masonry layout.
Images Aspect RatioSelect the aspect ratio of the images. Images will be cropped.
Custom Aspect RatioSet a custom aspect ratio for the images.
Image Focus PointSet the image focus point by dragging the blue dot.
Hover TypeSelect the hover effect type.
Image LinkChoose where the image should link to.
Image Link TargetControls how the link will open.
Load MoreChoose load more type.
Load More Button TextInsert custom load more button text.
Follow ButtonEnable/Disable follow button.
Follow Button TextInsert custom follow button text.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
Element Sticky VisibilityChoose 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 ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Design

HeadingDescription
MarginEnter values including any valid CSS unit, ex: 4%.
Number Of ColumnsSelect the number of columns to display.
Column SpacingChoose the spacing between columns.
Instagram Post Border SizeIn pixels.
Instagram Post Border ColorChoose the border color.
Instagram Post Border RadiusControls the instagram post border radius. In pixels (px), ex: 1px, or "round".
Buttons LayoutSelect the layout of the buttons.
Buttons SpanControls if the buttons spans the full width/remaining width of row.
Buttons AlignmentSelect buttons alignment.
Load More Button Text ColorSelect load more button text color.
Load More Button Background ColorSelect load more button background color.
Follow Button Text ColorSelect follow button text color.
Follow Button Background ColorSelect follow button background color.

Extras

HeadingDescription
Animation TypeSelect the type of animation to use on the element.
Direction of AnimationSelect the incoming direction for the animation.
Animation ColorSelect the color of the animation
Speed of AnimationType in speed of animation in seconds (0.1 - 5).
Animation DelaySelect the delay time after the animation starts(0 - 5).
Offset of AnimationControls when the animation should start.

In this article