Cómo configurar una sección de héroe

La portada es lo primero que la gente ve en tu página. Presenta el contenido y les pide que lo hagan o resume lo que hace que su proyecto sea único. Una portada generalmente contiene una imagen de fondo: una foto elegante, un video convincente, color, degradado o textura.

Aquí hay algunos consejos que lo ayudarán a trabajar con portadas, fondos y videos de manera más eficiente.

A diferencia de las páginas de revistas, las páginas de sitios web no tienen un área visible fija. Cada dispositivo tiene un tamaño de pantalla y una relación de aspecto diferentes. Además, las áreas visibles varían de un navegador a otro. Por ejemplo, los navegadores con una barra de marcadores fija proporcionan un área visible más pequeña. La imagen de portada se recorta para que aparezca sin bordes en la pantalla.

Cargue una imagen de fondo de portada en el panel Contenido del bloque→ Imagen de fondo.

Para que la imagen se vea genial, sigue estos consejos sobre la mejor configuración para la imagen de fondo.

Si no está satisfecho con la calidad de la imagen, edítela con anticipación en un editor de gráficos utilizando el artículo de referencia a continuación.

Antes de elegir una imagen, lea nuestro artículo "Cómo crear una portada para un sitio web" en Tilda Education. Contiene consejos para crear tu propia portada y enlaces a sitios web de fotografía de archivo de calidad.

El texto es la parte más importante de cualquier portada, ya que es el primer mensaje que ve un visitante del sitio web. Las portadas cuentan con un encabezado, un subtítulo, una descripción y una nota superior para transmitir el mensaje y resaltar lo que es importante.

Puedes llenar las portadas con texto de dos maneras: usando el panel Contenido del bloque o haciendo clic en el texto mientras editas la página.

Puede dar formato al texto utilizando el panel de control en la parte superior o cambiando el tamaño, el color u otros parámetros del texto en el panel Configuración del bloque → Tipografía.

Para crear una portada interesante, consulte el artículo Cómo crear una portada para un sitio web con ejemplos prácticos de combinaciones de texto e imágenes de fondo y la guía Creación de una propuesta de venta única (PVU) para un sitio web para que su portada sea atractiva para los visitantes. menos de diez segundos.

Una cubierta delgada tiene una altura del 60% o 70%, no del 100%. Cumple una función más formal a medida que la atención del usuario se desplaza a la información que sigue a la portada.

Para crear una cubierta de este tipo, vaya al campo " Altura" en la configuración del bloque. Puede establecer la altura en píxeles (por ejemplo, 400px) o unidades de medida de altura de la ventana gráfica, porcentaje (1vh es el 1% del área visible). Recomendamos establecer la altura en vh.

Cómo cambiar el tono de la imagen de fondo
Cambiamos el tono de la imagen cuando queremos que el texto de la portada sea fácilmente legible. Para ello, abra el panel Configuración del bloque de cubierta y ajuste el color del filtro. Aquí puede ver una imagen de portada a la que se ha aplicado un color de filtro. A veces, es el color de la marca o el color primario de un sitio web el que se utiliza para tonificar.

Cómo mezclar el color en el color del siguiente bloque
A veces, la cubierta debe mezclarse suavemente con el siguiente bloque. Para lograr este efecto, el color del filtro final debe establecerse en 100% de opacidad. El color del filtro debe ser el mismo que el color del siguiente bloque.

Hacer que la cubierta sea el doble de alta mientras aplicas estos dos ajustes a la vez te ayudará a lograr el efecto que se muestra a continuación:

Sube un video a YouTube o encuentra uno existente allí. Luego vaya al panel Contenido del bloque de portada y pegue el enlace del video en el campo correspondiente. De esta manera, puedes crear una portada de video.

Puede utilizar convertidores en línea para crear vídeos WebM y MPEG-4 y alojarlos en su servidor o en el sitio web del servicio de conversión. Por ejemplo, gfycat.com permite tanto la conversión como el alojamiento.

Abra el panel Configuración del bloque de portada y agregue los enlaces de video a los campos correspondientes.

¿Por qué usar ambos formatos?
Los navegadores utilizan diferentes formatos, por lo que no existe un formato unificado. Cuando un usuario llega a su sitio web, verá un video que su navegador puede reproducir. De lo contrario, la cubierta aparecerá vacía.

Las pantallas tienen una amplia gama de relaciones de aspecto y la cubierta puede aparecer de manera diferente en diferentes dispositivos. Si bien las relaciones de aspecto comunes no harán cambios drásticos en la imagen de portada, los dispositivos móviles pueden alterarla más allá del reconocimiento. Por favor, tómese el tiempo para aprender cómo crear una cubierta compatible con dispositivos móviles (o cualquier otro bloque) utilizando esta guía completa.

Por qué los videos de portada no se reproducen en dispositivos móviles

Debido a las peculiaridades del sistema operativo móvil, las cubiertas de video no se reproducirán en dispositivos móviles. El sistema operativo móvil deshabilita la reproducción automática. Si ha hecho una portada de video de reproducción automática, no olvide agregar una imagen en el panel Contenido del bloque de portada. La imagen aparecerá cuando el video no se pueda reproducir, es decir, cuando los visitantes accedan a su sitio web desde teléfonos inteligentes o tabletas.

Puede encontrar un formulario de entrada de datos en las siguientes portadas: CR26 (Portada con un campo de entrada), CR26AN (Portada con múltiples entradas), CR32 (Portada con un formulario alineado a la derecha), CR34 (Portada con una cuenta regresiva y formulario de suscripción ), CR36 (Portada con imagen o video de YouTube y formulario en dos columnas)

Puede obtener una vista previa de cómo se verá el formulario visitando la Portada de la → Biblioteca de bloques y eligiendo su opción favorita.

Los formularios en las portadas realizan la misma función y se pueden personalizar de la misma manera que los formularios normales. Para personalizar el formulario, lea el artículo Cómo configurar formularios de captura de datos.

Las portadas de los bloques CR34 y CR35 cuentan con un temporizador de cuenta regresiva hasta un momento específico en el futuro. Esta función es especialmente útil si está creando una página para una promoción o un evento.

En el panel Contenido de estos bloques, puede establecer la fecha, la hora y la zona horaria de la hora de inicio del evento.

Si la fecha está configurada correctamente, aparecerá un temporizador en la portada.

Los bloques con cubiertas son ejemplos probados de buen diseño que se adaptan automáticamente a todos los dispositivos. Pero a veces es necesario añadir un elemento o crear una portada personalizada. Esto se puede hacer usando el editor Zero Block de Tilda.

Muchos bloques de portada se pueden convertir a Zero Block para una edición adicional. Para hacer esto, vaya a la Configuración de bloques, desplácese hacia abajo y haga clic en el botón "Convertir a Zero Block".

Después de eso, la portada se convierte en Zero Block. El formato se adaptará correctamente. Si ya ha realizado los cambios, no se guardarán, así que tenga cuidado al convertir la portada.