> For the complete documentation index, see [llms.txt](https://webibazaar.gitbook.io/viola-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/viola-documentation/sections/image-gallery.md).

# Image gallery

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

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

{% hint style="info" %}
**Recommendation Size**\
Image size: 450x450&#x20;
{% endhint %}

<table><thead><tr><th width="287">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Enter text to display as a heading in the section.</td></tr><tr><td>Heading size</td><td><p>Customization of the "Heading size" in the Image gallery section is as follows:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Heading alignment</td><td><p>Customization of the "Heading alignment" in the Image gallery section is as follows:</p><ul><li>Left</li><li>Center</li></ul></td></tr><tr><td>Image ratio</td><td><p>Customization of the "Image ratio" in the Image 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>Enable carousel on desktop</td><td>Use "Enable carousel on desktop" to show the slider carousel on the desktop screen.</td></tr><tr><td>Slider arrow position</td><td><p>Customization of the "Slider arrow position" in the Image gallery section is as follows:</p><ul><li>Top</li><li>Inline</li></ul></td></tr><tr><td>Slider arrow style</td><td><p>Customization of the "Slider arrow style" in the Image gallery section is as follows:</p><ul><li>Link</li><li>Outline button</li><li>Solid button</li></ul></td></tr><tr><td>Enable arrow text</td><td>Enable this setting to show slider arrow text.</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” image.</td></tr><tr><td>Mobile Layout</td><td>Enable swipe on mobile<br>The image slides when the checkbox is activated and the image does not slide when the checkbox is not active.</td></tr><tr><td>Text color</td><td>You can modify the text color in image gallery section.</td></tr><tr><td>Image overlay button color</td><td><p><strong>Button label</strong><br>You can modify the button label color in image gallery section.</p><p><br><strong>Button background</strong><br>You can modify the button background color in image gallery section.<br></p><p><strong>Button border</strong><br>You can modify the button border color in image gallery section.</p><p><br><strong>Button hover label</strong><br>You can modify the button hover label color in image gallery section.</p><p><br><strong>Button background hover</strong><br>You can modify the button background hover color in image gallery section.<br></p><p><strong>Button border hover</strong><br>You can modify the button border hover color in image gallery section.</p></td></tr></tbody></table>

<figure><img src="https://1291024468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZyN3AVm8eGZ8KfCXj2wM%2Fuploads%2Fm4ddcaQUhgXfDlLBf2y6%2Fimg_gallery.png?alt=media&amp;token=66faf9bb-45a7-4f11-bd73-0b8dcc9598d4" alt=""><figcaption></figcaption></figure>

## Add image&#x20;

To add image to the Image gallery section, click on the 'Add image gallery'. 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>Heading</td><td><strong>Heading</strong><br>Enter text to display as a title in the section.</td></tr><tr><td>Heading Size</td><td><p>Customization of the "Heading size" in the Image gallery section is as follows:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Buttons</td><td><strong>Button label</strong><br>Use "Button label" to add a label to the Button in the section.<br><br><strong>Link URL</strong><br>Use "Link URL" to add a link to the Button in the section.</td></tr></tbody></table>

<figure><img src="https://1291024468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZyN3AVm8eGZ8KfCXj2wM%2Fuploads%2F9ST1rd1khpZMWS4ByrS9%2Fimg_gallery_block.png?alt=media&amp;token=94771b14-4101-4e81-9527-e37cc6e05039" alt=""><figcaption></figcaption></figure>