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
Image overlay opacity:
Set the opacity of the overlay.
0% is no overlay
100% is full color overlay
Color scheme:
Select the color scheme for the overlay color. You can select the color pallets here.
Layout:
As stated in the beginning, the section comes with 2 layouts.
Video left, content right:
The video will show on the left, your text and button show on the right.
Video right, content left:
The video will show on the right, your text and button show on the left.
Content position:
Set the position of the content within the video block (text + button)
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.
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.
How to configure the Video banner content?
By default, there are 6 elements added, you can edit them, remove them or add more elements.
The following elements are added:
- Title
- Text field
- 3x Information
- Buttons
1. Editing the video banner contents
To edit the elements you simply click on the element you want to edit in your sidebar on the left of your screen.
1.1 Title/Heading block
After you clicked on the title block, on the right of your screen the following sidebar will open.
Heading font: Select from primary or secondary font you setup in typography.
Heading size: Select the size of the heading from a range of small to extra large. When you choose for "Extra large", the size of the description will also be a bit larger than normal. The heading sizes can be adjust in typography settings.
Heading: This is text field where you can write your heading.
CUSTOM TEXT STYLING
Enable this option if you want to have custom styling for this section, here you can customize color scheme for your headings and font weight.
1.2 Text block
After you clicked on the text block, on the right of your screen the following sidebar will open.
Text font: You can select the font type use primary or secondary font.
Text: This will be the text that will be shown in this section.
Text font size: Control the font size as it say.
1.3 Button block
After you clicked on the button block, on the right of your screen the following sidebar will open.
First button label:
Fill in the name for the first button, for example: 'Read more'
First button link:
Here you can fill in the link to a page where the first button will redirect to when clicked on.
Second button label:
Fill in the name for the second button, for example: 'Read more'
Second button link:
Here you can fill in the link to a page where the second button will redirect to when clicked on.
Button color scheme:
Select the color scheme for the buttons. You can select the color pallets here.
Show links instead of buttons:
Check this box if you don't want buttons to show, but only clickable texts.
Button Style:
Button style options include "fill" and "no fill."
A "fill" button has a colored background, making it stand out and appear interactive.
A "no fill" button has a transparent background, blending with the surrounding elements for a clean and minimalist look.
1.4 Information
After you clicked on the Information block, on the right of your screen the following sidebar will open.
Text font:
You can select the font type use primary or secondary font.
Information:
Fill in a some text, this will be shown with a checkmark in front of it. Tip: when you add multiple Information blocks below each other it will create a nice list of USP's.
Text font size:
Select the size of the text from a range of small to extra large.
Hopefully this documentation will help you understanding the Video banner, if you have any questions open the live chat and send us a message.