> 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/multi-panel-view.md).

# Multi panel view

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

The "Multi panel view" section is provide by the Flute theme. This section is used to add a Image wise-banner with a title,content and button. you can show the multi panel banner as a slider.

{% hint style="info" %}
**Recommendation Size**\
Multi panel view image size: 580x745
{% endhint %}

<table><thead><tr><th width="306">Setting</th><th>Description</th></tr></thead><tbody><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>Banner height</td><td><p>Customization of the "banner height" in the multi panel view 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>Container background</td><td><p>In the section, Container background customization is as follows.</p><ul><li>Glass effect</li><li>Color scheme</li><li>None</li></ul></td></tr><tr><td>Desktop content alignment</td><td><p>Customization of "Desktop content alignment" as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Container color scheme</td><td><p>In this section, you can change the background and foreground color of a content container within this 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>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>Mobile content alignment</strong> </p><p>Customization of "Mobile content alignment" as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr></tbody></table>

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

## Add Column

To add column to the Multi panel view section, click on the 'Add column'. There are many options available , 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>Use "Image" to add the image to the section.</td></tr><tr><td>Scrollbar first offer</td><td><p><strong>Custom svg code</strong> </p><p>Use this to paste SVG icon code here to display as a first offer icon of scrolling bar in multi panel view column block. </p><p></p><p><strong>Text</strong> </p><p>Enter text to display as a scrollbar first offer text.</p></td></tr><tr><td>Scrollbar second offer</td><td><p><strong>Custom svg code</strong> </p><p>Use this to paste SVG icon code here to display as a second offer icon of scrolling bar in multi panel view column block. </p><p></p><p><strong>Text</strong> </p><p>Enter text to display as a scrollbar second offer text.</p></td></tr><tr><td>Heading</td><td>Enter text to display as a heading on the image.</td></tr><tr><td>Heading size</td><td><p>Customization of "Heading size" in column block is as follows:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Description</td><td>Enter text to display as a description below the image heading.</td></tr><tr><td>Button</td><td><p><strong>Label</strong></p><p>Use "Button label" to add a label to the Button 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></td></tr></tbody></table>

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