Twitter Timeline Element

20/12/2021

The Twitter Timeline Element allows you to add a Twitter feed directly 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 Twitter Timeline Element

Step 1 – Select where you’d like to place your Twitter Timeline. Add the Twitter Timeline Element from the Element Dialog.

Step 2 – Configure the Element as required. Set the Username to display your Twitter Timeline, and there are range of options for sizing and what Twitter Elements to display.

Step 3 – On the Design Tab, you can adjust margins and alignment, and if you wish, you can animate 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

Username – Twitter username.
Dimension – Box width and height in pixels.
Language – Select twitter timeline language. Choose from Automatic or select a specific language.
Theme – Select twitter timeline theme. Choose from Light or Dark.
Header – Show or hide the header.
Footer – Show or hide the footer.
Borders – Show or hide the borders.
Border Color – Set the color of element borders, including the border between Tweets.
Transparent Background – Remove background color.
Scrollbar – Crop and hide the timeline scrollbar, if visible.
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.