# Image banner

Layout on Beauty Blossom homepage

Layout on Furniture Fusion homepage

Layout on Furniture Fusion homepage

Layout on Furniture Finesse homepage

Layout on Dreamy Decor homepage

To add this section, please follow the 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**".
SettingDescription
Section width

Select the section width from the dropdown menu:

  • Full width
  • Page width
  • Custom width
Customize widthDetermines the width of the section when you choose 'Custom width' option at 'Section width' setting . Can be from 1000px to 1800px, increasing arithmetically of 50px (pixel)
Custom corner radius

Select this checkbox to enable/disable custom corner radius.

(The 'Block corner radius' setting only take effect if this checkbox is ticked)

Block corner radiusDetermines the corner radius of the block. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).
#### Image
SettingDescription
ImageUpload an image
Content inside image on mobileEnable/disable checkbox
Mobile row heightDetermines the mobile image height of the block. Can be from 40% to 200%, in 1% arithmetic increments
#### **Content**
SettingDescription
Desktop content position

Select desktop content position from the dropdown menu:

  • Top left
  • Top center
  • Top right
  • Middle left
  • Middle center
  • Middle right
  • Bottom left
  • Bottom center
  • Bottom right

(Position is automatically optimized for mobile. This setting applies to the position of the entrie content block)

Desktop content alignment

Select the alignment of content from the dropdown menu:

  • Left
  • Center
  • Right
Mobile content alignment

Select content alignment on the mobile from the dropdown menu:

  • Left
  • Center
  • Right
Custom content width

Select this checkbox to enable/disable custom content maximum width

(The 'Content width' setting only take effect if this checkbox is ticked)

Content widthDetermines the content maximum width of the block. Can be from 300px to 1200px, in 10px arithmetic increments
#### **Colors**
SettingDescription
Mobile color scheme

Select mobile color scheme from the dropdown menu:

  • Default
  • Custom

(The 3 following settings only take effect if this setting is "custom")

TextSet the color for the text
BackgroundSet the background color for this section
(If a background gradient is set, the section's background will be set according to the background gradient setting)
Background gradientSet the background gradient for this section
Color scheme

Select a color scheme to set the text and background colors for the section

(This setting only take effect if the 'Mobile color scheme' setting is "Default")

Image overlay opacity on hoverDetermines the image overlay opacity on hover of the block. Can be from 0% to 100%, in 10% arithmetic increments.
BackgroundSet the background color for image overlay opacity on hover
#### **Animations**
SettingDescription
Image behavior

Select the image behavior from the dropdown menu:

  • None
  • Ambient movement
  • Fixed background position
  • Parallax on scroll
  • Zoom in on scroll
  • Zoom in on hover
Text animation

Select the text animation from the dropdown menu:

  • None
  • Fade in up
  • Fade in down
  • Zoom in
  • Zoom out
#### **Section padding**
SettingDescription
Top paddingDetermines the height of the top inner space of the section. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).
Bottom paddingDetermines the height of the bottom inner space of the section. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).
Top padding on mobileDetermines the height of the top inner space of the section on mobile. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).
Bottom padding on mobileDetermines the height of the top inner space of the section on mobile. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).