> For the complete documentation index, see [llms.txt](https://shinedezign.gitbook.io/starlite-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shinedezign.gitbook.io/starlite-documentation/overview/image-with-text-carousel.md).

# Image with text (carousel)

This section allows users to add multiple images with text in different styles.

### Configure image with text(carousel)

Select the customize theme option. Click on the dropdown menu at the top to select the **Home page** template**.**

From the left side menu, select **Image with text(carousel).**

Customize the section by utilizing the settings on the right side of the theme editor, as described below:

<table data-header-hidden><thead><tr><th width="281"></th><th></th></tr></thead><tbody><tr><td>General</td><td><p><strong>Enable fullwidth</strong><br>Tick this checkbox to enable the full width of this section.<br><br><strong>Enable card border</strong><br>Tick this checkbox to show the card borders.<br><br><strong>Enable image zoom</strong><br>Tick this checkbox to enable the image zoom.<br><br><strong>Section visibility</strong><br>Select from the options to select the visibility of this section:<br>-Always<br>-Small devices only(On selecting this, the section will be visible on mobile devices only.)<br>-Large devices only<br><br><strong>Desktop style</strong><br>Select the section style from the following options:<br>-Grid </p><p>-Carousel</p></td></tr><tr><td>Carousel</td><td><strong>Enable auto-rotation</strong><br>Tick this checkbox to enable the auto rotation of the carousel.<br><br><strong>Auto rotation speed</strong><br>Adjust the range bar to determine the auto rotation speed.</td></tr><tr><td>Image</td><td><p><strong>Desktop height</strong><br>Select the image height from the following options for the desktop view:<br>-550 px</p><p>-650 px</p><p>-750 px</p><p>-Fullscreen<br><br><strong>Desktop width</strong><br>Select from small, medium or large to determine the image width.<br><br><strong>Mobile height</strong><br>Select the image height from the following options for the mobile view:<br>-450 px<br>-550 px</p><p>-650 px</p><p>-Fullscreen<br><br><strong>Image fit</strong><br>Select from natural or cropped to determine the image fit.</p></td></tr><tr><td>Grid radius</td><td><strong>Enable custom radius</strong><br>Tick this checkbox to enable the grid radius.<br><br><strong>Desktop</strong><br>Adjust the range bar to determine the radius on the desktop view.<br><br><strong>Mobile</strong><br>Adjust the range bar to determine the radius on the mobile view.</td></tr><tr><td>Colors</td><td><p><strong>Carousel dots</strong><br>Choose any color for the carousel dots.<br><br><strong>Color scheme</strong><br>Select the color scheme.  </p><p><em>Note: These can be managed from Theme settings> color> schemes.</em> <br><br><strong>Enable gradient</strong><br>Select this check box to enable the gradient color specified in the color scheme assigned above.</p></td></tr><tr><td>Section padding</td><td><p><strong>Top spacing (desktop)</strong> </p><p>Adjust the range bar to add spacing at the top of the section for desktop view.  <br> </p><p><strong>Bottom spacing (desktop)</strong> </p><p>Adjust the range bar to add spacing at the bottom of the section for desktop view. </p><p> </p><p><strong>Top spacing (mobile)</strong> </p><p>Adjust the range bar to add spacing at the top of the section for mobile view. </p><p> </p><p><strong>Bottom spacing (mobile)</strong> <br>Adjust the range bar to add spacing at the bottom of the section for mobile view. </p></td></tr></tbody></table>

### Block Settings

<table data-header-hidden><thead><tr><th width="284"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Image with text</td><td><strong>Image</strong> <br>Select any image.<br><br><strong>Image position</strong><br>Select from left or right to determine the image position.</td><td></td></tr><tr><td>Content</td><td><p><strong>Subheading</strong><br>Enter any text to show it nearest to the icon.<br><br><strong>Subheading icon</strong><br>Select any icon image to show above the text content.<br><br><strong>Heading</strong> </p><p>Add heading text. <br><em>(Note: Wrap your text between [ ] to add the markers. For example, This [marker] will underline marker text.)</em></p><p><br><strong>Marker text highlight style</strong><br>Select from <strong>Underline</strong> or <strong>Background</strong> to determine the highlight style.<br><br><strong>Highlight background</strong><br>Select from <strong>Gradient</strong> or <strong>Solid</strong> to determine the highlight background.<br><br><strong>Heading size</strong> <br>Select the heading size from the H1-H6 options.<br><br><strong>Heading tag</strong><br>Specify heading code types from H1-H6 for SEO and search engines for crawling purposes.<br><br><strong>Description</strong><br>Enter the description text.</p></td><td></td></tr><tr><td>Button</td><td><strong>Text</strong><br>Enter any text to show as the button text.<br><br><strong>Link</strong><br>Enter any link to redirect the button.<br><em>If the button text is blank, then the link will be applied to the whole image.</em><br><br><strong>Show button as link</strong><br>Tick this checkbox to show the button as a link.<br><br><strong>Size</strong><br>Select the button size from the following options:<br>- Small<br>- Medium<br>- Large<br>-Extra large</td><td></td></tr><tr><td>Content</td><td><strong>Alignment</strong><br>Select from left, center or right to determine the content alignment.<br><br><strong>Desktop position</strong><br>Select from the top, middle or bottom to determine the content position.</td><td></td></tr><tr><td>Colors</td><td><p><strong>Background</strong><br>Select the background color.<br><br><strong>Heading</strong><br>Select the heading color.<br><br><strong>Text</strong><br>Select the text color.<br><br><strong>Highlight color</strong><br>Select the text highlight color.<br><br><strong>Border</strong><br>Select the border color.<br><br>Button<br><strong>Background</strong></p><p>Select any color for the button background.    </p><p><br><strong>Shadow</strong><br>Select any color for the button shadow.   <br><br><strong>Background hover</strong><br>Select any hover color for the button background.    <br></p><p><strong>Text</strong></p><p>Select any color for the button text.  </p><p><br><strong>Text hover</strong><br>Select any hover color for the button text.  <br></p><p><strong>Border</strong>  </p><p>Select any color for the button border. <br><br><strong>Border hover</strong><br>Select any hover color for the button border.<br></p></td><td></td></tr></tbody></table>