# Gallery

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

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

{% hint style="info" %}
**Recommendation Size**\
Gallery image size:500x600
{% endhint %}

<table><thead><tr><th width="287">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Layout</td><td><p>Customization of the "Layout" in the gallery section is as follows:</p><ul><li>Full width</li><li>Container</li></ul></td></tr><tr><td>Heading</td><td><p><strong>Text</strong> <br>Enter text to display as a title in the section. <br><br><strong>Size</strong></p><p>Following is the font size customization of the heading of the section:</p><ul><li>Small</li><li>Medium</li><li>Large<br></li></ul><p><strong>Position</strong></p><p>Customization of the "Heading position" in this section is as follows:</p><ul><li>Left</li><li>Center</li></ul></td></tr><tr><td>Number of columns on desktop</td><td>"Number of columns on desktop" is to customize the column on the desktop screen. You can show a minimum of “1” and a maximum of “3” images.</td></tr><tr><td>Banner height</td><td><p>Customization of the "Banner height" in the gallery section is as follows:</p><ul><li>Adapt to image</li><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Remove spacing around blocks</td><td>Enable this checkbox to show remove spacing around blocks of this section.</td></tr><tr><td>Content layout</td><td><p>Customization of the "Content layout" in the gallery section is as follows:</p><ul><li>Inside</li><li>Outside</li></ul></td></tr><tr><td>Carousel</td><td><p><strong>Pagination style</strong></p><p>The style of the gallery navigation that appears below the images:</p><ul><li>None</li><li>Dots</li><li>Arrows</li></ul><p></p><p><strong>Enable autoplay</strong><br>Enable this checkbox to automatically rotate the images in the gallery.</p><p><br><strong>Autoplay interval</strong><br>Use the bar to set the auto-rotate time of the gallery. You can set a minimum of “3” seconds and a maximum of “9” seconds.</p></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><li>Scheme 7</li></ul></td></tr></tbody></table>

<figure><img src="https://3128577213-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUEBGZ0ypDJpAB41jYu9K%2Fuploads%2Fntc7NGjEa0ddGZ3cOwKR%2Flyra-gallerymain.png?alt=media&#x26;token=a38c1d55-0884-45a5-94cb-46c83a6267f2" alt=""><figcaption></figcaption></figure>

## Add Gallery

To add banner to the gallery section, click on the 'Add Gallery'. There are many options available , as you can see in the below points and screenshot.

<table data-full-width="false"><thead><tr><th width="282">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>Show image in monochrome mode</td><td>Enable this checkbox to automatically appply image monochrome mode the images in the gallery.</td></tr><tr><td>Remove image</td><td>Enabling this feature will remove the gallery image.</td></tr><tr><td>Subheading</td><td>Enter the text you would like to display as a subheading above the banner's title.</td></tr><tr><td>Heading</td><td><p><strong>Text</strong><br>Enter text to display as a title in the section.<br><br>Customization of the "heading size" in the gallery section is as follows:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Description</td><td><p><strong>Text</strong><br>Enter text to display as a description in the section.<br><br><strong>Text opacity</strong><br>Use the text to set the opacity of the gallery. You can set a minimum of “10%” and a maximum of “100%”.</p><p></p><p><strong>Size</strong></p><p>Customization of the "Size" in the slide is as follows:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Button</td><td><p><strong>Label</strong><br>Use "Button label" to add a label to the Button in the section.<br><br><strong>Link</strong><br>Use "Button link" to add a link to the Button in the section.<br><br><strong>Style</strong></p><p>Customization of the "Button style" in the gallery is as follows:</p><ul><li>Link</li><li>Outline</li><li>Solid</li></ul></td></tr><tr><td>Desktop content position</td><td><p>To change the position of the content on the banner, utilize the "Desktop content position" setting. Customization of the "Desktop content position" in the gallery section 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></td></tr><tr><td>Desktop content alignment</td><td><p>Customization of "Desktop content alignment" in desktop devices is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Show content background</td><td>By enabling this checkbox, you can Show content background.</td></tr><tr><td>Content background opacity</td><td>By enabling this checkbox, you have the ability to change the content background opacity. Modify the "Content background opacity" setting to increase or decrease the opacity level of the overlay on the gallery content.</td></tr><tr><td>Enable blur background</td><td>Enabling this checkbox allows you to display a blurred background.</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 banner'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><li>Scheme 7</li></ul></td></tr><tr><td>Animations</td><td><p>Customization of the "Image behavior" in the gallery section is as follows:</p><ul><li>None</li><li>Ambient movement</li></ul><p>By employing the Ambient movement feature, the banner image will exhibit motion.</p></td></tr><tr><td>Mobile layout</td><td><p><strong>Content alignment</strong></p><p>Customization of "Mobile content alignment" in mobile devices is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul><p></p><p><strong>Content position</strong></p><p>To change the position of the content on the gallery, utilize the "Mobile content position" setting. Customization of the "Mobile content position" in the gallery section is as follows:</p><ul><li>Top</li><li>Middle</li><li>Bottom</li></ul></td></tr></tbody></table>

<figure><img src="https://3128577213-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUEBGZ0ypDJpAB41jYu9K%2Fuploads%2Fcm3LuBGQX1ZIpCu6oMgF%2Flyra-galleryblock.png?alt=media&#x26;token=32f40e9f-6200-4428-b5ba-c4d799cc304f" alt=""><figcaption></figcaption></figure>