Timeline
Timeline
Welcome to the “Nav Steps” documentation.
Looking to integrate a Nav Steps section into your website? Our block 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 block.
Step 1 : Open the Editor
2. Click on "Edit" after choosing your template.
class="flex justify-center items-start h-auto w-auto" alt="">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.
class="flex justify-center items-start h-auto w-auto" alt="">3. Customize each card by uploading both the main image and bubble image,customize the button label, and include the button link.
class="flex justify-center items-start h-auto w-auto" alt="">4. Modify Topic title and description to align seamlessly with your website's content.
class="" alt="">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, block 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.
class="flex justify-center items-start h-auto w-auto" alt="">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.
class="flex justify-center items-start h-auto w-auto" alt="">5. Customize the image by adjusting the roun , position ,aligment and size .
class="flex justify-center items-start h-auto w-auto" alt="">6. Customize the "Popup"by adjusting the button action ,round , border and image height.
class="flex justify-center items-start h-auto w-auto" alt="">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 block looks on both desktop and mobile devices. After this, you can proceed to the next step.
