X Timeline Element

Last Update: August 29, 2025

The Avada X (formerly Twitter) Timeline Element enables you to integrate an X social feed directly into your website. Watch the video below for a visual overview of the Element, view the Avada X Timeline Element page for live examples, and read on to see the complete list of options.

For privacy reasons YouTube needs your permission to be loaded.

View Element Page!

View Avada Builder Elements!

How To Use The X Timeline Element

To start, add the Avada X Timeline Element into your desired column. Configure the Element as required. Set the Username to display your X Timeline, and there are a range of options for sizing and what X Elements to display.

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

Heading		Description
X Username		Enter the username of the X timeline you want to display.
Dimensions		Set the dimensions of the X timeline. In pixels.
Language		Choose the language the twitter timeline should be displayed in.
Theme		Select the theme of the twitter timeline.
Header		Choose to show or hide the header.
Footer		Choose to show or hide the footer.
Borders		Choose to show or hide the borders.
Border Color		Set the color of element borders, including the border between tweets.
Transparent Background		Choose whether you want a transparent timeline background.
Scrollbar		Choose to show or crop and hide the timeline scrollbar, if visible.
Element Visibility		Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
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		Add a class to the wrapping HTML element.
CSS ID		Add an ID to the wrapping HTML element.

Design

Heading		Description
Margin		Enter values including any valid CSS unit, ex: 4%.
Alignment		Choose how the element should align inside the Column.

Extras

Heading		Description
Animation Type		Select the type of animation to use on the element.
Direction of Animation		Select the incoming direction for the animation.
Animation Color		Select the color of the animation
Speed of Animation		Type in speed of animation in seconds (0.1 - 5).
Animation Delay		Select the delay time after the animation starts(0 - 5).
Offset of Animation		Controls when the animation should start.