# Image Banner

<figure><img src="/files/UvXipi48zRbzmWAVbmVR" 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 "**Image banner**".

## Section settings

### General

<table><thead><tr><th width="311">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Section ID</td><td>Enter the Section ID to match the Menu link to enable the scroll to Section feature.<br><br><em><mark style="color:orange;">Note: Enter the section ID to match the menu link and enable the scroll-to-section feature.</mark></em></td></tr><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 (1470px)</strong></mark><br><mark style="color:orange;"><strong>Width (1570px)</strong></mark><br><mark style="color:orange;"><strong>Width (1770px)</strong></mark><br><mark style="color:orange;"><strong>Width (1920px)</strong></mark><br><mark style="color:orange;"><strong>Full width (100% of the viewport width).</strong></mark></td></tr><tr><td>Padding for 'full width' option on desktop</td><td>Determines the left and right spacing of the full width layout.</td></tr><tr><td>Layout</td><td>Select the layout display for the block items to be either Slide or List.</td></tr><tr><td>Show navigation arrows</td><td>Toggle to show navigation arrows.</td></tr><tr><td>Arrows position (% or px)</td><td>Enter the horizontal offset of the arrows relative to the slider in px or %.</td></tr><tr><td>Show navigation dots</td><td>Toggle to show dots in slide.</td></tr><tr><td>Auto-rotate slides</td><td>Toggle to let the slide autoplay.</td></tr><tr><td>Gap between each block for list layout</td><td>Determines gap between each block for list layout<strong>.</strong></td></tr></tbody></table>

### Section header

<table><thead><tr><th width="316">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Title</td><td>Enter the title for the section.</td></tr><tr><td>Show title border</td><td>Toggle to show title border/underline.</td></tr><tr><td>Title color</td><td>Set color for the title border/underline.</td></tr><tr><td>Title font size</td><td>Determine the font size of the title.</td></tr><tr><td>Title font size on mobile</td><td>Determine the font size of the title on mobile.</td></tr><tr><td>Title bottom margin</td><td>Determine the bottom spacing of the title.</td></tr><tr><td>Description</td><td>Enter the description text of the section.</td></tr><tr><td>Description color</td><td>Set the color for the description text.</td></tr><tr><td>Description font size</td><td>Specify the font size of the description text.</td></tr><tr><td>Alignment</td><td>Select the alignment of the title and description of the section.</td></tr></tbody></table>

### Block items

<table><thead><tr><th width="321">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Background style</td><td>Select the background style. There are 3 styles:<br><br><mark style="color:orange;"><strong>None</strong></mark><br><mark style="color:orange;"><strong>One-third width</strong></mark><br><mark style="color:orange;"><strong>Full width</strong></mark><br><br><em><mark style="color:orange;">Note: Not applicable when the background image setting is selected.</mark></em></td></tr><tr><td>Background color</td><td>Set color for the block background.<br><br><br><em><mark style="color:orange;">Note: Will only show when section has padding or 'Section width' settings other than 'full width' or uses a PNG image with a transparent background.</mark></em></td></tr><tr><td>Background gradient</td><td>Set color gradient for the block background.<br><br><em><mark style="color:orange;">Note: Will only show when section has padding or 'Section width' settings other than 'full width' or uses a PNG image with a transparent background.</mark></em></td></tr><tr><td>Background image</td><td>Upload/Select an image as the block background<br><br><em><mark style="color:orange;">Note: Will only show when section has padding or 'Section width' settings other than 'full width' or uses a PNG image with a transparent background.</mark></em></td></tr></tbody></table>

### Section top padding

<table><thead><tr><th width="334">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="334">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>

## Blocks settings

### \[BLOCK] Large image

