Banner Video With CTA

Step by Step

 

1. In the Layout Canvas of your page, click on the “+” button, search for the Banner Video with CTA in the components list, and drag and drop in the position that you want.

 

2. To configure it, just click twice on the component.

 

Video Configuration

• Video platform: select the provider of your video.

• URL video: paste here the URL video address.

 

• Desktop/Mobile Video Thumb: select an image file to use as a video thumbnail.

• Gradient Overlay on thumb: select "ON" to activate the overlay on the video thumb

 

• Player Button: to change the Player button icon, select an image. This file must be in SVG format.

• SVG Opacity: roll the point to define the opacity of the Player button, being 0 totally transparent and 1 totally visible.

 

CTA Configuration

• Banner video text: inform the text that will be displayed on the banner.

 

• Font: select a font family type on the list and choose a color for the text.

• Heading tag: choose a heading tag on the list. To know which heading tag type to choose click here.

 

• Font size:  roll the ball to select the font size (for desktop and mobile). 

 

Call To Action

• URL: inform the URL link and choose a target option.

 

• Button Text: write the label text of the button, choose a font family and select a color text option.

 

• Button Style: select the color options for the button normal and on hover. Also, choose an option of border-radius. 

 

• Modal Configuration: choose a color for the overlay background and close button.

• Overlay transparent: Leave the toggle OFF if you want a solid color or select ON if you want a transparent color.

 

3. Click on "Apply" to save it.