Timeline

Timeline

Welcome to the “Nav Steps” documentation. Looking to integrate a Nav Steps section into your website? Our widget allow you to showcase your products, services, or content in a captivating way. In this guide, we'll show you how to use the editor to customize your Nav Steps widget.

Step 1 : Open the Editor
Step2 : Add and Customize Topics
Step 3 : Configure Settings
Step 4 : Choose Colors
Step5 : Preview



Step 1 : Open the Editor
1. Go to  Timeline templates.
2. Click on "Edit" after choosing your template.





Step 2: Add and customize Topics

1. In this panel, you can easily add, remove, or rearrange Topics as needed.





2. Customize each topic by adding cards. 




3. Customize each card by uploading both the main image and bubble image,customize the button label, and include the button link.







4. Modify Topic title and description  to align seamlessly with your website's content.





Step 3: Configure settings

    Here, you'll handle the steps settings:

1. In the 'View' section, you have the option to display the header. Furthermore, you can customize several elements including style, position, widget width, padding, and whether to display the text description. Additionally, customize the position on mobile devices and adjust the scroll height.






2. Customize  'Categorie'   you have the option to display it or not , and then set the categorie round.






3. Customize 'cards' by modifying their size, layout, round, borders, spacing between cards, vertical margins, bubble size and content, pointer display, and behavior when opened in a new tab.





4. Customize the button settings by selecting whether to display or conceal the button, and adjust its position and round.








5. Customize the image by adjusting the roun ,  position ,aligment and size .






6. Customize the "Popup"by adjusting the button action ,round , border and image height.










Step 4: Choose Colors

1. Within this panel, you can select colors that match your website's design.






Step 5: Preview

Lastly, you can click on “Preview” to see how your Timeline widget looks on both desktop and mobile devices. After this, you can proceed to the next step.



Related Articles:
Calendar Events List Events