# Image with text

The **Image with text** section seamlessly combines images and content, effectively reaching users and enhancing the overall user experience.

<figure><img src="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2FJ1b07As8gUY3IcKlX9DO%2Fimage.png?alt=media&#x26;token=d1efd7c5-ce1d-40f2-b608-f6ffd30cfaa5" alt=""><figcaption></figcaption></figure>

## Section settings

### General settings

<table data-full-width="false"><thead><tr><th width="143">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Section width</strong></td><td><p></p><p>3 options for container</p><ul><li><em><strong>Stretch width</strong></em>: span the section width regardless of screen size.</li><li><em><strong>Fix width</strong></em>: depends on your page content width in <strong>Theme settings</strong> <strong>-></strong> <strong>Layout</strong>.</li><li><em><strong>Expand full width</strong></em>: takes up the entire space on the page and it usually resizes itself to fit the size of the screen.</li></ul></td></tr><tr><td><strong>Color scheme</strong></td><td>Select colors from <strong>Theme settings -> Colors</strong></td></tr></tbody></table>

### Image settings

<table data-full-width="false"><thead><tr><th width="143">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Image</strong></td><td>Upload desired image</td></tr><tr><td><strong>Image width</strong></td><td>Customize the size of the image</td></tr><tr><td><strong>Desktop image position</strong></td><td><p>2 options for desktop image position</p><ul><li>Left</li><li>Right</li></ul></td></tr></tbody></table>

### Content settings

<table data-full-width="false"><thead><tr><th width="143">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Desktop content position</strong></td><td><p>3 options for the desktop content position</p><ul><li>Top </li><li>Middle</li><li>Bottom</li></ul></td></tr><tr><td><strong>Content alignment</strong></td><td><p></p><p>3 options for the content alignment</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td><strong>Size</strong></td><td><p>Font size content customization</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td><strong>Column gap</strong></td><td>Adjust the spacing between the image and content</td></tr></tbody></table>

### Section padding

* **Top padding:** Customize the top margin of the section
* **Bottom padding:** Customize the bottom margin of the section

## Block settings

<figure><img src="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2FmRSR5PlVXvzqWzXvRZMb%2FGroup%204.png?alt=media&#x26;token=a43a7d3e-af92-4490-a275-08b586cf7ac3" alt="" width="270"><figcaption></figcaption></figure>

### Heading, Subheading, Description

<table data-full-width="false"><thead><tr><th width="143">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Heading, Subheading,Description</strong></td><td>Custom title block</td></tr></tbody></table>

### Button

<table data-full-width="false"><thead><tr><th width="139">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Button label</strong></td><td>Custom name button, if left empty, the button will be hidden</td></tr><tr><td><strong>Button link</strong></td><td>The link URL you want to add</td></tr><tr><td><strong>Button style</strong></td><td><p>The style of the button</p><ul><li>Fill</li><li>Outline</li></ul></td></tr></tbody></table>