# Split images

Split images section offers a creative and engaging way to present your content. This section allows you to showcase two images side by side, providing a dynamic visual contrast.

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

### **Section settings**

<table><thead><tr><th width="206.0106201171875">Settings</th><th width="131.6512451171875" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td><strong>Layout</strong></td><td align="center"></td><td></td></tr><tr><td>Height</td><td align="center"><code>select</code></td><td>Choose the desktop image height: <code>Full screen</code>, <code>750px</code>, <code>One half of screen</code>, and etc.</td></tr><tr><td>Enable mobile height</td><td align="center"><code>checkbox</code></td><td>Enable custom mobile height settings.</td></tr><tr><td>Mobile height</td><td align="center"><code>select</code></td><td>Choose image height for mobile devices.</td></tr><tr><td>Mobile layout</td><td align="center"><code>select</code></td><td>Select how both images are displayed on mobile: <code>Split</code>, <code>Inline</code>, <code>First block image</code>, or <code>Second block image</code>.</td></tr><tr><td>Content alignment</td><td align="center"><code>select</code></td><td>Position the text block within the image area: <code>Top left</code>, <code>Center</code>, <code>Bottom right</code>, and etc.</td></tr><tr><td><strong>Images</strong></td><td align="center"></td><td></td></tr><tr><td>Overlay type</td><td align="center"><code>select</code></td><td>Adds an overlay: <code>Disabled</code>, <code>Opacity overlay</code>, and <code>Text underlay</code>.</td></tr><tr><td><strong>Text</strong></td><td align="center"></td><td></td></tr><tr><td>Width</td><td align="center"><code>select</code></td><td>Set the content container width: <code>Full width padded</code>, <code>Page width</code>, or <code>Page width narrow</code>.</td></tr><tr><td>Heading</td><td align="center"><code>richtext</code></td><td>Add styled heading text with optional emphasis using italics.</td></tr><tr><td>Heading size</td><td align="center"><code>range</code></td><td>Adjust heading size.</td></tr><tr><td><strong>Highlight</strong></td><td align="center"></td><td></td></tr><tr><td>Type</td><td align="center"><code>select</code></td><td>Select a style for highlighted words: <code>Underline</code>, <code>Circle</code>, <code>Stroke</code>, and etc.</td></tr><tr><td>Highlight color</td><td align="center"><code>color</code></td><td>Background or decoration color for highlighted text.</td></tr><tr><td>Text color</td><td align="center"><code>color</code></td><td>Text color of highlighted words.</td></tr><tr><td>Text</td><td align="center"><code>textarea</code></td><td>Add supporting text below the heading.</td></tr><tr><td>Text size</td><td align="center"><code>range</code></td><td>Adjust body text size.</td></tr><tr><td><strong>Button 1</strong></td><td align="center"></td><td></td></tr><tr><td>Text</td><td align="center"><code>text</code></td><td>Text for the first button. Leave blank to make the whole image clickable.</td></tr><tr><td>Link</td><td align="center"><code>url</code></td><td>Destination URL for button 1.</td></tr><tr><td>Color</td><td align="center"><code>select</code></td><td>Button color: <code>Primary</code>, <code>Secondary</code>, <code>White</code>, or <code>Black</code>.</td></tr><tr><td>Button style</td><td align="center"><code>select</code></td><td>Choose visual style: <code>Solid</code>, <code>Outline</code>, <code>Border</code>, <code>Soft</code>, or <code>Text</code>.</td></tr><tr><td>Size</td><td align="center"><code>select</code></td><td>Button size: <code>Small</code>, <code>Medium</code>, or <code>Large</code>.</td></tr><tr><td><strong>Button 2</strong></td><td align="center"></td><td></td></tr><tr><td>Text</td><td align="center"><code>text</code></td><td>Text for the second button.</td></tr><tr><td>Link</td><td align="center"><code>url</code></td><td>Destination URL for button 2.</td></tr><tr><td>Second button color</td><td align="center"><code>select</code></td><td>Choose color for the second button.</td></tr><tr><td>Second button style</td><td align="center"><code>select</code></td><td>Style for the second button.</td></tr><tr><td>Second button size</td><td align="center"><code>select</code></td><td>Size for the second button.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Color scheme</td><td align="center"><code>color_scheme</code></td><td>Applies a predefined theme color scheme to the section.</td></tr><tr><td>Show text background</td><td align="center"><code>checkbox</code></td><td>Adds a colored background behind text.</td></tr><tr><td>Background</td><td align="center"><code>color</code></td><td>Background color override.</td></tr><tr><td>Text</td><td align="center"><code>color</code></td><td>Text color override.</td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://palo-alto.presidiocreative.com/sections/sections/banners/split-images.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.