<table><thead><tr><th width="327">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Image</td><td>Upload/Select an image for the block on Desktop.<br><br><em><mark style="color:orange;">Recommended image size: width x height (1880 x 720)px</mark></em></td></tr><tr><td>Image for mobile</td><td>Upload/Select an image for the block on Mobile.<br><br><em><mark style="color:orange;">Recommended image size: width x height (638 x 870)px</mark></em></td></tr><tr><td>Enable custom width for image</td><td>Toggle to apply custom width setting.</td></tr><tr><td>Custom width</td><td>Determine the width of the image block only when the enable custom width Ismage is active.</td></tr><tr><td>Enable scroll down</td><td>Toggle the scroll-down functionality.</td></tr><tr><td>Enable motion image</td><td>Toggle the motion image functionality.</td></tr><tr><td>Motion image</td><td>Upload/Select an image for the motion functionality.</td></tr><tr><td><strong>Content</strong></td><td></td></tr><tr><td>Subtitle</td><td>Fill in the subtitle for the block.</td></tr><tr><td>Show subtitle border</td><td>Toggle to show the underline/border of the subtitle.</td></tr><tr><td>Subtitle font size</td><td>Determine the font size of the subtitle.</td></tr><tr><td>Subtitle font size on mobile</td><td>Determine the font size of the subtitle on Mobile.</td></tr><tr><td>Subtitle bottom margin</td><td>Determine the spacing of the subtitle from its bottom.</td></tr><tr><td>Font family</td><td>Select the font type to be either Font Family #1 or #2. The font family of each option is specified in the theme settings > typography.</td></tr><tr><td>Subtitle font weight</td><td>Select the font weight of the subtitle to be either Normal, Medium, Semibold, Bold, Extra bold, or Black.</td></tr><tr><td>Subtitle position</td><td>Select the position of the subtitle to be either above the title or below it.</td></tr><tr><td>Subtitle color</td><td>Set color for the subtitle text.</td></tr><tr><td>Subtitle color on mobile</td><td>Set color for the subtitle text on mobile device.</td></tr><tr><td>Title</td><td>Enter the text for the title of the block.</td></tr><tr><td>Title letter spacing</td><td>Enter the letter spacing for the title.</td></tr><tr><td>Make the title text italic</td><td>Toggle to apply italic style to the title text.</td></tr><tr><td>Title font size</td><td>Determine the font size of the title.</td></tr><tr><td>Title font size on mobile</td><td>Determine the font size of the title on Mobile.</td></tr><tr><td>Title bottom margin</td><td>Specify the spacing of the title from bottom.</td></tr><tr><td>Title font weight</td><td>Select the font weight of the title to be either Normal, Medium, Semibold, Bold, Extra bold, or Black.</td></tr><tr><td>Title color</td><td>Set color for the block title.</td></tr><tr><td>Title color on mobile</td><td>Set color for the block title text on Mobile.</td></tr><tr><td>Title border style</td><td><p>Select the style for the title border. The styles are:<br></p><p><mark style="color:orange;"><strong>None</strong></mark><br><mark style="color:orange;"><strong>Short underline</strong></mark><br><mark style="color:orange;"><strong>A half-height underline</strong></mark></p></td></tr><tr><td>Title border color</td><td>Set color for the title border/underline.</td></tr><tr><td>Title border color on mobile</td><td>Set color for the title border/underline on mobile device.</td></tr><tr><td>Description</td><td>Enter the description text for the image block.</td></tr><tr><td>Description font size</td><td>Determine the font size of the description text.</td></tr><tr><td>Description font size on mobile</td><td>Determine the font size of the description text on mobile.</td></tr><tr><td>Description line height</td><td>Determine the line height of the description text.</td></tr><tr><td>Description bottom margin</td><td>Determine the spacing of the description from the bottom.</td></tr><tr><td>Description color</td><td>Set color for the description text.</td></tr><tr><td>Description color on mobile</td><td>Set color for the description text on mobile.</td></tr><tr><td>Countdown end date</td><td>Enter a date for countdown function. <br><br><em><mark style="color:orange;">Please use this exact format: yyyy/mm/dd hour/minute/second. Example: 2021/12/4 0:0:00.</mark></em></td></tr><tr><td>Action after the countdown finishes</td><td><p>Select the behavior when the countdown is over. The options are:</p><p><br><mark style="color:orange;"><strong>Hide Countdown</strong></mark></p><p><mark style="color:orange;"><strong>Hide Section</strong></mark></p></td></tr><tr><td>Countdown style</td><td>Select the style for the unit block of the countdown to be either Rounded border or Square border.</td></tr><tr><td>Countdown position</td><td>Select the position of the countdown to be Below description or Above description.</td></tr><tr><td>Countdown number font size</td><td>Determine the font size of the countdown numbers.</td></tr><tr><td>Countdown text font size</td><td>Determine the font size of the countdown text.</td></tr><tr><td>Countdown color</td><td>Set the color for the countdown text.</td></tr><tr><td>Countdown color on mobile</td><td>Set the color for the countdown text on Mobile.</td></tr><tr><td>Countdown bottom margin</td><td>Determine the spacing of the countdown from its bottom.</td></tr><tr><td>Maximum content width</td><td>Determine the max width of the content.</td></tr><tr><td>Content background color</td><td>Set the background color for the content.</td></tr><tr><td>Content alignment</td><td>Select the whole position of the image to be either to the Left, Right or Center including Subtitle, title, description, button and countdown.</td></tr><tr><td>Content alignment</td><td>Select the position of the whole content to be either to the Top, Center or Bottom.</td></tr><tr><td>Content position</td><td>Toggle to apply the custom position for the content. There are 5 options:<br><br><mark style="color:orange;"><strong>Left</strong></mark><br><mark style="color:orange;"><strong>Center</strong></mark><br><mark style="color:orange;"><strong>Right</strong></mark><br><mark style="color:orange;"><strong>Custom position</strong></mark><br><mark style="color:orange;"><strong>Overlap the banner</strong></mark></td></tr><tr><td><strong>Content custom position</strong></td><td></td></tr><tr><td>Horizontal position</td><td>Enter the desired position of the content horizontally in % relative to the image.</td></tr><tr><td>Vertical position</td><td>Enter the desired position of the content vertically in % relative to the image.</td></tr><tr><td><strong>First button / Second button</strong></td><td></td></tr><tr><td>Button label</td><td>Enter the text for the button.</td></tr><tr><td>Button link</td><td>Specify the link for the button to redirect to.</td></tr><tr><td>Button icon</td><td>Enter the SVG icon for the button.<br><br><em><mark style="color:orange;">Note: Go to this link</mark></em> <a href="https://fontawesome.com/v5/search"><em><mark style="color:blue;">find your icon</mark></em></a><em><mark style="color:orange;">. Find the icon you want, then copy the SVG code and paste it here.</mark></em></td></tr><tr><td>Button width</td><td>Determine the width for the button.</td></tr><tr><td>Show custom border</td><td>Toggle the custom border style for the button.<br><br><em><mark style="color:orange;">Note: Applies to both the first and second buttons.</mark></em></td></tr><tr><td>Label color - Border color - Background color - Background gradient - Label hover color - Border hover color - Background hover color - Background hover gradient</td><td>Set the text color, background, and border color for both the normal and hover states of the button.</td></tr><tr><td><strong>Video</strong></td><td></td></tr><tr><td>A video from youtube or vimeo on desktop</td><td>Enter the youtube or vimeo link. <br><br><em><mark style="color:orange;">Note: Use a youtube or vimeo link.</mark></em></td></tr><tr><td>Aspect ratio (unit %)</td><td>Enter the aspect ratio to show the video.</td></tr><tr><td>Icon</td><td>Select the icon for button play is play or circle play.</td></tr><tr><td>Icon color</td><td>Set the color for the icon.</td></tr><tr><td>Icon background color</td><td>Set the  background color for the icon.</td></tr><tr><td>Customize icon position (unit %)</td><td>Enable to be able to adjust the position of the icon.</td></tr><tr><td>Horizontal position</td><td>Determine the horizontal position of the icon relative to the block's left.</td></tr><tr><td>Vertical position</td><td>Determine the vertical position of the icon relative to the block's top.</td></tr><tr><td>Icon horizontal position on mobile (unit %)</td><td>Determine the horizontal position of the icon relative to the block's left on mobile.</td></tr><tr><td>Icon vertical position on mobile (unit %)</td><td>Determine the vertical position of the icon relative to the block's top on mobile.</td></tr></tbody></table>

