# Modern Page Banner **Modern Page Banner** To add this section, please follow below steps: {% hint style="success" %} **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 **"Modern Page Banner"**. {% endhint %}
**Section Feature** | Setting | Description | | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | | Layout | Select the layout width of the whole section. The options are: Default (same as the body width), Full Width (the 100% of the viewport width). | | Background Color | Apply the color for the section background. | | Background Gradient | Apply the gradient color for the section background. | | Background Image | Select/Upload an image as the section background. | | Spacing Top / Spacing Bottom | Determine the spacing of the device from the top and bottom for Desktop, Tablet and Mobile device. | **Content Block Setting** | Setting | Description | | --------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | | Animation Type | Select Section Animation. | | Grid Setting | Sellect Grid Column for Desktop, Tablet and Mobile device. | | Content Alignment | Content Alignment for Left, Center and Right | | Spacing Bottom | Determine the spacing of the device from the bottom for Desktop, Tablet and Mobile device. | | Sub Title | Enter the Sub title for the section. | | Sub Title Font Size on Desktop, Tablet, Mobile | Determine the font size of the Sub title on Desktop, Tablet and Mobile separately. | | Select Font Type | Select the Font Type to be either Font Family #1 or #2. These two font families are specified in the Theme settings > Typography. | | Sub Title Font Weight | Select the font weight of the subtitle to be either Normal, Medium, Semi Bold, Bold, Bolder or Black | | Sub Title text transform | Select the text transform of the subtitle to be either uppercase, lowercase, capitalize, none. | | Sub Title Letter Spacing | Enter the letter spacing for the title. | | Sub Title Color | Set the color for the subtitle. | | Sub Title Spacing Bottom on Desktop, Tablet, Mobile | Determine the spacing of the title from bottom on Desktop, Tablet and Mobile separately. | | Title | Enter the title for the block. | | Title Color | Set the color for the title. | | Title Font Size | Determine the font size of the title on Dekstop. | | Title Font Size Tablet | Determine the font size of the title on Dekstop on Tablet. | | Title Font Size Mobile | Determine the font size of the title on Dekstop on Mobile. | | Title Spacing Bottom | Determine the spacing of the title from bottom. | | Title Spacing Bottom Tablet | Determine the spacing of the title from bottom on Tablet. | | Title Spacing Bottom Mobile | Determine the spacing of the title from bottom on Mobile. | | Description | Enter the description for the block. | | Description Color | Set the color for the Description. | | Description Font Size | Determine the font size of the description on Dekstop. | | Description Font Size Tablet | Determine the font size of the description on Dekstop on Tablet. | | Description Font Size Mobile | Determine the font size of the description on Dekstop on Mobile. | | Description Spacing Bottom | Determine the spacing of the description from bottom. | | Content: Position | Select the alignment of the title, sub title, description to be either to the Left, Right or Center of the block. | | Content: Alignment | Select the alignment of the title, sub title, description to be either to the Left, Right or Center of the block. | | Button Setting | Select setting for button style, text, link, Font Weight, Font Size, Letter Spacing, Border and color. | **Content Images Setting** | Setting | Description | | ----------------- | ------------------------------------------------------------------------------------------ | | Grid Setting | Sellect Grid Column for Desktop, Tablet and Mobile device. | | Spacing Bottom | Determine the spacing of the device from the bottom for Desktop, Tablet and Mobile device. | | Content Alignment | Content Alignment for Left, Center and Right | | Images | Select your image. |