WordPress Process Timeline Widget

Timelines are a great way to show information in a clear and organized way. 

Instead of reading long paragraphs, users can quickly understand the information through a timeline. This makes your content easier to read and more engaging.

Well, timelines are commonly used to display company history, achievements, personal journeys, process steps, and more.

In this article, we will focus on process timelines and learn how to create a process step timeline in Elementor using Timeline Widget for Elementor plugin.

What is Timeline Widget for Elementor?

Timeline Widget for Elementor is a powerful timeline slider plugin that allows you to create stunning vertical and horizontal timelines to showcase your achievements, personal journey, or company history directly inside Elementor.

Timeline Widget For Elementor

Drag-and-drop vertical or horizontal timelines and customize them directly inside Elementor.

Create Timelines →

Steps to Create Process Steps Timeline

Follow these steps to add a Process Steps Timeline inside Elementor:

• From your WordPress dashboard, go to the Pages section.
• Edit the page with Elementor where you want to display your process timeline.
• From the Elementor widget panel, search for Timeline.

• Drag and drop the widget onto your page.
• A default process step timeline will appear.

Timeline Settings

Once the Process Steps Timeline widget is added, you can customize its appearance using the following settings:

Content Settings:

Inside the Content tab of the Process Steps Timeline widget, you will find two main sections:

• Process Steps
• Settings

Process Steps: The Process Steps section allows you to manage the content of each process step in your timeline.

From the Steps Settings:

• Badge Text: Choose the badge text for your process steps timeline.
• Icon: Select the icon type from: Icon, Image, or Text.
• Title: Enter the title of your process step.

• Description: Enter the description to provide instructions or important information for your process step.
• Accordion Image: If you have selected the accordion layout, then upload the accordion image
• Enable Title Link: Enable this option if you want to turn the step title into a clickable link. When enabled, you can add a URL to redirect users to another page.

From the Colors Settings:

• Icon Color: Choose the icon color of your process timeline.
• Icon Background Color: Set the background color of your icon.
• Badge Color: Style the text color of the badge.
• Badge Background Color: Choose the background color of the badge.
• Title Color: Choose the color of the step title in your process timeline
• Description Color: Set the description text color according to your preferences.
• Line Color: Style the main connecting line of your process timeline.

You can repeat these settings for each step.

• To add a new step, simply click the “Add Item” button.

Settings: This section lets you customize the appearance of your Process Steps Timeline. You can choose different layouts and style them according to your website design.

• Process Layout: Choose the layout for your process steps timeline from Vertical, Horizontal, and Accordion.
• Preset Styles: Apply a ready-made design to your timeline layout.
• Step Badge: Choose whether you want the step badge to appear on the icon or not
• Badge Position: Adjust the alignment of the step badge.
• Hide/Show Line: Use this setting to show or hide the connecting line between steps.
• Connector: Choose the connector style according to your preferences.
• Show Gap: Enable this option to add space between steps in 7the timeline.

Style Settings:

Using the style settings, you can customize the appearance of your process steps timeline elements.

• Step Icon Settings: Customize the icon’s color, background color, icon size, text size, box shadow, border style, border width, border color, and border radius.
• Badge Style: Adjust the badge text color, background color, typography, border type, border width, border color, border radius, padding, and margin.
• Title/Description Style: Change the title color, title typography, title text shadow, and title margin. Change the description color, description typography, description text shadow, and description margin.
• Container Style: Use Bottom Spacing to control the space below each step
• Hover Style: Customize hover icon color, icon background, title color, description color, badge color, badge background, line color, and choose a hover animation with adjustable animation color.
• Line Style: Modify the line color, width, border style, border width, and border color.
• Image Style: Adjust the height of the image, apply a background color, and round the corners using the border-radius option.

After being satisfied with all the changes, publish your page and preview it.

FAQs