> 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/image-with-info.md).

# Image with info

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

The "Image with info" section is provide by the Flute theme. This section Display an image with structured information blocks to highlight important details, features, or explanations.

{% hint style="info" %}
**Recommendation Size**\
Image size: 875x875
{% endhint %}

<table><thead><tr><th width="286">Setting</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>Wide</li><li>Grid</li></ul></td></tr><tr><td>Image</td><td>Upload the image that will appear in the section.</td></tr><tr><td>Image height</td><td><p>Customization of the "Image height" in the image with info section is as follows:</p><ul><li>Adapt to first image</li><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Enable to hide image</td><td>Enable this option if you want to hide the image and display only the text content.</td></tr><tr><td>Heading</td><td>Enter text to display as a main heading in the section. </td></tr><tr><td>Description</td><td>Enter text to display as a description in the section. </td></tr><tr><td>Heading position</td><td><p>Customization of the "Heading position" in the section is as follows:</p><ul><li>Next to the image</li><li>Top</li></ul></td></tr><tr><td>Heading alignment</td><td><p>Customization of the "Heading alignment" in the section is as follows:</p><ul><li>Left</li><li>Center</li></ul></td></tr><tr><td>Content</td><td><p><strong>Info 1 heading</strong> </p><p>Enter the heading for the first information column.</p><p></p><p><strong>Info 2 heading</strong> </p><p>Enter the heading for the second information column.</p><p></p><p><strong>Info 3 heading</strong> </p><p>Enter the heading for the third information column.</p></td></tr><tr><td>Scrollbar</td><td><p>The Scrollbar feature allows you to display a vertical promotional text strip alongside the image area. </p><p></p><p>This helps highlight brand messages, marketing campaigns, announcements, or promotional content while adding visual movement to the section. </p><p></p><p><strong>Show Promotional Scrollbar</strong> </p><p>Enable this option to display the promotional scrollbar beside the image.</p><p>When disabled, the scrollbar area will be hidden. </p><p></p><p><strong>Text</strong></p><p>Enter the promotional text displayed within the scrollbar. </p><p></p><p><strong>Background Color</strong></p><p>Choose the background color of the promotional scrollbar. </p><p></p><p><strong>Foreground Color</strong></p><p>Choose the text color displayed inside the promotional scrollbar. </p><p></p><p><strong>Scrollbar Position</strong></p><p>Choose the position of the promotional scrollbar within the image area. </p><ul><li><strong>Left —</strong> Displays the scrollbar along the left side of the image.</li><li><strong>Right —</strong> Displays the scrollbar along the right side of the image.</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></tbody></table>

<figure><img src="/files/623Cz3wWVSlQltUsbOKo" alt=""><figcaption></figcaption></figure>

## **Add Information**

To add blocks to the Image with info section, click on the 'Add Information'. There are many options available similar to the image with info, as you can see in the below points and screenshot:

<table><thead><tr><th width="183">Block</th><th>Description</th></tr></thead><tbody><tr><td>Title</td><td>Enter the title of the information item.</td></tr><tr><td>Info 1</td><td>Add the description or details for the first information column.</td></tr><tr><td>Info 2</td><td>Add the description or details for the second information column.</td></tr></tbody></table>

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