Flickr Element

Last Update: May 25, 2025

The Flickr Element allows you to add a Flickr feed anywhere in your content.

Watch the video below for a visual overview of the Element, view the Element demo page for live examples, and read on to see the full list of options.

For privacy reasons YouTube needs your permission to be loaded.

How To Use The Flickr Element

Select where you’d like to place your Flickr feed and add the Flickr Element from the Element Dialog.

Configure the Element as required. On the General tab, set your Flickr ID to pull your own Flickr feed into the Element, determine the number of images to display and your preferred aspect ratio.

On the Design tab, set your preferred columns, spacing, and margins.

You can choose to animate the Element on the Extras tab if you wish.

Element 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

HeadingDescription
API KeyUse default API key or get your own from Flickr APP Garden.
Flickr IDEnter your Flickr ID to display your own feed. Get your flickr ID.
TypeSelect your flickr feed type.
Album IDEnter your Flickr Album ID. The album ID is the last, numerical part of your album URL.
Number Of ImagesChoose the number of images you want to display.
Images Aspect RatioSelect the aspect ratio of the images. Images will be cropped.
Custom Aspect RatioSet a custom aspect ratio for the images.
Image LinkChoose where the image should link to.
Image Link TargetControls how the link will open.
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
Number Of ColumnsSelect the number of columns to display.
Column SpacingChoose the spacing between columns.
MarginEnter values including any valid CSS unit, ex: 4%.

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