The Video banner section makes it possible for you to add a nice section with a title, text and button block,
To activate this section you first have to add the section to your page. This can be done in a few small steps.
1) Click on 'add section' which can be found in your left sidebar
2) Scroll down, or search for 'Video banner', then click on 'Video banner'
3) Done, your Video banner section is added.
General settings
The general settings contains the settings for the styling and layout of the 'Rich Text' section.
Simply click on the 'section' to open the settings.
On the right sidebar, the following settings will show
Cover image:
Upload the image you want to use as a thumbnail/cover
Video:
Upload the video you want to use.
Image overlay opacity:
Set the opacity of the overlay.
0% is no overlay
100% is full color overlay
Show play button:
Check this option to display the play icon. Only applicable when using video content.
Video URL:
Paste the video URL here.
Youtube, Vimeo or just an ordinary .mp4 file.
Video alt text:
Describe the video to make it accessible for customers using screen readers.
Width:
You can change inner container width of video banner making it fullwidth or going with boxed width option.
Content position:
This controls the alignment of the video banner select from left or center.
Background:
In Next theme, I am sure you already have a noticed a new layout for video banner. This section controls the background layer over the video banner:
You can adjust color width/ opacity of the background and the layer height.
Since it's a responsive theme, you have options to adjust the color background color width and height differently for mobile devices.
Spacing
Bottom spacing desktop/mobile:
Set the spacing on the bottom for desktop and mobile.
That way you will get the amount of whitespace below the element you want. The default for desktop is 50px and the default for mobile is 30px.
Control the stacking order of sections:
The "Control the stacking order of sections" feature lets you decide which parts of your sections appear on top of others. You can adjust a number to make sections show in front and others behind. This helps when sections are really close or overlapping. You can use bigger numbers to bring things forward/overlap and smaller numbers to move things back. This way, you can make sure your store looks just the way you want it to.
This is a great example to show you how the text is overlapping the image banners.
Video banner blocks:
By default, there are 3 elements added, you can edit them, remove them or add more elements.
The following elements are added:
- Title (Video banner)
- Text field
- Buttons
Hopefully this documentation will help you understanding the Video banner, if you have any questions open the live chat and send us a message.