> 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-with-text.md).

# Image with text

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

Add an image with a title, description, and Button. Choose the size of your image and upload it.

{% hint style="info" %}
**Recommendation Size**\
Image size: 590x325
{% endhint %}

<table><thead><tr><th width="270">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>Grid</li><li>Wide</li><li>Compact</li></ul></td></tr><tr><td>Heading</td><td>Add a title for the section.</td></tr><tr><td>Description</td><td>Add supporting text below the heading.</td></tr><tr><td>Enable column gap</td><td>Using this feature to add the space between the Columns.</td></tr><tr><td>Scrollbar</td><td><p><strong>Text</strong> </p><p>Use this settings to add the scrolling promotional message to the image with text section. </p><p></p><p><strong>Style</strong> </p><p>Customization of scrolling promotional message style is as follows:</p><ul><li>Mix blend– Blends the text with the image for a creative effect.</li><li>Normal– Displays text with normal contrast. </li></ul><p></p><p><strong>Position</strong> </p><p>Customization of scrolling bar positionis as follows:<br>• Inside <br>• Outside </p><p></p><p><strong>Space between text</strong> </p><p>Use this to set the distance between scrolling promotional message in the scrollbar. </p><p></p><p><strong>Direction</strong> </p><p>Use of "Direction" allows the rotation of the scrolling promotional message from 'left to right' and 'right to left'. </p><p></p><p><strong>Enable pause on hover</strong> </p><p>Turn this on to pause the scrolling text when a user hovers over it.</p></td></tr><tr><td>Content</td><td><p><strong>Image height</strong><br>Customization of the "Image height" in the Image with text 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><li>Scheme 6</li></ul></td></tr></tbody></table>

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

## Add block

To add blocks to the Image with text section, click on the 'Add block'. 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><p>Click on the "Add block" and select the Image. </p><p></p><p><strong>Image</strong> </p><p>Use this settings to add image to the image with text section. </p><p></p><p><strong>Control image opacity</strong></p><p>Using this settings, you have the ability to change the opacity of the image overlay. Modify this settings to increase or decrease the opacity level of the overlay on the image.</p><p></p><p><strong>Products</strong> </p><p>Use this settings to show product slider on image of this section. </p><p></p><p><strong>Color scheme</strong> </p><p>In this section, you can change the background and foreground color of the Image block 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>Caption</td><td><p><strong>Custom svg</strong> </p><p>Paste any SVG icon code here to display an icon above or beside the caption text.</p><p></p><p><strong>Text</strong><br>Use this to add <strong>optional supporting text</strong> that appears above the heading. </p><p></p><p><strong>Text size</strong> </p><p>Customization of caption text size is as follows:</p><ul><li>Small</li><li>Medium</li></ul></td></tr><tr><td>Heading</td><td><p><strong>Text</strong><br>Enter text to display as a title in the section.</p><p></p><p><strong>Highlight animation color</strong> </p><p>Choose the color used for the animated highlight effect displayed beneath highlighted heading text.<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</li></ul><p></p><p><strong>Show heading below the countdown</strong> </p><p>By enable this settings you can show heading position below the countdown.</p></td></tr><tr><td>Countdown</td><td><p><strong>End date</strong><br>Add date here. The end date must be set to a future date and include the following format: YYYY/MM/DD Example: 2025/12/31.</p><p></p><p><strong>Display as</strong> </p><p>Customization of 'Countdown display type' is as follows:</p><ul><li>Style 1</li><li>Style 2</li></ul><p></p><p><strong>Enable timer background</strong><br>By enabling this checkbox, you have the ability to show timer background. </p><p></p><p><strong>Enable Bigger Countdown</strong> </p><p>Enable this option to display a larger countdown timer within the content area. </p><p></p><p>When disabled, the standard countdown size will be displayed. </p><p></p><p><strong>Note:</strong> This setting only affects the visual size of the countdown timer and does not change the countdown functionality.</p></td></tr><tr><td>Discount coupon</td><td><p><strong>Discount text</strong> </p><p>Add your discount message or code here. </p><p></p><p><strong>Background color</strong> </p><p>Use this settings to set background color of discount coupon.</p><p></p><p><strong>Text color</strong> </p><p>Use this settings to set discount coupon text color.</p><p></p><p><strong>Enable to rotate text</strong> </p><p>Enable this settings to rotate discount coupon.</p></td></tr><tr><td>Description</td><td><p><strong>Content</strong> </p><p>Enter a text to display as a short description or supporting text in the section.</p></td></tr><tr><td>Button</td><td><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.</td></tr><tr><td>Desktop content placement</td><td><p>Customization of desktop content placement 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 desktop content alignment 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 the content details block 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>Mobile layout</td><td><p><strong>Mobile content alignment</strong> </p><p>Customization of content alignment in mobile devices is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr></tbody></table>

<figure><img src="/files/0I26ackb7BN1Vi31Z3kS" alt=""><figcaption></figcaption></figure>