Banner Motion
Last updated
Last updated
To add this section, please follow below steps:
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
Click Add section and choose "Banner motion".
| Settings | Meaning |
|---|---|
Section width | Select the layout width of the whole section. The options are: Default (same as the body width) Width (1170px) Width (1770px) Full width (100% of the viewport width). |
Padding for 'full width' option on desktop | Determine the left and right spacing of the full width layout. |
Background color | Apply Color on the background of the section. |
Background gradient | Apply Color on the background gradient of the section. |
Background image | Select/Upload an image as the section background. |
| Settings | Meaning |
|---|---|
Alignment | Select the alignment of the header text to be either to the Left, Center or to the Right of the section. |
Title | Enter the title text for header. |
Title color | Apply color on the section title. |
Title font size | Determine the font size of the title. |
Title font size on mobile | Determine the font size of the title on mobile. |
Title bottom margin | Determine the bottom spacing of the section title. |
Title bottom margin on mobile | Determine the bottom spacing of the section title on the mobile. |
Subtitle | Enter the text for the subtitle. |
Subtitle color | Apply color on the subtitle text. |
Subtitle font size | Determine the font size of the subtitle. |
Subtitle font size on mobile | Determine the font size of the subtitle on mobile. |
Subtitle bottom margin | Determine the bottom spacing of the subtitle. |
Subtitle bottom margin on mobile | Determine the bottom spacing of the subtitle on the mobile. |
Menu | Select a menu. |
Text font size | Determine the font size of the text. |
Text font size on mobile | Determine the font size of the text on mobile. |
Text color | Apply color on the text. |
Text hover color | Apply color on the text when hovering. |
| Settings | Meaning |
|---|---|
Background color | Set the background color for image block. |
| Settings | Meaning |
|---|---|
Desktop | Determines the height of the top inner space of the section on the desktop device. Can be from 0px to 500px, increasing arithmetically of 5px (pixel). |
Tablet | Determines the height of the top inner space of the section on the tablet device. Can be from 0px to 500px, increasing arithmetically of 5px (pixel). |
Mobile | Determines the height of the top inner space of the section on the mobile device. Can be from 0px to 500px, increasing arithmetically of 5px (pixel). |
| Settings | Meaning |
|---|---|
Desktop | Determines the height of the bottom inner space of the section on the desktop device. Can be from 0px to 500px, increasing arithmetically of 5px (pixel). |
Tablet | Determines the height of the bottom inner space of the section on the tablet device. Can be from 0px to 500px, increasing arithmetically of 5px (pixel). |
Mobile | Determines the height of the bottom inner space of the section on the mobile device. Can be from 0px to 500px, increasing arithmetically of 5px (pixel). |
| Settings | Meaning |
|---|---|
Image 1 | Select/Upload an image 1 for the block item. |
Image 2 | Select/Upload an image 2 for the block item. |
Alignment | Select the alignment to the Left, Center or to the Right of the section. |
Title | Enter the title for the image. |
Title color | Apply color on the image title. |
Title font size | Determine the font size of the title. |
Title font size on mobile | Determine the font size of the title on Mobile. |
Title bottom margin | Determine the bottom spacing of the title. |
Title bottom margin on mobile | Determine the bottom spacing of the title on mobile. |
Description | Enter the description text for the image. |
Description color | Apply color on the image description. |
Description font size | Determine the font size of the block description. |
Description bottom margin | Determine bottom spacing of the description. |
Description bottom margin on mobile | Determine the bottom spacing of the description on Mobile. |
Button label | Enter the text button the image button. |
Link | Specify the link for the button redirect to. |
Button width | Determine the width of the button. |
Text Color - Border color - Background color - Background gradient - Text hover color - Border hover color - Background hover color - Background hover gradient | Apply colors for the text, background and border of the image button for both normal and hovered/clicked states. |
Button background opacity | Specify the transparency of the button background. |
A video from youtube or vimeo on desktop | Enter the youtube or vimeo link. Note: Use a youtube or vimeo link. |
Aspect ratio (unit %) | Enter the aspect ratio to show the video block. |
Icon color | Apply color on the icon. |
