# Timeliner - Timeline for Elementor

- created: 05/12/2021
- latest update: 05/12/2021
- by: merkulove
- elementor.merkulov.design/timeliner/

WordPress plugins Documentation

### Overview

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 Timelines
Unlimited Timeline Items
Includes Templates for Elementor
Suitable for all kind of Layouts and Templates
Crafted for Elementor Builder
Perfect Solution for Popular Elementor Themes
Completely 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:

- Content
- Style
- Advanced

## 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

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.