Facebook Page Element

16/04/2022

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.

View Element Demo Page!

Overview

How To Use The Element
Element Options
Global Options

How To Use The Facebook Page Element

Step 1 – Select where you’d like to place your Facebook feed. Add the Facebook Page Element from the Element Dialog.

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

Step 3 – 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.

870,055 Businesses Trust Avada

Get Avada

870,055 Businesses Trust Avada

Get Avada

870,055 Businesses Trust Avada

Get Avada

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

Page URL – The URL of the Facebook Page.
Dimension – Box width and height in pixels. Width has to be between 180 and 500.
Language – Choose the language the Facebook page should be displayed in.
Tabs – Tabs to render. Choose from Timeline, Events and Messages.
Header – Select header size. Choose from Large or Small.
Cover Photo – Show / Hide cover photo in the header.
Friends Photos – Show / Hide profile photos when friends like this page.
Call To Action – Show / Hide the custom call to action button if available.
Lazy Load – Enable / Disable lazy loading.
Element Visibility – Allows you to control the Separator’s visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.
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

Margin – Enter values including any valid CSS unit, ex: 4%.
Alignment – Select the alignment of the icons and the text.

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.