All Collections
Themes
Theme Switch
Theme Switch: Section 1: Hero Image
Theme Switch: Section 1: Hero Image
Niels van Vlerken avatar
Written by Niels van Vlerken
Updated over a week ago
section1.jpg
blobid0.png

Variant
Select the variant for the hero image here (large banner on the homepage)

- Background right - text left - full width: Image / video right, text left full width.
- Background right - text left - container: Image / video on the right, text on the left at the width of the container.
- Background left - text right - full width: Image / video left, text right at full width.
- Background left - text right - container: Image / video on the right, text on the right at the width of the container.
- Background fullscreen - text center left: Full width image / video, text center left.
- Background fullscreen - text center right: Full width image / video, text center right.
- Background fullscreen - text center center: Full width image / video, text in the middle.
- Background fullscreen - text bottom left: Full width image / video, text bottom left.
- Background fullscreen - text bottom right: Full width image / video, text bottom right.
- Background fullscreen - text bottom center: Full width image / video, text bottom center.

Section height
Set the height of this section, choose from Small, Medium and Large.

Color palette
Set the color palette for the hero image section, you can adjust this color palette at visual -> color pallete

Show border radius
Provide rounded corners in the hero image. Only available for the variants with "container".

Overlay opacity
This option only works for the variants with full screen. This creates a "color layer" over the video, making the text clearer.
Value must be between 0 and 100.
0 = invisible, 100 = fully visible (color of the overlay)

Title size
Select the size of the title in the heroimage here.
Heading 1 to heading 4.

Title
Enter the title that would appear in the banner / slider here.

Text
Enter the text that would appear in the banner / slider here

Call to action text
Enter the text for the button here

blobid2.png

Call to action link
Enter the link for the call to action button here

Background image
Upload the background image you want to use in the banner / slider here
Note: make sure there is nothing in the background video, otherwise this would not work.

Background video
Enter the link of the video here, upload the video under tools and copy the link.

Show label on banner
Do you want an extra banner on the banner / video? Enable this option on Square block or Circle block.
Square block: Square / rectangular block
Circle block: around block
None: hide block

Label title size
Select the size of the title in the label here.
Heading 1 to heading 4.

Label title
Enter the title of the label here.

blobid0.png

Label text
Enter the text for the label.
Tip: enter a - in front of your text, this will automatically be converted to a check mark.
Sample text: <p> - More chance of one buying block </p> <p> - Higher customer satisfaction </p> <p> - Average + 30% conversion </p>

Label link text
Enter the text for the button here, in this case "more information"

Label link url
Enter the link here where the button should lead the customer.

Mobile: height background image or video
Select the height of the background video on mobile.
Choice of: 1/4, 2/4, 3/4, 4/4

Mobile: amount of pixels overflowing the background image or video

How many pixels can the video go outside the box?
Default: 150px

Did this answer your question?