> 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-banner.md).

# Image banner

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

The "Image banner" section is provide by the Flute theme. This section is used to add a Image wise-banner with a title, description and button.

{% hint style="info" %}
**Recommendation Size**\
Image banner size: 1920x792
{% 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>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 in the section. </td></tr><tr><td>Desktop column display limit</td><td>"Desktop column display limit" is to specify how many banner to show in a section. You can show a minimum of “1” and a maximum of “4” image banner.</td></tr><tr><td>Display type</td><td><p>Customization of the "Display type" in the section is as follows:</p><ul><li>Grid</li><li>Carousel</li></ul></td></tr><tr><td>Image height</td><td><p>Customization of the "Image height" in the image banner 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>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/RCf7l10YWrsVw1e4xV0L" alt=""><figcaption></figcaption></figure>

## **Add Image**

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

<table><thead><tr><th width="272">Block</th><th>Description</th></tr></thead><tbody><tr><td>Image</td><td>You will add a First image, which will appear on the full width.</td></tr><tr><td>Enable second image on hover</td><td>Enable this option to display another image when the user hovers over the main image.</td></tr><tr><td>Second image</td><td>You will add a Second image, which will appear when the hover effect is enabled.</td></tr><tr><td>Content color</td><td>Select the color used for the text and icon content displayed in the block.</td></tr><tr><td>Content</td><td><p><strong>Icon image</strong> </p><p>Upload an icon image that will appear above or alongside the text. The recommended image size is 100 × 100 px.    </p><p></p><p><strong>Text</strong> </p><p>Enter the main title or heading text for the block. </p><p></p><p><strong>Size</strong></p><p>Customization of the "Content Size" in the block is as follows:</p><ul><li>Small</li><li>Medium</li><li>Large</li><li>Extra large</li></ul><p></p><p><strong>Subheading</strong></p><p>Add supporting text or a short description below the main heading to provide additional information.</p></td></tr><tr><td>Button</td><td><p><strong>Label</strong></p><p>Enter a text to display as a button label in the section. </p><p></p><p><strong>Link</strong></p><p>Use "Button link" to add a link to the Button in the section.</p><p></p><p><strong>Desktop content placement</strong> </p><p>Customization of "Desktop content placement" is as follows:</p><ul><li>Top left</li><li>Top center</li><li>Top right</li><li>Middle left</li><li>Middle center</li><li>Middle right</li><li>Bottom left</li><li>Bottom center</li><li>Bottom right</li></ul><p></p><p><strong>Desktop content alignment</strong> </p><p>Customization of "Desktop content alignment" in desktop devices is as follows:</p><ul><li>Left</li><li>Center</li><li>Right </li></ul><p></p><p><strong>Show content background on desktop</strong> </p><p>Enable this option to display a background behind the content area on desktop screens for better visibility over the image. </p></td></tr><tr><td>Color scheme</td><td><p>In this block, you can change the background and foreground color of the container 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>The content alignment customization in mobile devices is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr></tbody></table>

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