Facebook Page Element

Last Update: March 18, 2024

The Facebook Page Element allows you to add a Facebook 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

How To Use The Facebook Page Element

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

Configure the Element as required. Set the page URL and dimensions, and configure the various Facebook Elements to be displayed.

On the Design tab, you can set the Margins and alignment of the Element, and if you wish, you can add animation to the Element on the Extras tab.

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
Page URLEnter the URL of the Facebook Page you want to display.
DimensionsSet the element width and height. In Pixels. Width must be set between 180px and 500px.
LanguageChoose the language the facebook page should be displayed in.
TabsSelect the Facebook tabs you wish to display.
HeaderSelect the header size.
Cover PhotoChoose to show or hide the cover photo in the header.
Friends PhotosChoose to show or hide profile photos of friends that like the page.
Call To ActionChoose to show or hide the custom call to action button of the page.
Lazy LoadEnable/Disable lazy loading.
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%.
AlignmentChoose how the element should align inside the Column.

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