### \[BLOCK] Small image

<table><thead><tr><th width="336">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Show images on the right</td><td>Swap the positions of the block text content and images.</td></tr><tr><td>First image</td><td>Upload/Select the first image for the block.</td></tr><tr><td>Second image</td><td>Upload/Select the second image for the block.</td></tr><tr><td>Third image</td><td>Upload/Select the third image for the block.</td></tr><tr><td>Block style</td><td>Select the styles for the small image block. There are 4 styles:<br><br><mark style="color:orange;"><strong>Style 1</strong></mark><br><mark style="color:orange;"><strong>Style 2</strong></mark><br><mark style="color:orange;"><strong>Style 3</strong></mark><br><mark style="color:orange;"><strong>Style 4</strong></mark></td></tr><tr><td>Show separator line</td><td>Toggle to show the separator line between the Title, Description and the 2 buttons.<br><br><em><mark style="color:orange;">Note: Only applicable for style 2.</mark></em></td></tr><tr><td>Separator line color</td><td>Set the color for the separator line.<br><br><em><mark style="color:orange;">Note: Only applicable for style 2.</mark></em></td></tr><tr><td>Content right margin</td><td>Determine the right spacing of the content.<br><br><em><mark style="color:orange;">Note: Only applicable for style 2.</mark></em></td></tr><tr><td>Button left margin</td><td>Determine the left spacing of the button.<br><br><em><mark style="color:orange;">Note: Only applicable for style 2.</mark></em></td></tr><tr><td>Button position from center</td><td>Determine the position of the button from the center position.<br><br><em><mark style="color:orange;">Note: Only applicable for style 2.</mark></em></td></tr><tr><td>Content position from center</td><td>Determine the position of the content from the center position.<br><br><em><mark style="color:orange;">Note: Only applicable for style 2.</mark></em></td></tr><tr><td>Separator line position from center</td><td>Determine the position of the separator line from the center position.<br><br><em><mark style="color:orange;">Note: Only applicable for style 2.</mark></em></td></tr><tr><td>Banner background color</td><td>Set the background color for the banner.</td></tr><tr><td>Image above the content</td><td>Upload/Select the image above the content.<br><br><em><mark style="color:orange;">Note: Only applicable for style 4.</mark></em></td></tr><tr><td>Description bottom margin</td><td>Determine the bottom spacing of the description.<br><br><em><mark style="color:orange;">Note: Only applicable for style 4.</mark></em></td></tr><tr><td><strong>Content</strong></td><td></td></tr><tr><td>Subtitle</td><td>Fill in the subtitle for the block.</td></tr><tr><td>Subtitle letter spacing</td><td>Enter the letter spacing for the subtitle.</td></tr><tr><td>Subtitle font size</td><td>Determine the font size of the subtitle on Desktop.</td></tr><tr><td>Subtitle font size on mobile</td><td>Determine the font size of the subtitle on Mobile.</td></tr><tr><td>Subtitle bottom margin</td><td>Determine the spacing of the subtitle from bottom.</td></tr><tr><td>Font family</td><td>Select the Font Type to be either Font Family #1 or #2. These two font families are specified in the Theme settings > Typography.</td></tr><tr><td>Subtitle font weight</td><td>Select the font weight of the subtitle to be either Normal, Medium, Semi Bold, Bold, Extra bold, or Black.</td></tr><tr><td>Subtitle position</td><td>Select the position of the subtitle to be either above or below the title.</td></tr><tr><td>Subtitle color</td><td>Set the color for the subtitle.</td></tr><tr><td>Title</td><td>Enter the title for the block.</td></tr><tr><td>Title letter spacing</td><td>Enter the letter spacing for the title.</td></tr><tr><td>Title font size</td><td>Determine the font size of the title on Dekstop.</td></tr><tr><td>Title font size on mobile</td><td>Determine the font size of the title on Mobile.</td></tr><tr><td>Title bottom margin</td><td>Determine the spacing of the title from bottom.</td></tr><tr><td>Title font weight</td><td>Select the font weight of the title to be either Normal, Medium, Semi Bold, Bold, Extra bold or Black.</td></tr><tr><td>Title color</td><td>Set the color for the title.</td></tr><tr><td>Description</td><td>Enter the description for the block.</td></tr><tr><td>Description font size</td><td>Determine the font size of the description on Dekstop.</td></tr><tr><td>Description font size on mobile</td><td>Determine the font size of the description on Mobile.</td></tr><tr><td>Description line height</td><td>Determine the line height of the description text.</td></tr><tr><td>Description bottom margin</td><td>Determine the spacing of the description from bottom.</td></tr><tr><td>Description color</td><td>Set the color for the description .</td></tr><tr><td>Maximum content width</td><td>Determine the maximum width of the content.</td></tr><tr><td>Content alignment</td><td>Select the alignment of the content to be either to the Left, Right or Center of the block.</td></tr><tr><td>Show content border</td><td>Toggle to show the boder around the content box.</td></tr><tr><td>Show content border</td><td>Set the color for the content border.</td></tr></tbody></table>

