> For the complete documentation index, see [llms.txt](https://webibazaar.gitbook.io/flute-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://webibazaar.gitbook.io/flute-documentation/sections/timeline.md).

# Timeline

{% embed url="<https://salesiq.zohopublic.in/signaturesupport.ls?widgetcode=siq93f38201da244cbe219b2cab71813c85342abc57dd769c6885e2bde57d2b90da>" %}

The "Timeline" section is provide by the Flute theme. To display chronological content, milestones, or steps in a structured and engaging format.

<table><thead><tr><th width="279">Section</th><th>Description</th></tr></thead><tbody><tr><td>Layout</td><td><p>Customization of the "Layout" in this section is as follows:</p><ul><li>Grid</li><li>Compact</li></ul></td></tr><tr><td>Heading</td><td>Enter text to display as a main heading of the section.</td></tr><tr><td>Description</td><td>Enter text to display as a description of the section.</td></tr><tr><td>Enable parallax effect</td><td>Enable this checkbox to apply parallax effect on background image. Applicable when "Background image" is selected.</td></tr><tr><td>Background image</td><td>Use this to set background image in the section.</td></tr><tr><td>Banner height</td><td><p>Customization of the "Banner height" in the Timeline section is as follows:</p><ul><li>Adapt to first slide</li><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Content style</td><td><p><strong>Content alignment on desktop</strong></p><p>Customization of the "Content alignment on desktop" in Timeline section is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul><p></p><p><strong>Vertical position</strong></p><p>Customization of the "Content Vertical position" in Timeline section is as follows:</p><ul><li>Top</li><li>Middle</li><li>Bottom</li></ul></td></tr><tr><td>Desktop hoverable content</td><td><p><strong>Show carousel pagination</strong> </p><p>Enable this checkbox to show carousel pagination in the section.</p><p></p><p><strong>Pagination color</strong> </p><p>Use this settings to set pagination color in the section.</p></td></tr><tr><td>Enable inline pagination</td><td><p>Enable this option to change the position of timeline navigation milestones within the Timeline section.</p><ul><li><strong>Disabled</strong> → Horizontal milestones below content</li><li><strong>Enabled</strong> → Vertical timeline on the left side</li></ul></td></tr><tr><td>Color scheme</td><td><p>In this section, you can change the background and foreground color of a section using the color scheme.</p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li><li>Scheme 6</li></ul></td></tr><tr><td>Mobile layout</td><td><p><strong>Content alignment</strong></p><p>Customization of the "Content alignment on mobile" in Timeline section is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul><p></p><p><strong>Content under images on mobile</strong> </p><p>By enabling this checkbox, you can view the slide content below the image in a mobile device.</p></td></tr></tbody></table>

<figure><img src="/files/irpLr9sR2EvJXHDOc0R3" alt=""><figcaption></figcaption></figure>

### **Add Text** <a href="#add-testimonial" id="add-testimonial"></a>

Click on "**Add Text**" and its customization is as follows.

<table><thead><tr><th width="272">Block</th><th>Description</th></tr></thead><tbody><tr><td>Custom preview image</td><td>Allows you to upload or select a custom image that represents the timeline item. This image is used as a visual preview for the content.</td></tr><tr><td>Control image opacity</td><td>Adjusts the opacity level of the preview image, allowing better contrast between the image and text content.</td></tr><tr><td>Date</td><td><p><strong>Day</strong>  </p><p>Sets the day value for the timeline date.</p><p></p><p><strong>Month</strong> </p><p>Sets the month value for the timeline date.</p><p></p><p><strong>Year</strong> </p><p>Sets the year value for the timeline date.</p></td></tr><tr><td>Heading</td><td><p><strong>Text</strong> </p><p>Use this settings to enter text content displayed for the timeline item. </p><p></p><p><strong>Size</strong></p><p>Customization of the "Heading text size" in the Timeline section is as follows:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul><p></p><p><strong>Description</strong> </p><p>Enter a text to display as a description in timeline item.</p></td></tr><tr><td>Button</td><td><p><strong>Label</strong> </p><p>Use "Label" to add a label to the Button in the section. </p><p></p><p><strong>Link</strong> </p><p>Use "Link" to add a link to the Button in the section.</p></td></tr><tr><td>Color scheme</td><td><p>In this section, you have the option to modify the background and foreground colors of a slide's content container using the provided color scheme.</p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li><li>Scheme 6</li></ul></td></tr><tr><td>Mobile layout</td><td><p><strong>Custom preview image</strong> </p><p>Allows you to upload or select a custom preview image specifically for mobile devices. Leave it blank to display the main preview image.</p></td></tr></tbody></table>

<figure><img src="/files/K6LTbP8kJxvlISwDg82y" alt=""><figcaption></figcaption></figure>