> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/ella-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://halosoft.gitbook.io/ella-documentation/sections/all-sections-in-theme/puzzled-image-banner.md).

# Puzzled Image Banner

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

To add this section, please follow below steps:

1. From your Shopify admin, go to **Online Store** **->** **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Click **Add section** and choose "**Puzzled image banner**".

## Section settings

### General

<table><thead><tr><th width="304">Settings</th><th>Meaning</th><th data-hidden></th></tr></thead><tbody><tr><td>Section Width</td><td>Select the layout width of the whole section. The options are: <br><br><mark style="color:orange;"><strong>Default (same as the body width)</strong></mark><br><mark style="color:orange;"><strong>Width (1170px)</strong></mark><br><mark style="color:orange;"><strong>Width (1770px)</strong></mark><br><mark style="color:orange;"><strong>Full width (100% of the viewport width).</strong></mark></td><td></td></tr><tr><td>Padding for 'full width' option on desktop</td><td>Determine the left and right spacing of the full width layout.</td><td></td></tr></tbody></table>

### Section header

<table><thead><tr><th width="308">Settings</th><th>Meaning</th><th data-hidden></th></tr></thead><tbody><tr><td>Title</td><td>Enter in the title for the section.</td><td></td></tr><tr><td>Title font size</td><td>Determine the font size of the title on Desktop.</td><td></td></tr><tr><td>Title font size on mobile</td><td>Determine the font size of the title on Mobile.</td><td></td></tr><tr><td>Title font weight</td><td>Select the font weight of the title.</td><td></td></tr><tr><td>Title color</td><td>Apply a color to the title of the section.</td><td></td></tr><tr><td>Title bottom margin</td><td>Determine the bottom spacing of the section title.</td><td></td></tr><tr><td>View all</td><td>Enter the text for the "view all" link.</td><td></td></tr><tr><td>'View all' link</td><td>Set URL for the "view all" to redirect to if the "Redirect To URL" is selected.</td><td></td></tr><tr><td>'View all' font size</td><td>Determine the font size of the "view all".</td><td></td></tr><tr><td>'View all' font weight</td><td>Select the font weight of the "view all"</td><td></td></tr><tr><td>'View all' link color</td><td>Apply a color to the "view all" link of the section.</td><td></td></tr><tr><td>'View all' top margin</td><td>Determine the top spacing of the "view all".</td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td>Select Image</td><td>Select/Upload image for the "Content".</td><td></td></tr><tr><td>Image Text</td><td>Enter in the text for the "Content".</td><td></td></tr><tr><td>Image Text Font Size</td><td>Determine the font size of the text on Desktop</td><td></td></tr><tr><td>Image Text Font Size on Mobile</td><td>Determine the font size of the text on Mobible</td><td></td></tr><tr><td>Image Text Font Weight</td><td>Select the font weight of the text</td><td></td></tr><tr><td>Image Text Color</td><td>Apply a color to the text of the "Content".</td><td></td></tr><tr><td><strong>Link</strong></td><td>Enter the text for the link.</td><td></td></tr><tr><td>Link Text</td><td>Set URL for the "Link" to redirect to if the "Redirect To URL" is selected.</td><td></td></tr><tr><td>Link Font Size</td><td>Determine the font size of the "Link" on Desktop.</td><td></td></tr><tr><td>Link Font Size Mobile</td><td>Determine the font size of the "Link" on Mobile.</td><td></td></tr><tr><td>Font Weight</td><td>Select the font weight of the "Link"</td><td></td></tr><tr><td>Link Color</td><td>Apply a color to the "Link" of the section.</td><td></td></tr><tr><td>Image Behavior</td><td>Select animation for images</td><td></td></tr></tbody></table>

### Left block

<table><thead><tr><th width="310">Settings</th><th>Meaning</th><th data-hidden></th></tr></thead><tbody><tr><td><strong>First banner / Second banner</strong></td><td></td><td></td></tr><tr><td>Image</td><td>The image for the content 1 of the left block.</td><td></td></tr><tr><td>Text</td><td>The text on the image of the content 1.</td><td></td></tr><tr><td>Text font size</td><td>The font size of the image text.</td><td></td></tr><tr><td>Text font size on mobile</td><td>The font size of the image text on mobile.</td><td></td></tr><tr><td>Text font weight</td><td>Select the font weight of the image text to be either Normal, Medium, Semibold, Bold, Extra bold, or Black.</td><td></td></tr><tr><td>Text color</td><td>The color of the image text.</td><td></td></tr><tr><td>Link</td><td>The URL that you want the content block to link to.</td><td></td></tr><tr><td>Link text</td><td>The text that displays on the link.</td><td></td></tr><tr><td>Link font size</td><td>The font size of the link.</td><td></td></tr><tr><td>Link font size on mobile</td><td>The font size of the link on mobile.</td><td></td></tr><tr><td>Font Weight</td><td>Select the font weight of the font weight of the link to be either Normal, Medium, Semibold, Bold, Extra bold, or Black.</td><td></td></tr><tr><td>Link color</td><td>The color of the link.</td><td></td></tr></tbody></table>

### Right block

<table><thead><tr><th width="310">Settings</th><th>Meaning</th><th data-hidden></th></tr></thead><tbody><tr><td><strong>First banner / Second banner</strong></td><td></td><td></td></tr><tr><td>Image</td><td>The image for the content 1 of the left block.</td><td></td></tr><tr><td>Text</td><td>The text on the image of the content 1.</td><td></td></tr><tr><td>Text font size</td><td>The font size of the image text.</td><td></td></tr><tr><td>Text font size on mobile</td><td>The font size of the image text on mobile.</td><td></td></tr><tr><td>Text font weight</td><td>Select the font weight of the image text to be either Normal, Medium, Semibold, Bold, Extra bold, or Black.</td><td></td></tr><tr><td>Text color</td><td>The color of the image text.</td><td></td></tr><tr><td>Link</td><td>The URL that you want the content block to link to.</td><td></td></tr><tr><td>Link text</td><td>The text that displays on the link.</td><td></td></tr><tr><td>Link font size</td><td>The font size of the link.</td><td></td></tr><tr><td>Link font size on mobile</td><td>The font size of the link on mobile.</td><td></td></tr><tr><td>Font Weight</td><td>Select the font weight of the font weight of the link to be either Normal, Medium, Semibold, Bold, Extra bold, or Black.</td><td></td></tr><tr><td>Link color</td><td>The color of the link.</td><td></td></tr></tbody></table>

### Section top padding

<table><thead><tr><th width="310">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Desktop</td><td>Determines the height of the top inner space of the section on the desktop device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Tablet</td><td>Determines the height of the top inner space of the section on the tablet device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Mobile</td><td>Determines the height of the top inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr></tbody></table>

### Section bottom padding

<table><thead><tr><th width="310">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Desktop</td><td>Determines the height of the bottom inner space of the section on the desktop device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Tablet</td><td>Determines the height of the bottom inner space of the section on the tablet device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Mobile</td><td>Determines the height of the bottom inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr></tbody></table>