### \[BLOCK] Custom Image

<table><thead><tr><th width="337">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td><strong>First item / Second item</strong></td><td></td></tr><tr><td>Show images on the right</td><td>Swap the positions of the block text content and images.</td></tr><tr><td>Image</td><td>Upload/Select an image for the block.</td></tr><tr><td><strong>Content</strong></td><td></td></tr><tr><td>Background color - Background gradient - Border color</td><td>Set the colors for the background and border of the content.</td></tr><tr><td>Subtitle</td><td>Enter the subtitle for the content.</td></tr><tr><td>Show subtitle border</td><td>Toggle to turn on the subtitle underline.</td></tr><tr><td>Subtitle letter spacing</td><td>Enter the subtitle letter spacing.</td></tr><tr><td>Subtitle font size</td><td>Determine the font size of the subtitle.</td></tr><tr><td>Subtitle font size on mobile</td><td>Determine the font size of the subtitle on Mobile.</td></tr><tr><td>Subtitle bottom margin</td><td>Determine the spacing of the subtitle from bottom.</td></tr><tr><td>Font family</td><td>Select the Font Type to be either Font Family #1 or #2. These two font families are specified in the Theme settings > Typography.</td></tr><tr><td>Subtitle font weight</td><td>Select the font weight of the subtitle to be either Normal, Medium, Semi Bold, Bold, Extra bold or Black.</td></tr><tr><td>Subtitle position</td><td>Select the position of the subtitle to be either Above or Below the title.</td></tr><tr><td>Subtitle color</td><td>Set the color for the subtitle.</td></tr><tr><td>Title</td><td>Enter the text for the block title.</td></tr><tr><td>Title letter spacing</td><td>Enter the letter spacing for the block title text.</td></tr><tr><td>Title font size</td><td>Determine the font size of the title.</td></tr><tr><td>Title font size on mobile</td><td>Determine the font size of the title on Mobile.</td></tr><tr><td>Title bottom margin</td><td>Determine the spacing of the title from bottom.</td></tr><tr><td>Title font weight</td><td>Select the font weight of the title to be either Normal, Medium, Semi Bold, Bold, Extra bold or Black.</td></tr><tr><td>Title color</td><td>Set the color for the block title.</td></tr><tr><td>Title border style</td><td><p>Select the style for the title border. The styles are:<br></p><p><mark style="color:orange;"><strong>None</strong></mark><br><mark style="color:orange;"><strong>Short underline</strong></mark><br><mark style="color:orange;"><strong>A half-height underline</strong></mark></p></td></tr><tr><td>Title border color</td><td>Set the color for the title border/underline.</td></tr><tr><td>Description</td><td>Enter the text for the block description.</td></tr><tr><td>Description font size</td><td>Determine the font size of the description text.</td></tr><tr><td>Description font size on mobile</td><td>Determine the font size of the description text on Mobile.</td></tr><tr><td>Description line height</td><td>Determine the line height of the description text.</td></tr><tr><td>Description bottom margin</td><td>Determine the spacing of the description from its bottom.</td></tr><tr><td>Description color</td><td>Set the color for the description text.</td></tr><tr><td>Maximum content width</td><td>Determine the width for the block content including title, description.</td></tr><tr><td>Content alignment</td><td>Select the alignment of the content to be either to the Left, Right or Center.</td></tr><tr><td><strong>Video</strong></td><td></td></tr><tr><td>A video from youtube or vimeo on desktop</td><td>Enter the youtube or vimeo link. <br><br><em><mark style="color:orange;">Note: Use a youtube or vimeo link.</mark></em></td></tr><tr><td>Aspect ratio (unit %)</td><td>Enter the aspect ratio to show the video.</td></tr><tr><td>Icon</td><td>Select the icon for button play is play or circle play.</td></tr><tr><td>Icon color</td><td>Set the color for the icon.</td></tr><tr><td>Icon background color</td><td>Set the background color for the icon.</td></tr><tr><td><strong>Button</strong></td><td></td></tr><tr><td>Button label</td><td>Enter the text for the button.</td></tr><tr><td>Button link</td><td>Specify the link for the button to redirect to.</td></tr><tr><td>Button width</td><td>Determine the width for the button.</td></tr><tr><td>Label color - Border color - Background color - Background gradient - Label hover color - Border hover color - Background hover color - Background hover gradient</td><td>Set the text color, background, and border color for both the normal and hover states of the button.</td></tr></tbody></table>

