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

# Gallery

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

The Gallery section displays multiple images with accompanying content and a button, making it ideal for promoting collections, products, or visual stories.

<table><thead><tr><th width="279">Section</th><th>Description</th></tr></thead><tbody><tr><td>Caption</td><td><p><strong>Text</strong> </p><p>Enter text to display as a caption text in the section. </p><p></p><p><strong>Text size</strong> </p><p>Customization of the "Caption text size" in gallery section is as follows:</p><ul><li>Small</li><li>Medium</li></ul></td></tr><tr><td>Heading</td><td><p><strong>Text</strong></p><p>Enter text to display as a title in the section. </p><p></p><p><strong>Size</strong> </p><p>Customization of the "Heading size" in gallery section is as follows:</p><ul><li>Small</li><li>Medium</li><li>Large</li><li>Extra large</li></ul></td></tr><tr><td>Description</td><td><p><strong>Content</strong> </p><p>Enter text to display as a description in the section. </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>Desktop content placement</td><td><p>Customization of the "Content placement on desktop" in gallery section is as follows:</p><ul><li>Top</li><li>Middle</li><li>Bottom</li></ul></td></tr><tr><td>Desktop content alignment</td><td><p>Customization of the "Content alignment on desktop" in gallery section is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</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>Gallery</td><td><p><strong>Image position</strong></p><p>Customization of the "Image position" in gallery section is as follows:</p><ul><li>Left</li><li>Right</li></ul><p></p><p><strong>Height</strong> </p><p>Customization of the "Image Height" in gallery section is as follows:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul><p></p><p><strong>Enable loop</strong> </p><p>Enabling loop will result in the slides continuously looping. </p><p></p><p><strong>Auto rotation</strong> </p><p>Enable this checkbox to automatically play the images in the gallery.</p><p></p><p><strong>Rotation speed</strong> </p><p>Use this settings to set image rotation speed. </p></td></tr><tr><td>Mobile layout</td><td><p><strong>Mobile content alignment</strong> </p><p>Customization of the "Content alignment on Mobile" in gallery section is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Content</td><td><p><strong>Color scheme</strong> </p><p>In this section, you can change the background and foreground color of the content 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/xaUk5gDDTqOnUPRmrYlw" alt=""><figcaption></figcaption></figure>

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

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

<table><thead><tr><th width="272">Block</th><th>Description</th></tr></thead><tbody><tr><td>Image</td><td>Use this settings to add image in the section block.</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>Content</td><td><p><strong>Show content</strong> </p><p>Enable this checkbox to show Image content.</p><p></p><p><strong>Text</strong> </p><p>Use this settings to enter text content displayed on the image. </p><p></p><p><strong>Size</strong></p><p>Customization of the "Image text size" in the section 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>Enter a text to display as a subheading in image item. </p><p></p><p><strong>Link</strong> </p><p>Use this settings to add a link on image.</p></td></tr></tbody></table>

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