Timeliner is a simple and lightweight WordPress plugin for Elementor to create a timeline for your website in a horizontal or vertical format. It 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.
Using the custom content, you can add any kind of necessary information to your timeline. Customize a display layout of the block: create, delete, reorder or copy each of the elements such as Image, Title, Description, Button. With the available options, you can control the number of displayed timeline entries per screen or specify the first item. The plugin allowing to create as many storylines as your project requires providing space for creativity. The Timeline WordPress plugin can be useful for different types of sites like personal/corporate blogs, portfolios, galleries, lifestyle, news portals, and many others.
Horizontal & Vertical TimelinesUnlimited Timeline ItemsIncludes Templates for ElementorSuitable for all kind of Layouts and TemplatesCrafted for Elementor BuilderPerfect Solution for Popular Elementor ThemesCompletely Cross-Browser Support
The item package includes 5 prepared templates to help you get started quickly with the Timeline and will inspire you to create your unique project.
Flexible and straightforward style settings will help you set up the display of each element in accordance with your requirements and wishes. Change the color, typography, background color, border, margins, padding for timelines items or apply CSS filter for images of entries to get the unique result. All this can be configured directly from the Elementor’s interface and does not require additional code knowledge.
Timeline for Elementor is exceptionally compatible with all modern browsers. It does not matter which browser users view your site: Chrome, Firefox, Opera, Safari, or Edge. Everything will look great on all devices and in all browsers.
Features of the Timeliner WordPress plugin for Elementor
Horizontal and vertical display modes
Changing the timeline display mode depending on the screen width
Settings the number of visible items
Setting the start item number
Custom content of items
Сustom items layout
Flexible style settings
Perfect for Elementor 2.5 and higher
Works well with all WordPress themes built on Elementor
Totally Seo Friendly
Included pot file for quick translation on any language
Perfect for RTL direction
Fast and smooth installing
Tested and compatible up to WordPress 5+
Lightweight and Fast
All major browsers supported Chrome, Firefox, Safari, Opera, and Edge
Easy to use and customize with modern User Interface
Installation Guide and detailed Users Manual
Six months Included Support for CodeCanyon buyers
The plugin installation takes only a few seconds. Also, you do not need to make any additional settings. The plugin is ready to work immediately after installation – you only need to install and activate it in WordPress. Read more about capabilities and settings in the Online Documentation.
Installing
Installing the WordPress plugin is quick and straightforward. After you have downloaded the archive with the plugin, you will see the file with the plugin inside. Unzipped purchased the product you will see inside the archive with the plugin pluginname.zip There are two ways to install it:
Installation of the Plugin through the WordPress Admin panel ( Recommended for most users )
STEP 1
First of all, open WordPress admin area login page and login in into WordPress as Admin. To do this visit http://yoursitename/wp-admin
STEP 2
Go to Plugins > Add New
Add New Plugin to WordPress
STEP 3
Click Upload Plugin Button
Upload New Plugin to WordPress
STEP 5
Choose archive with Plugin and press Install Now Button
STEP 6
After Installing go back to the Plugins page and click Activate below plugin title
Activate Installed Plugin
Installation the plugin through FTP or build-in File manager
STEP 1
Use Login and Password to connect to your web-server via FTP or use your hosting file manager.
STEP 2
Upload archive with plugin to /wp-content/plugins
STEP 3
On next step Unzip the archive with the plugin
STEP 4
Installing WordPress Plugin is almost finished. Go to the Plugins page and click Activate below plugin title. You can find out your username and password on the website of your hosting provider.
Activate Installed Plugin
After installing and activating the plugin, you can go to settings of the Plugin. Also, you can read more helpful articles about WordPress Themes and WordPress Plugins.
Settings
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 to start using the timeline widget. You will find the widget at the end of the general section.
Widget icon
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:
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
Timeline vertical mode
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
Timeline horizontal mode
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.
Elements layout settings of the Timeliner
To add a new element, click “Add Item” and select one of the available item types: Image, Title, Description, Button.
Layout item settings
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.
Item content settings
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.