### \[BLOCK] Special Image

<table><thead><tr><th width="339">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Show images on the right</td><td>Swap the positions of the content and image of the block.</td></tr><tr><td>Image</td><td>Upload/Select the image for the block.</td></tr><tr><td>Image for mobile</td><td>Upload/Select the image for the block on mobile.</td></tr><tr><td>Image width</td><td>Determine the width of the image relative to the block in %.</td></tr><tr><td><strong>Countdown</strong></td><td></td></tr><tr><td>Show countdown</td><td>Toggle the countdown presentation.</td></tr><tr><td>Title</td><td>Enter text for the block title.</td></tr><tr><td>Title font size</td><td>Determine the font size fo the block title</td></tr><tr><td>Title font size on mobile</td><td>Determine the font size for the block title on Mobile</td></tr><tr><td>Title font weight</td><td>Select the font weight of the block title to be either Normal, Medium, Semi Bold, Bold, Extra bold, or Black.</td></tr><tr><td>Title bottom margin</td><td>Determine the spacing of the title from the bottom</td></tr><tr><td>Title color</td><td>Set color for the title text.</td></tr><tr><td>Description</td><td>Fill in the text for the block description.</td></tr><tr><td>Description font size</td><td>Determine the font size of the description text.</td></tr><tr><td>Description font size on mobile</td><td>Determine the font size of the description text on mobile</td></tr><tr><td>Description font weight</td><td>Select te font weight of the description to be either Normal, Medium, Semi Bold, Bold, Extra bold, or Black.</td></tr><tr><td>Description bottom margin</td><td>Determine the spacing of the description from its bottom.</td></tr><tr><td>Description color</td><td>Set color for the block description text.</td></tr><tr><td>Countdown end date</td><td>Enter the date for the countdown function.<br><br><em><mark style="color:orange;">Please use this exact format: yyyy/mm/dd hour/minute/second. Example: 2021/12/4 0:0:00.</mark></em></td></tr><tr><td>Item width</td><td>Set the countdown item width</td></tr><tr><td>Item height</td><td>Set the countdown item height</td></tr><tr><td>Item gap</td><td>Determine the gap between items in the countdown</td></tr><tr><td>Item corner radius</td><td>Determine the roundness of the block item.</td></tr><tr><td>Border color</td><td>Set the color for the countdown border.</td></tr><tr><td>Background color</td><td>Set the color for the countdown background.</td></tr><tr><td>Background gradient</td><td>Set the color for the countdown background gradient.</td></tr><tr><td>Background opacity</td><td>Determine the transparency of the countdown background.</td></tr><tr><td>Number font size</td><td>Determine the font size of the countdown number.</td></tr><tr><td>Number font size on mobile</td><td>Determine the font size of the countdown number on Mobile.</td></tr><tr><td>Number font weight</td><td>Select the font weight of the countdown number to be either Normal, Medium, Semi Bold, Bold, Extra bold, or Black.</td></tr><tr><td>Number color</td><td>Set color for the countdown number color.</td></tr><tr><td>Text font size</td><td>Determine the font size for the countdown text.</td></tr><tr><td>Text font size on mobile</td><td>Determine the font size for the countdown text on Mobile.</td></tr><tr><td>Text font weight</td><td>Select the font weight of the countdown text to be either Normal, Medium, Semi Bold, Bold, Extra bold, or Black.</td></tr><tr><td>Text color</td><td>Set color for the countdown text.</td></tr><tr><td><strong>Content</strong></td><td></td></tr><tr><td>Border color - Background color - Background gradient</td><td>Set the background, background gradient, and border color for the content.</td></tr><tr><td>Subtitle</td><td>Enter the text for block subtitle.</td></tr><tr><td>Subtitle letter spacing</td><td>Enter the desired letter spacing for the subtitle.</td></tr><tr><td>Subtitle font size</td><td>Determine the font size of the subtitle.</td></tr><tr><td>Subtitle font size on mobile</td><td>Determine the font size of the subtitle on Mobile.</td></tr><tr><td>Subtitle bottom margin</td><td>Determine the spacing of the subtitle from bottom.</td></tr><tr><td>Font family</td><td>Select the font type of the subtitle to be either Font Family #1 or #2. The two font types are specified in the Theme Settings > Typography.</td></tr><tr><td>Subtitle font weight</td><td>Select the font weight for the subtitle to be either Normal, Medium, Semi Bold, Bold, Extra bold, or Black.</td></tr><tr><td>Subtitle position</td><td>Select the position of the subtitle to be either above or below the title.</td></tr><tr><td>Subtitle color</td><td>Set the color for the subtitle.</td></tr><tr><td>Title</td><td>Enter text for the block title.</td></tr><tr><td>Title letter spacing</td><td>Enter the block title letter spacing.</td></tr><tr><td>Title font size</td><td>Determine the font size of the block title.</td></tr><tr><td>Title font size on mobile</td><td>Determine the font size of the block title on Mobile.</td></tr><tr><td>Title bottom margin</td><td>Determine the spacing of the block title from its bottom</td></tr><tr><td>Title font weight</td><td>Select the font weight for the title to be either Normal, Medium, Semi Bold, Bold, Extra bold, or Black.</td></tr><tr><td>Title color</td><td>Set the color for the block title.</td></tr><tr><td>Description</td><td>Enter text for the block description.</td></tr><tr><td>Description font size</td><td>Specify the font size for block description.</td></tr><tr><td>Description font size on mobile</td><td>Specify the font size for block description on Mobile.</td></tr><tr><td>Description line height</td><td>Determine the line height of the block description.</td></tr><tr><td>Description bottom margin</td><td>Determine the spacing of the description from its bottom.</td></tr><tr><td>Description color</td><td>Set color for the description text.</td></tr><tr><td>Maximum content width</td><td>Determine the width for the content.</td></tr><tr><td>Content alignment</td><td>Select the alignment of the content to be either to the Left, Center or Right of the block.</td></tr><tr><td><strong>Video</strong></td><td></td></tr><tr><td>A video from youtube or vimeo on desktop</td><td>Enter the youtube or vimeo link. <br><br><em><mark style="color:orange;">Note: Use a youtube or vimeo link.</mark></em></td></tr><tr><td>Aspect ratio (unit %)</td><td>Enter the aspect ratio to show the video.</td></tr><tr><td>Icon color</td><td>Set the color for the icon.</td></tr><tr><td>Icon background color</td><td>Set the background color for the icon.</td></tr><tr><td><strong>Button</strong></td><td></td></tr><tr><td>Button label</td><td>Enter the text for the button.</td></tr><tr><td>Button style</td><td>Choose the style for the button. There are 2 styles:<br><br><mark style="color:orange;"><strong>Style 1</strong></mark><br><mark style="color:orange;"><strong>Style 2</strong></mark></td></tr><tr><td>Button link</td><td>Specify the link for the button to redirect to.</td></tr><tr><td>Button width</td><td>Determine the width for the button.</td></tr><tr><td>Show custom border</td><td>Toggle the custom border.<br><br><em><mark style="color:orange;">Note: Only applicable for button style 1.</mark></em></td></tr><tr><td>Label color - Border color - Background color - Background gradient - Label hover color - Border hover color - Background hover color - Background hover gradient</td><td>Set the text color, background, and border color for both the normal and hover states of the button.</td></tr></tbody></table>

