Timeline Plus – Addon WPBakery Page Builder (Formerly Visual Composer)

Introduction to Timeline Plus - Addon WPBakery Page Builder (Formerly Visual Composer)

WPBakery Page Builder, formerly known as Visual Composer, is a popular page builder plugin for WordPress that allows users to create custom layouts for their websites without coding knowledge. Timeline Plus is a powerful addon for WPBakery Page Builder that enables you to create a variety of timeline layouts and add custom animations to them. With Timeline Plus, you can create engaging, interactive, and visually appealing timelines for your website that showcase important events, achievements, or milestones.

Getting Started with Timeline Plus

Before you start, make sure you have WordPress installed on your website, and you have WPBakery Page Builder and Timeline Plus installed and activated. Here's a brief overview of the steps:

1. Install and activate WPBakery Page Builder.
2. Download and install Timeline Plus from the official website.
3. Activate Timeline Plus from the Plugins page in your WordPress dashboard.
4. Create a new page or edit an existing one using WPBakery Page Builder.
5. Add a timeline element to your page using the WPBakery Page Builder interface.

Tutorial: How to Use Timeline Plus - Addon WPBakery Page Builder (Formerly Visual Composer)

Setting Up a Timeline

1. Log in to your WordPress dashboard and navigate to the page where you want to add a timeline.
2. Click on the "+" icon in the WPBakery Page Builder toolbar to add a new element.
3. In the "Add Element" pop-up window, search for "Timeline" and click on the "Timeline Plus" icon.
4. Click on the "Add" button to add the timeline element to your page.

Configuring Timeline Settings

1. You will see a new set of options in the "Element Settings" panel, specifically designed for Timeline Plus.
2. In the "Timeline Settings" tab, you can configure various options, such as:
   • Timeline layout: Choose from various layouts, such as horizontal, vertical, or circular.
   • Timeline style: Select from various styles, such as classic, modern, or flat.
   • Timeline width: Set the width of your timeline in pixels or percentages.
   • Timeline height: Set the height of your timeline in pixels or percentages.
   • Show/hide caption: Toggle the display of captions for each timeline event.
3. Click "Save" to save your changes.

Adding Events to Your Timeline

1. To add an event to your timeline, click on the "Add New Event" button in the "Events" tab.
2. In the "New Event" pop-up window, enter the details of your event, including:
   • Event name: Enter a brief title for your event.
   • Event date: Select the date and time of your event.
   • Event description: Enter a brief description of your event.
   • Event color: Choose a color to highlight your event on the timeline.
3. Click "Save" to add the event to your timeline.

Customizing Events

1. To customize an event, click on the "Edit" button next to the event name in the "Events" tab.
2. In the "Edit Event" pop-up window, you can adjust the event details and add additional information, such as:
   • Custom CSS class: Add custom CSS classes to style the event.
   • Open/Closed: Toggle the display of the event detail panel.
   • Description: Add a longer description of your event.
   • Icon: Add a custom icon to represent the event.
3. Click "Save" to update the event.

Configuring Animations

1. To add animations to your timeline, click on the "Animations" tab in the "Element Settings" panel.
2. You can choose from various animations, such as fade in, slide in, or zoom in.
3. Adjust the animation settings to customize the animation duration, delay, and easing effects.
4. Click "Save" to save your changes.

Final Touches

1. Now that you have set up your timeline, you can add more events, adjust the timeline settings, and customize the animations to match your website's design.
2. Preview your timeline and make any necessary adjustments.

Conclusion

Timeline Plus is a powerful addon for WPBakery Page Builder that allows you to create custom timelines for your website. With this tutorial, you should be able to set up a timeline, add events, customize the timeline settings, and animate the timeline to create engaging and interactive content. Whether you're creating a business timeline, a personal timeline, or a project timeline, Timeline Plus has got you covered.