VIDEO HERO WITH TEXT AND CTA

by HAL Company

Documentation
Easy to setup

VIDEO HERO WITH TEXT AND CTA Configuration

 

Below you will learn how to use the cards and how to configure them.

Configuration

1. Add Video Hero with Text and CTA to your section

2. Lo primero que debes hacer es cargar el video que usarás de fondo. Puedes elegir un video mediante URL o bien, cargar un video a HubSpot.

3. Luego podrás definir el titulo y el texto que contendra tu Video Hero

4. Si quieres acompañar el contenido con una imagen, puede asignarsela aquí. Tambien puedes indicar si quieres las imagen de lado izquierdo o lado derecho. Esta imagen, en la vista mobile, desaparecerá. Tambien puedes agregar el texto alternativo de la imagen.

5. Tambien, puedes agregar un CTA a tu Video Hero para enlazar a donde tu desees, y puedes asignar el texto del bóton.

 

Style

1. En la pestaña de Estilos, podras ver las opciones, siendo la primera, el alto que quieres usar para tu Video Hero. Puedes optar por que sea del alto completo, o puedes definirlo a tu gusto.

2. En el apartado de opciones para el texto, vas a poder definir el tamaño del titulo, el color del texto, y el color de la linea. La linea, puede estar ubicada en 5 lugares diferentes y puedes elegir el espesor de la misma. Si no la quieres usar, puede elegir el espesor en 0. Otra cosa que puedes hacer es alinear el contenido de texto y del titulo

3. Al final de este apartado, podras setear las animaciones de caja contenedora, del titulo y del texto.

4. Luego, en el apartado de Background Settings, puedes aplicar uno de los filtros preseteados para el video. Puede aplicarle un overlay tambien, usando los que vienen incluidos, o un personalizado. Si eliges esta ultima opcion, puedes elegir el color y la opacidad. Tienes tambien la opcion de elegir un overlay para la caja de contenido y si quieres que el video hero tenga bordes redondeados, puedes aplicarlo.

5. El proximo apartado, esta destinado a hacer los ajustes del CTA. Puedes elegir los colores y sus variantes en estado de pasar el raton por encima. Al final, puedes elegir la animación del CTA y la alineación horizontal y vertical del mismo.

6. Para finalizar, puedes elegir una animación para la imagen en caso de que hayas decidido usarla.

WhatsApp