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

# Image comparison

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

This section allows you to display a **before and after image comparison** to visually demonstrate product results or transformations.

{% hint style="info" %}
**Recommendation Size**\
Image size: 1920x750
{% 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 text to display as a main heading in the section. </td></tr><tr><td>Description</td><td>Enter text to display as a description in the section. </td></tr><tr><td>Before view</td><td><p><strong>Image</strong></p><p>Use this settings to select image to show as a before image.</p><p><br><strong>Heading</strong> </p><p>Enter the heading for the before view. </p><p></p><p><strong>Heading size</strong> </p><p>Customization of the "Before view heading size"  is as follows:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul><p></p><p><strong>Subheading</strong> </p><p>Add a short description that appearance before using the product. </p><p></p><p><strong>Small image</strong> </p><p>Upload a smaller preview image displayed near the comparison area. The recommended image size is 100 × 100 px. </p><p></p><p><strong>Enable overlay on image</strong> </p><p>Enable this option to apply an overlay effect on the image. </p><p></p><p><strong>Overlay color</strong> </p><p>Select the color used for the image overlay effect. </p><p></p><p><strong>Opacity</strong> </p><p>Adjust the transparency level of the overlay color applied to the image.</p></td></tr><tr><td>After view</td><td><p><strong>Image</strong></p><p>Use this settings to select image to show as a After image.</p><p><br><strong>Heading</strong> </p><p>Enter the heading for the After view. </p><p></p><p><strong>Heading size</strong> </p><p>Customization of the "After view heading size"  is as follows:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul><p></p><p><strong>Subheading</strong> </p><p>Add a short description that appearance after using the product. </p><p></p><p><strong>Small image</strong> </p><p>Upload a smaller preview image displayed near the comparison area. The recommended image size is 100 × 100 px. </p><p></p><p><strong>Enable overlay on image</strong> </p><p>Enable this option to apply an overlay effect on the image. </p><p></p><p><strong>Overlay color</strong> </p><p>Select the color used for the image overlay effect. </p><p></p><p><strong>Opacity</strong> </p><p>Adjust the transparency level of the overlay color applied to the image.</p></td></tr><tr><td>Text color</td><td>Select the color used for the image text. </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></tbody></table>

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