X Timeline Element
The X Timeline Element embeds the public timeline of an X account on your page. Visitors see the latest posts of that account in a scrollable box, directly in your layout, without leaving the site. New posts appear there automatically, so you never have to update the page by hand.
It is useful for news sections, event pages or a company page that should show what you are currently posting. You choose the size, the language, a light or dark theme, and which parts of the timeline frame (header, footer, borders, scrollbar) are shown.
In this article: How To Use · Element Options · Tips · Related Elements
How To Use The X Timeline Element
Add the X Timeline Element to any column and enter the account name in X Username, without the @ sign. Set the width and height in Dimensions (in pixels) and pick a Language, or leave it on Automatic.
Choose the Theme that fits the background of your section. Header, Footer, Borders and Scrollbar switch those parts of the timeline on or off, Border Color colors the lines between posts, and Transparent Background lets your section color show through. On the Design tab set the Margin and the Alignment of the box inside the column.
The timeline itself is loaded by X’s own script in the visitor’s browser, so its content and layout come from X. When privacy embeds are enabled in Global Options, a placeholder is shown instead until the visitor agrees to load content from X.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
Options marked as responsive can be set separately for large, medium and small screens; the screen icon next to the option switches between them.
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, for example 4%. |
| Alignment | Choose how the element should align inside the Column. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
| 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. |
Tips
- The timeline loads an external script from X. If your site asks for consent before loading third-party content, keep privacy embeds switched on so the timeline only loads after the visitor agrees.
- Border Color has no effect when Borders is set to Hide.
- A fixed height keeps the page layout stable while the timeline loads. Without it, content below the element can jump when the posts appear.
- Posts shown in the timeline are loaded in the browser and are not part of your page’s text, so they do not add content for search engines.
- Use Element Visibility to hide the timeline on small screens if it takes too much space on phones.