Una sección Hero es un fondo con una superposición de contenido, y es lo primero que ven los visitantes en tu página. Úsala para presentar tu marca y dirigir a los visitantes hacia un único paso siguiente.
Kajabi te ofrece seis secciones Hero predefinidas: Hero, Hero Countdown, Hero with Form, Hero with Image, Hero with Audio y Hero with Video. Cualquier sección también puede funcionar como hero si le agregas un fondo en su Configuración de la Sección, pero las predefinidas ya vienen con los Bloques adecuados.
Nota: La primera mitad de este artículo trata sobre el editor de página más reciente del Creador de Sitios Web y las Páginas de Kajabi. Si tu sitio usa una plantilla Premier Legacy, ve a Secciones Hero en plantillas Premier Legacy.
Agrega una sección hero en el editor de página
Desde el Dashboard, haz clic en Website y luego en Website Pages o Landing Pages.
Abre el editor de página de la página que quieres editar. Aprende a acceder al editor de página.
En el panel de la barra lateral, haz clic en Add Section.
En Hero, selecciona la sección predefinida que quieras.
Una página puede tener hasta 50 secciones.
Personaliza la configuración de la sección hero
Todas las secciones Hero predefinidas comparten la misma Configuración de la Sección:
Consejo: Puedes agregar o eliminar una Cuenta Regresiva, un Formulario, una Imagen o un Video después de agregar una sección Hero. Haz clic en Add Content en la Configuración de la Sección para agregar un Bloque. El resultado puede verse ligeramente diferente de la sección predefinida equivalente.
Elige una sección hero predefinida
Hero
Agrega un Bloque de Texto con la Configuración del Bloque Call to Action activada, como una sección de Llamado a la Acción.
Edita el Bloque de Texto y la Configuración de la Sección para cambiar la apariencia, el comportamiento y el contenido.
Hero Countdown
Agrega un Bloque de Texto y un Bloque de Cuenta Regresiva. Su aspecto es diferente al de agregar un Bloque de Cuenta Regresiva a otra sección.
Edita el Bloque de Texto, el Bloque de Cuenta Regresiva y la Configuración de la Sección.
Hero with Form
Agrega un Bloque de Texto y un Bloque de Formulario, con un texto de Aviso Legal predeterminado en el Bloque de Formulario. Su aspecto es ligeramente diferente al de agregar un Bloque de Formulario a otra sección.
Edita el Bloque de Texto, el Bloque de Formulario y la Configuración de la Sección.
Hero with Image
Agrega un Bloque de Texto con la Configuración del Bloque Call to Action activada y un Bloque de Imagen.
Edita el Bloque de Texto, el Bloque de Imagen y la Configuración de la Sección. Aprende a personalizar imágenes con Adobe Express.
Hero with Audio
Agrega un Bloque de Texto con la Configuración del Bloque Call to Action activada y un Bloque de Audio.
Edita el Bloque de Texto, el Bloque de Audio y la Configuración de la Sección. Aprende a agregar audio a una página.
Hero with Video
Agrega un Bloque de Texto con la Configuración del Bloque Call to Action activada y un Bloque de Video.
Edita el Bloque de Texto, el Bloque de Video y la Configuración de la Sección.
Secciones Hero en plantillas Premier Legacy
Las plantillas Premier Legacy tienen una sección Hero con su propia configuración de imagen o video de fondo, color de superposición, espaciado y alineación. Si un video de fondo no se reproduce bien en Premier, agrega en su lugar la sección predefinida Hero with Video en el editor de página.
Agrega una sección hero en Premier
Desde el Dashboard, haz clic en Website y luego en Website Pages.
Haz clic en el título de la página que quieres editar o haz clic en Customize.
En el editor de la barra lateral, haz clic en Add Section.
Haz clic en Hero.
Haz clic en Add.
Arrastra y suelta la nueva sección en el editor de la barra lateral para moverla. La nueva sección Hero aparece al final de la página.
Haz clic en Save.
Edita el título y el texto del cuerpo del hero
Escribe tu mensaje en el Cuadro de Texto del editor. Estas herramientas te ayudan a darle forma:
Source code para incrustar o introducir scripts de código
Headings, Inline, Blocks y Alignment para cambiar el formato
Bold, italic y strikethrough para cambiar el aspecto del texto
Color para cambiar el color del texto seleccionado
Horizontal line para dividir tu texto
Listas Ordered y unordered
Indent para aplicar sangría al texto seleccionado
Insert/Edit a link para hacer que el texto sea un enlace
Enlarge para abrir un cuadro de texto más grande
Configura la imagen o el video de fondo del hero
En Hero Section Type, elige Background Image o Background Video y luego sube tu archivo. El color de fondo (Background Color) puede reemplazar a una imagen o video, o funcionar como una superposición sobre ellos.
Nota: En la plantilla Premier, un Background Video aparece como imagen fija en dispositivos móviles.
Ajusta la superposición de la imagen del hero
Si la imagen o el video que subiste no aparece o se ve demasiado oscuro, la superposición de Background Color lo está cubriendo. Reduce la opacidad, cambia el color o desactiva la superposición.
Para desactivar la superposición:
Abre la sección Hero en el editor de plantillas.
En el editor de la barra lateral, desmarca Use Image Overlay.
Para cambiar el color y la opacidad de la superposición:
Abre la sección Hero en el editor de plantillas.
Desplázate hasta Background Color en la barra lateral.
Abre el selector de color y desliza la barra de opacidad hasta el nivel que quieras.
Configura el color del texto, la alineación y el espaciado
Cambia el color del texto de toda la sección Hero para que coincida con tu marca. Luego configura cómo se alinea el texto y cuánto espacio ocupa la sección.
Opciones de alineación (Alignment):
Left
Centered
Right
Opciones de espaciado (Spacing):
Extra Small
Small
Medium
Large
Full Height
Crea una imagen hero de altura completa
Una imagen Hero es un acento de fondo para tu página. Se ajusta al tamaño de la pantalla de cada visitante, por lo que se ve diferente en distintos dispositivos. Para crear una, configura Spacing en Full Height. En computadoras de escritorio, el fondo se desplaza con un efecto fluido.
La imagen se redimensiona desde su centro, así que edítala antes de subirla para que el punto focal principal quede en el medio. El tamaño de imagen recomendado para el fondo del Hero es de 2880 x 1200 px. En dispositivos móviles, una Background Image o un Background Video aparece como imagen fija.
Consejo: Ten cuidado con los logotipos o el texto dentro de la imagen. Es posible que no todos los visitantes puedan verlos en todos los tamaños de pantalla.