Page example: https://www.invendagroup.com/about-us/
NOTE: As we’ve experienced a lot of issues with The Plus add-on, we decided not to use it anymore. So this tutorial is for reference only in case you need to troubleshoot the site that uses this plugin.
How to do...
1. Select the widget names “Timeline” – You can choose any style you want.
2. For this design, they want to have the image in each timeline, then you can select an icon or image depending on your mockup and attach it to there. Also, fill in the detail of time/content in each list to complete the timeline.
3. Lastly, add the custom CSS below to style the circle size, color and etc.
PS. Recommend to name the class to section, it will be easy to use for custom css.
<style>
/* Start custom CSS */
.timeline-seg .pt-plus-timeline-list.layout-both .point-icon.style-1 .timeline-tooltip-wrap {
height: 100px;
width: 100px;
}
.timeline-seg .pt-plus-timeline-list.layout-both .point-icon.style-2 {
background: transparent;
}
.timeline-seg .pt-plus-timeline-list.layout-both .timeline-track {
width: 1px;
}
.timeline-seg .timeline-item-wrap .timeline-item {
padding-top: 30px;
}/* End custom CSS */
</style>