# 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.

<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>Compact</li></ul></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="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2FY77mUYoeZ9EZEfcTR5M7%2Fimage-with-text.png?alt=media&#x26;token=c716080e-54f1-48d8-970b-05f26dcf078f" 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>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.<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></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.<br></p><p><strong>Enable timer background</strong><br>By enabling this checkbox, you have the ability to show timer background.</p></td></tr><tr><td>Discount coupon</td><td><p><strong>Discount text</strong> </p><p>Add your discount message or code here.</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="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2FGqygeZOduvrzihNCtCSV%2Fimage-with-text-block.png?alt=media&#x26;token=0a8f6da5-dcb0-408f-86de-e2c006174b42" alt=""><figcaption></figcaption></figure>
