Instagram Element

26/07/2022

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.

View Element Demo Page!

Overview

How To Use The Instagram Element

Step 1 – Connect your Instagram account in Options > Avada Builder Elements > Instagram.

Step 2 – Select where you’d like to place your Instagram feed. Add the Instagram Element from the Element Dialog.

Step 3 – Configure and style the Element as required.

Instagram Element
Avada Website Builder

824,323 Businesses Trust Avada

Get Avada
Avada Website Builder

824,323 Businesses Trust Avada

Get Avada
Avada Website Builder

824,323 Businesses Trust Avada

Get Avada

Connect Your Instagram Account

To connect your Instagram account, head to Options > Avada Builder Elements > Instagram. 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

Element Options

Location: The edit screen within each Element.

You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.

Note: 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 may look somewhat different.

General Tab

  • 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. (Only if Custom chosen in option above).

  • Image Focus PointSet the image focus point by dragging the blue dot.

  • Hover TypeSelect the hover effect type.

  • Image Link Choose where the image should link to. Select from None, Lightbox, or instagram Post

  • Image Link Target _self = open in same window, _blank = open in new window.

  • Load MoreChoose load more type. Choose from Load more Button or Infinite Scrolling.

  • Load More Button TextInsert custom load more button text.

  • Follow ButtonEnable/Disable follow button.

  • Follow Button TextInsert custom follow button text.

  • Element Visibility – Allows you to control the Separator’s visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.

  • 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 – Allows you to add a class name to the wrapping HTML element. The class name does not have to be unique, but all areas with the same name will reflect any changes made to the class.

  • CSS ID – Allows you to add an ID to the wrapping HTML element. The ID must be unique to each CSS ID.

View the Options Screen

Design Tab

  • 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 SpanControls if the buttons spans the full width/remaining width of row.

  • Buttons AlignmentSelect buttons alignment.

  • Buttons Styling – Use filters to see specific type of content.

  • Regular Options

  • 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.

  • Hover/Active Options

  • Load More Button Hover Text ColorSelect load more button hover text color.

  • Load More Button Background Hover ColorSelect load more button background hover color.

  • Follow Button Hover Text ColorSelect follow button hover text color.

  • Follow Button Background Hover ColorSelect follow button background hover color.

View The Options Screen

Extras Tab

  • Animation Type – Controls the column’s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.

  • Direction of Animation – Controls the direction of animation on the column. Choose between Top, Right, Bottom, Left, or Static.

  • Speed of Animation – Controls the speed of animation on the column. Choose between 0.1 to 5.

  • Offset of Animation – Controls when the animation will start. Choose between Default, Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of element enters viewport.

View The Options Screen

Global Options

  • Connect With instagram – Connect your Instagram account.

  • Check For New PostsSelect when check instagram for new posts.

  • Reset Instagram CachesReset all Instagram data.

View The Options Screen
Avada Website Builder

824,323 Businesses Trust Avada

Get Avada
Avada Website Builder

824,323 Businesses Trust Avada

Get Avada
Avada Website Builder

824,323 Businesses Trust Avada

Get Avada