# Image Overlay

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

The "Image overlay" section is provide by the Sitar theme. This section allows blocks to overlap and swipe.

{% hint style="info" %}
**Recommendation Size**\
Image size: 795x478
{% 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 Image overlay section is as follows:</p><ul><li>Full width</li><li>Grid</li></ul></td></tr><tr><td>Heading</td><td>Enter text to display as a title in the section.</td></tr><tr><td>Heading size</td><td><p>Following is the font size customization of the heading of the section:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Subheading</td><td><p><strong>Text</strong></p><p>Enter text to display as a subheading in the section.</p><p></p><p><strong>Style</strong><br>Customization of the "Subheading style" in the Image banner section is as follows:</p><ul><li>Normal</li><li>Outline</li><li>Solid</li></ul><p></p><p><strong>Position</strong></p><p>Customization of the "Subheading position" in the Image banner section is as follows:</p><ul><li>Before heading</li><li>After heading</li></ul><p></p><p><strong>Heading/subheading alignment</strong><br>Customization of the "Heading/subheading alignment" in the Image banner section is as follows:</p><ul><li>Left</li><li>Center</li></ul></td></tr><tr><td>Description</td><td>Enter text to display as a description in the section.</td></tr><tr><td>Show collection description</td><td>By enabling this checkbox, you can show collection description from the admin.</td></tr><tr><td>Description style</td><td><p>Customization of the "Description style" in the Image overlay section is as follows:</p><ul><li>Body</li><li>Subtitle</li><li>Uppercase</li></ul></td></tr><tr><td>Banner height</td><td><p>Customization of the "Banner height" in the Image banner 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>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></ul></td></tr><tr><td>Image behavior</td><td><p>Customization of the "Banner height" in the Image banner section is as follows:</p><ul><li>None</li><li>Ambient movement</li></ul></td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FR4ImkqIEBeqNYbU3Dhs8%2Fimage-overlay.png?alt=media&#x26;token=12499d77-af58-4a4a-9aa9-9ce69acc9670" alt=""><figcaption></figcaption></figure>

## Add image block

To add banner to the Image banner section, click on the 'Add image block'. 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>Subheading</td><td>Enter the text you would like to display as a subheading above the block main title.</td></tr><tr><td>Heading</td><td>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 overlay</p><p>section 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 in the section.</td></tr><tr><td>Label background</td><td>Select color to set as a background color of subheading.</td></tr><tr><td>Label text</td><td>Select color to set as a foreground color of subheading.</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 image block by 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></ul></td></tr><tr><td>Button</td><td><p><strong>Button label</strong><br>Use "Button label" to add a label to the Button in the image.</p><p>Leave the label blank to hide the button.<br><br><strong>Button link</strong><br>Use "Button link" to add a link to the Button in the image block.<br><br><strong>Open this link in a new window</strong><br>By using the "Open this link in a new window" option, the link will open in a new tab.<br><br><strong>Style</strong></p><p>Customization of the "Button style" in the image block of</p><p>Image overlay section is as follows:</p><ul><li>Link</li><li>Outline button</li><li>Solid button</li></ul></td></tr></tbody></table>

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FrgNX9wKJeDrCVk8H95Pb%2Fimage-overlay-block.png?alt=media&#x26;token=d71a6dfc-97fc-4740-836a-6f2b07363215" alt=""><figcaption></figcaption></figure>