The Timeline Elementor widget is a great way to display events in chronological order, personal/company history, your projects, or any other information. Such a fully responsive attractive storyline helps to catch the attention of your visitors and increase conversion. It can automatically adapt from horizontal to vertical mode at a certain screen width that you can specify in the settings.
For further work, you need the Elementor to be installed on your site. You can download it from wordpress.org
Open or create a page using Elementor and drag the widget to a page using the Elementor editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:
Content tab
On the Content tab, you can manage the basic settings of Timeline Elementor widget such as display modes, item layouts, adding content and other options.
General
The section with basic storyline configuration.
Mode
Select one of the available timeline display formats:
Vertical
- Vertical start position – select which side the first item will be placed on: left or right.
- Vertical trigger – define the distance from the bottom of the screen, in percent or pixels, that the items slide into view.
Horizontal
- Force vertical mode (px) – when using the timeline in horizontal mode, define at which viewport width it should revert to vertical mode.
- Horizontal start position – select which position the first item will be placed on: top or bottom.
- Move Items – specify the number of items that will be moved when scrolling.
- RTL mode – defines whether the timeline should start from the right. This overrides the startIndex setting.
- Start index – specify which timeline item will be displayed first.
- Visible items – specify the number of items to be displayed in the viewport.
Layout
The section where all elements of the timeline widget item can be added, configured and ordered.
Priority
Add layout elements and order them according to your needs.
To add a new element, click “Add Item” and select one of the available item types: Image, Title, Description, Button.
Content
Add and manage the timeline widget item with the necessary content.
To add a new event, click “Add Item” and fill or edit all the fields.
- Title – a field to enter the title of the item.
- Choose Image – select an image from the media library for a new item.
- Description – a text area to enter the description of the item.
- Button Text – a field to enter the button title of the item.
- Link – a field to enter the link which will be applied for the button.
Style tab
On the timeline widget styles tab, you can configure everything related to the visual style of elements: colors, typography, backgrounds, borders, and more.
Item
The styles will be applied to each layout element of the timeline item. You can configure separate elements like title, description, image, or other.
- Top/Left item indent – specify the indents of the top (horizontal mode) or left (vertical mode) item for different devices.
- Bottom/Right item indent – specify the indents of the bottom (horizontal mode) or right (vertical mode) item for different devices.
- Compact layout – controls the spacing between elements to make the timeline block more compact.
- Padding – the setting allows managing the padding of the items in different units(px, em, %) for desktops, tablets, or phones.
- Typography – this group of settings controls everything about typography: font size, font weight, line height, decoration, and other parameters.
- Alignment – manage the current block alignment (left, center, right) for all devices or separately for desktops, tablets, or mobiles.
- Сolor lines & dots – specify the color and opacity for the line and dots of the current block using the color picker.
- Point background color – specify the background color of the timeline point.
NORMAL/HOVER
The timeline items style settings for different states.
- Color– specify the font color and opacity for the text of the current block using the color picker.
- Background Type – the setting changes the background of the current block items. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Title/Description
- Width – specify the width of the current element in different units(px, %) for all devices or separately for desktops, tablets, or mobiles.
- Margin – the setting allows managing the margin of the current element in different units(px, %) for desktop, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Color– specify the font color and opacity for the text of the current block using the color picker.
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
- Text Shadow – the setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal, and vertical shift.
- Alignment – manage the current block alignment (left, center, right) for all devices or separately for desktops, tablets, or mobiles.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Image
- Width – specify the width of the current element in different units(px, %) for all devices or separately for desktops, tablets, or mobiles.
- Margin – the setting allows managing the margin of the current element in different units(px, %) for desktop, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Alignment – manage the current block alignment (left, center, right) for all devices or separately for desktops, tablets, or mobiles.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
- CSS filter – the option allows you to add various CSS filters for the image box as Blur, Brightness, Contrast, Saturation, Hue.
Button
- Width – specify the width of the current element in different units(px, %) for all devices or separately for desktops, tablets, or mobiles.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Color– specify the font color and opacity for the text of the current block using the color picker.
- Typography – this group of settings controls everything about typography: font size, font weight, line height, decoration, and other parameters.
- Text Shadow – the setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal, and vertical shift.
- Alignment – manage the current block alignment (left, center, right) for all devices or separately for desktops, tablets, or mobiles.
NORMAL/HOVER
The button style settings for different states.
- Color – specify the font color and opacity for the text of the current block using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Navigation Arrows
The section with settings is available when the horizontal timeline display mode is selected.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
NORMAL/HOVER
The navigation arrows style settings for different states of the timeline widget.
- Background Type – the setting changes the background of the nav arrows. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the nav boxes and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the nav boxes for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the nav boxes and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.