### \[BLOCK] Image scrolling text

<table><thead><tr><th width="334">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Image</td><td>Upload/Select an image for the block on Desktop.<br><br><em><mark style="color:orange;">Recommended image size: width x height (1880 x 720)px</mark></em></td></tr><tr><td>Image for mobile</td><td>Upload/Select an image for the block on Mobile.<br><br><em><mark style="color:orange;">Recommended image size: width x height (638 x 870)px</mark></em></td></tr><tr><td><strong>Scrolling text</strong></td><td></td></tr><tr><td>Menu</td><td>Select a menu to show on the block.</td></tr><tr><td>Text color</td><td>Apply color on the menu item text.</td></tr><tr><td>Text font size</td><td>Determine the font size of the menu item text.</td></tr><tr><td>View all</td><td>Enter the text for the view all button.</td></tr><tr><td>'View all' font size</td><td>The font size of the view all button text.</td></tr><tr><td>'View all' font weight</td><td>Select the position of the view all button to be either to the Left, Right or Center.</td></tr><tr><td>'View all' link</td><td>Specify the link for the view all button to redirect to.</td></tr><tr><td>'View all' link color</td><td>The text color of the view all button.</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://halosoft.gitbook.io/ella-documentation/sections/all-sections-in-theme/image-banner.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.