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

# Vertical banner

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

The "Vertical banner" section is provide by the Flute theme. show off your products in style with a vertical banner section - a visual banner collection that tells the story of your brand through eye-catching images.

{% hint style="info" %}
**Recommendation Size**\
Vertical banner image desktop size: 1920x700 \
Vertical banner image mobile size: 770x720
{% 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 a text to display as a main heading of vertical banner 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 shop the vertical banner section is as follows:</p><ul><li>Full screen height</li><li>Adapt to first image height</li><li>Small</li><li>Medium</li><li>Large</li></ul><p>This feature will not work on mobile when the "Full screen height" is set to enable.</p></td></tr><tr><td>Enable product</td><td>Turn this on to display products directly within the vertical banner.</td></tr><tr><td>List product background</td><td><p>In this section, you can change the background and foreground color of a List product in vertical banner 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>Full screen height</strong> </p><p>Turn this on to make the banner fill the full screen height on mobile devices.</p></td></tr></tbody></table>

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

## **Add product collection**

To add blocks to the vertical banner section, click on the 'Product collection'. There are many options available similar to the product collection, 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><strong>Image</strong><br>Use "Image" to add the image to the product collection block.</td></tr><tr><td>Control image opacity</td><td>Using this settings, you have the ability to change the opacity of the image overlay. Modify this settings to increase or decrease the opacity level of the overlay on the vertical banner image.</td></tr><tr><td>Subheading</td><td>Enter text to display as a subheading in the product collection block.</td></tr><tr><td>Heading</td><td><p><strong>Text</strong> <br>Enter text to display as a title in the product collection block. </p><p></p><p><strong>Icon</strong> </p><p>Use "Icon" to add the icon image to the product collection block.<br><br><strong>Text Size</strong></p><p>Customization of the "Text Size" in the product collection block is as follows:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul><p><br><strong>Small text</strong> <br>Enter text to display as a small text in the product collection block. </p></td></tr><tr><td>Description</td><td><p><strong>Text</strong> </p><p>Enter text to display as a description in the product collection block. </p></td></tr><tr><td>Button</td><td><p><strong>Label</strong></p><p>Use "Label" to add Button label in the product collection block.</p><p></p><p><strong>Link</strong> </p><p>Use "Link" to add a link to the Button in the product collection block. </p></td></tr><tr><td>Desktop content placement</td><td><p>Customization of the "Desktop content placement" in the product collection block is as follows: </p><ul><li>Top left</li><li>Top center</li><li>Middle left</li><li>Middle center</li><li>Bottom left</li><li>Bottom center</li></ul></td></tr><tr><td>Desktop content alignment</td><td><p>The content alignment customization of the product collection block in desktop devices is as follows:</p><ul><li>Left</li><li>Center</li><li>Righ</li></ul></td></tr><tr><td>Product</td><td>Select a product to display in the product collection block.</td></tr><tr><td>Color scheme</td><td><p>In this section, you can change the background and foreground color of the block 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>Image</strong> </p><p>Use "Image" to add the mobile image to the section. this is optional because it will take desktop image when mobile image will not be added.<br></p><p><strong>Content alignment</strong></p><p>The content alignment customization in the vertical gallery  section is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr></tbody></table>

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