Divi Timeline Module for Visual Builder

(5 customer reviews)

$35.00

Timelines provide a logical, clean way to tell your story. It enables a viewer to understand temporal relationships quickly. Use this module to explain your ideas more effectively. This 3 in 1 module can design horizontal timelines, vertical timelines and info lists with connected lines to showcase steps or process of something.

Live Demo Test Drive This Plugin

 

Also available in: The bundle package with BIG saving


Don’t have Divi? get it first from CLICK HERE

Description

Timelines provide a logical, clean way to tell your story. It enables a viewer to understand temporal relationships quickly. Timelines are the most attractive way to showcase information and events that happen over time. Use the full power of Divi visual builder to create stunning timeline designs! This is the First “Original” Module with Divi Visual Builder Support.

* The most trusted and worry-free ORIGINAL Timeline module for Divi since 2016!

* This 3 in 1 module can design horizontal timelines, vertical timelines and info lists with connected lines to showcase steps or process of something.

Features:

+ Both Vertical and Horizontal timeline layouts in one module!

* First select the layout in ‘Main Options’ panel and then under each timeline card assign the same layout in ‘Card Layout’ selection.

– Vertical Timeline: Side by side one card after the other, Two cards on either side, One sided.

– Horizontal Timeline: Top, Bottom, Side by side one card after the other.

+ Apart from timelines you can use this to create info lists : Under horizontal timeline layout just set the number of items to show at a time in the timeline to all items.

+ Add Buttons, Image lightbox to timeline cards.

+ Horizontal timeline carousel navigation styles – arrows, dots.

+ Load of design customization options.

+ Use Divi default icons or your own images to feature in the timeline. You can also add texts as timeline badges.

+ Various animations and on scroll effects for timeline cards, badges and the connector line.

+ The interface is similar to default Divi Tabs module so you already know how to use this.

+ Fully mobile responsive.

Live Demo

Test Drive This Plugin


Documentation:

1. In the WordPress dashboard, go to Plugins > Add New

2. Click Upload Plugin

3. Select the zipped file from your computer

4. Click Install Now

5. When you see “Plugin installed successfully”, click Activate Plugin.

You can find the ‘Divi Timeline’ module inside the Divi builder module selection pan. All the plugin settings are very similar to the default Divi Tabs/Accordion module so there’s no special learning curve.

…..

The plugin configurations are pretty straight forward. In the main module window you will find ‘Add New’ item option and other overall design settings. You can fine tune each timeline node to your taste under each item level settings panel. Open help tips if you need clarification on module settings.

* Main panel setting affect the whole timeline design.

* Child item settings apply to that node only.

* You can start by setting up overall design of the timeline layout under main options. Then fine tune these overall values by going to each child item settings.

…..

If you are having trouble with icons then please try disabling ‘Dynamic Icons’ option under performance settings. Elegant Themes recommend to keep this option disabled when using third part Divi products.

“This option (Dynamic Icons) is disabled by default if you are using a child theme or custom Divi module. If your child theme or third part Divi module uses the full Divi icon set, then this option should remain disabled.”


Terms of Sale:

You can use this product for both personal and commercial use on unlimited websites – 3 websites can receive auto updates through license mechanism (1 purchased license = 3 websites) or you can manually update unlimited number of sites.
You are not allowed to resell or redistribute this product or any of its parts to anyone else.

You get product updates for lifetime – We will make every attempt to ensure that our products are compatible with all future releases of Divi. You can access product updates through your website admin dashboard or ‘My Account‘ page here (check version number to see if there’s an update).

For product support you can directly contact us. We provide customer support for life of the product – Support is provided for bug fixes only. If you need customisation support you will have to pay our hourly rate.

Scope of Support – Our main intention by providing product support is to help uncover bugs, add frequently requested features and overall improve the product for everyone. We reserve the right to dismiss any support request that’s outside of this support scope.

Due to the nature of digital products as they cannot be returned, it’s impossible to prevent fraud and still offer refunds. Hence refund requests are expressly denied. You are encouraged to use our test drive facility to try the product before you buy.

Compatible with PHP version 5.5 or higher

Changelog

Version: 1.0 Initial release

Version: 2.0 – Divi Visual builder support

Version 3.0.4: Bug fixes and feature additions

Solutions

• To manually update this product first compare installed version number in your site with the product version number in your my account page here. If the version number is higher then you need to download that new zip file and install to your site. Once installed WordPress will take care plugin/theme upgrade process.

………..

— Old Solutions that may no longer necessary —
 
Use this snippet to align timeline nodes with timeline boxe’s arrow,

.timeline .timeline-panel::after, .timeline .timeline-panel::before {
top: 45%;
}

If it didn’t work then try adding !important after 45%.
If you want to fine tune the alignment, change 45% to the number that fits best.
 

…… Text Badge Overlap Fix ……

When you are using ‘Text Badge’ and enabled Circle Border around it you might see that the Badge overlaps the text box blurb (In mobile and tablet screen sizes). Please use the following snippet and adjust it for your taste to fix this,

span.et-pb-icon.timeline-text.text-circle.text-circle-border {
border: 2px solid #0c71c3;
width: 100px;
text-align: center;
padding: 4px 4px;
font-size: 16px;
}

@media screen and (max-width: 1025px) {
span.et-pb-icon.timeline-text.text-circle.text-circle-border {
font-size: 14px;
margin-left: -40px;
width: 80px !important;
}
}

@media screen and (min-width: 480px) {
span.et-pb-icon.timeline-text.text-circle.text-circle-border {
margin-left: 0px !important;
}
}

Divi Timeline Text Badge Fix
 

…… Remove Timeline List Item Styles ……

If you just want a plain timeline list item design without the styles then following codes will help you achieve it,

.timeline .timeline-panel {
border: none;
box-shadow: none !important;
background: transparent;
}
.timeline .diti_timeline_item:nth-of-type(odd) .timeline-panel:before {
display: none;
}
.timeline .diti_timeline_item:nth-of-type(odd) .timeline-panel:after {
display: none;
}

.timeline .diti_timeline_item:nth-of-type(odd) .timeline-panel {
    border: none !important;
    background: none !important;
    box-shadow: none !important;
}

.timeline .diti_timeline_item:nth-of-type(even) .timeline-panel {
    border: none !important;
    background: none !important;
    box-shadow: none !important;
}

.timeline-panel::after, .timeline-panel::before {
	display: none !important;
}

 
Remove Divi Timeline item styles

5 reviews for Divi Timeline Module for Visual Builder

  1. zapcat (verified owner)

    Tested and works well. Great that it can be used alongside the visual builder also.

    Website: http://www.tarl.pennylamont.com/evidence/

    Preview:

  2. [email protected] (verified owner)

    Perfect module for Divi timeline, very flexible !
    Very responsive customer service.
    I recommend it

  3. cryptoiskey (verified owner)

    Honestly, I looked for so many solutions to build a timeline/roadmap. I wanted something that would work with my Divi theme and gave me the ability to customize. This plugin is perfect. I wanted to find a way to change the border color for the outline and arrow on the node, and support through Facebook was right there when I needed them….very satisfied customer and will be looking at more of their products for the future….

  4. sabkop (verified owner)

    Very nice plugin.
    Responsive and customizable.
    Also when you need support, they are very quick and helpful.

    Preview:

  5. Mark Brookes (verified owner)

    Good plugin that does what it is designed to do.

    The support was amazing when I had a small issue, I had a very quick response to my question and resolved with the hour.
    Thank you Ultimate Divi, i’ll definitely use you again.

Only logged in customers who have purchased this product may leave a review.