Cómo crear una sección de héroes
Creación y edición de la portada de un sitio web
Cómo elegir la imagen de fondo adecuada: dimensiones, formato y proporciones
Configuración del título, subtítulo y otros textos
Cómo hacer una portada estrecha que no ocupe toda la altura de la primera pantalla
Cómo aumentar la legibilidad creando un filtro de color para una imagen de fondo, rellenar una portada con un color sólido y hacer la transición al siguiente bloque
Configurar un vídeo que se reproducirá en segundo plano o al pulsar el botón Reproducir
Cómo hacer que una portada se vea bien en dispositivos móviles
Configurar un formulario de recogida de datos en la página de inicio
Añadir temporizadores de cuenta atrás a una hora y fecha específicas
Cómo convertir y editar una portada en Zero Block
La portada es lo primero que la gente ve en su página. Introduce el contenido y les incita a ir a por él o resume lo que hace que tu proyecto sea único. Una portada suele contener una imagen de fondo: una foto elegante, un vídeo atractivo, un color, un degradado o una textura.
Aquí tienes algunos consejos que te ayudarán a trabajar con portadas, fondos y vídeos de forma más eficaz.
Aquí tienes algunos consejos que te ayudarán a trabajar con portadas, fondos y vídeos de forma más eficaz.
Área visible
A diferencia de las páginas de las revistas, las de los 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 favoritos fija ofrecen un área visible más pequeña. La imagen de portada se recorta para que aparezca sin bordes en la pantalla.
Imagen de fondo
Sube una imagen de fondo de portada en el panel Contenido del bloque→ Imagen de fondo.
Para que la imagen tenga un aspecto estupendo, sigue estos consejos sobre los mejores ajustes para la imagen de fondo.
El mejor tamaño:
Estos son los mejores parámetros para las imágenes subidas:
Formato: JPG
Ancho: 1680px
Resolución: 72 ppp
Modelo de color: RGB
Compresión: 10
Estos son los mejores parámetros para las imágenes subidas:
Formato: JPG
Ancho: 1680px
Resolución: 72 ppp
Modelo de color: RGB
Compresión: 10
Si no está satisfecho con la calidad de la imagen, edítela previamente en un editor gráfico utilizando el artículo de referencia que figura 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.
Formato de texto
El texto es la parte más importante de cualquier portada, ya que es el primer mensaje que ve el visitante de un sitio web. Las portadas cuentan con un título, un subtítulo, una descripción y una nota superior para transmitir el mensaje y destacar lo importante.
Puedes rellenar las portadas con texto de dos formas: utilizando el panel Contenido del bloque o haciendo clic en el texto mientras editas la página.
Puedes rellenar las portadas con texto de dos formas: utilizando el panel Contenido del bloque o haciendo clic en el texto mientras editas la página.
Edición de texto al hacer clic en un bloque
Edición de texto en la sección Contenido de un bloque
Puede dar formato al texto utilizando tanto el panel de control de la parte superior como cambiando el tamaño, el color u otros parámetros del texto en el panel Configuración del bloque → Tipografía.
Formatear el texto con el panel de control superior
Cambios de formato en el panel Configuración del bloque
Para crear una portada atractiva, consulte el artículo Cómo crear una portada para un sitio web con ejemplos prácticos de combinaciones de texto e imagen de fondo y la guía Cómo crear una propuesta única de venta (USP) para un sitio web para que su portada resulte atractiva a los visitantes en menos de diez segundos.
Altura de la tapa
Una portada fina tiene una altura del 60% o 70%, no del 100%. Cumple una función más formal, ya que la atención del usuario se desplaza a la información que sigue a la portada.
Para crear una portada de este tipo, vaya al campo "Altura" en la configuración del bloque. Puede definir la altura en píxeles (por ejemplo, 400px) o en unidades de medida de la altura de la ventana gráfica, en porcentaje (1vh es el 1% del área visible). Le recomendamos que defina la altura en vh.
Para crear una portada de este tipo, vaya al campo "Altura" en la configuración del bloque. Puede definir la altura en píxeles (por ejemplo, 400px) o en unidades de medida de la altura de la ventana gráfica, en porcentaje (1vh es el 1% del área visible). Le recomendamos que defina la altura en vh.
Color de la cubierta: Ajustes del filtro
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 portada y ajuste el color del filtro. Aquí puedes 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 el tono.
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 portada y ajuste el color del filtro. Aquí puedes 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 el tono.
Configuración del filtro en el panel Contenido del bloque
Tilda Cubierta del Centro de ayuda: el filtro se vuelve gradualmente de color naranja sólido.
Cómo fundir el color en el color del bloque siguiente
A veces la cubierta debe fundirse suavemente en el bloque siguiente. Para conseguir este efecto, el color del filtro final debe fijarse al 100% de opacidad. El color del filtro debe ser el mismo que el del bloque siguiente.
A veces la cubierta debe fundirse suavemente en el bloque siguiente. Para conseguir este efecto, el color del filtro final debe fijarse al 100% de opacidad. El color del filtro debe ser el mismo que el del bloque siguiente.
Hacer que la cubierta sea el doble de alta y aplicar estos dos ajustes a la vez le ayudará a conseguir el efecto que se muestra a continuación:
Gradiente y relleno de color
Hay dos parámetros de tonalidad en los ajustes del bloque: opacidad y color. Ajuste la opacidad al 100% y seleccione un color, que será el color de la portada.
Si selecciona colores diferentes, uno se mezclará con el otro suavemente.
Portada del vídeo
Puedes utilizar un vídeo en lugar de una imagen. Hay dos formas de hacerlo.
Cómo añadir un vídeo de YouTube
Sube un vídeo a YouTube o busca uno existente allí. A continuación, ve al panel Contenido del bloque de portada y pega el enlace del vídeo en el campo correspondiente. De este modo, podrás crear una portada de vídeo.
Nuestra empresa
Expertos en el arte
Art Basel organiza anualmente exposiciones de arte moderno y contemporáneo de alta calidad en Basilea, Miami Beach y Hong Kong.
Cómo añadir vídeos WebM y MPEG-4
Puedes utilizar conversores en línea para crear vídeos WebM y MPEG-4 y alojarlos en tu servidor o en el sitio web del servicio de conversión. Por ejemplo, gfycat.com permite tanto la conversión como el alojamiento.
Abre el panel Configuración del bloque de portada y añade los enlaces de vídeo a los campos correspondientes.
Abre el panel Configuración del bloque de portada y añade los enlaces de vídeo a los campos correspondientes.
¿Por qué utilizar ambos formatos?
Los navegadores utilizan formatos diferentes, por lo que no existe un formato unificado. Cuando un usuario entre en tu web, verá un vídeo que su navegador pueda reproducir. De lo contrario, la portada aparecerá vacía.
Los navegadores utilizan formatos diferentes, por lo que no existe un formato unificado. Cuando un usuario entre en tu web, verá un vídeo que su navegador pueda reproducir. De lo contrario, la portada aparecerá vacía.
Punto importante: Actualmente, no es posible subir tu archivo de vídeo a Tilda, pero puedes utilizar servicios de terceros que proporcionan un enlace directo al archivo de vídeo.
Algunos de los servicios en la nube más populares también proporcionan un enlace directo a un archivo. Por ejemplo, para obtener un enlace directo a un archivo de vídeo en Dropbox, tienes que sustituir el enlace dropbox.com por dl.dropboxusercontent.com. También puedes subir el archivo a tus servicios de alojamiento como Selectel, y otros.
Algunos de los servicios en la nube más populares también proporcionan un enlace directo a un archivo. Por ejemplo, para obtener un enlace directo a un archivo de vídeo en Dropbox, tienes que sustituir el enlace dropbox.com por dl.dropboxusercontent.com. También puedes subir el archivo a tus servicios de alojamiento como Selectel, y otros.
Portada para móviles
Las pantallas tienen una amplia gama de relaciones de aspecto, y la portada puede aparecer de forma diferente en distintos dispositivos. Aunque las relaciones de aspecto comunes no provocan cambios drásticos en la imagen de la portada, los dispositivos móviles pueden alterarla hasta hacerla irreconocible. Tómate tu tiempo para aprender a crear una portada adaptada a dispositivos móviles (o cualquier otro bloque) con esta completa guía.
Por qué los vídeos de portada no se reproducen en el móvil
Debido a las peculiaridades del SO móvil, las portadas de vídeo no se reproducirán en los dispositivos móviles. Los SO móviles desactivan la reproducción automática. Si has creado una carátula de vídeo con reproducción automática, no olvides añadir una imagen en el panel Contenido del bloque de la carátula. La imagen aparecerá cuando no se pueda reproducir el vídeo, es decir, cuando los visitantes accedan a tu sitio web desde smartphones o tablets.
Debido a las peculiaridades del SO móvil, las portadas de vídeo no se reproducirán en los dispositivos móviles. Los SO móviles desactivan la reproducción automática. Si has creado una carátula de vídeo con reproducción automática, no olvides añadir una imagen en el panel Contenido del bloque de la carátula. La imagen aparecerá cuando no se pueda reproducir el vídeo, es decir, cuando los visitantes accedan a tu sitio web desde smartphones o tablets.
Formulario en portada
Puede encontrar un formulario de entrada de datos en las siguientes portadas: CR26 (Portada con un campo de entrada), CR26AN (Portada con entradas múltiples), CR32 (Portada con un formulario alineado a la derecha), CR34 (Portada con una cuenta atrás y formulario de suscripción), CR36 (Portada con una imagen o vídeo de YouTube y formulario en dos columnas)
Puede previsualizar el aspecto que tendrá el formulario visitando la Biblioteca de bloques → Portada y eligiendo su opción favorita.
Puede previsualizar el aspecto que tendrá el formulario visitando la Biblioteca de bloques → Portada y eligiendo su opción favorita.
Los formularios de las portadas cumplen la misma función y pueden personalizarse del mismo modo que los formularios normales. Para personalizar el formulario, lea el artículo Cómo configurar formularios de captura de datos.
Añadir un temporizador de cuenta atrás
Las portadas de los bloques CR34 y CR35 incluyen una cuenta atrás hasta una hora determinada 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.
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á ajustada correctamente, aparecerá un temporizador en la portada.
Convertir una portada en Zero Block
Los bloques con portadas 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 puede hacerse con el editor Zero Block de Tilda.
Muchos bloques de portada pueden convertirse a Zero Block para editarlos. Para ello, vaya a Configuración de bloques, desplácese hacia abajo y haga clic en el botón "Convertir a Zero Block".
A continuación, la portada se convierte a Zero Block. El formato se adaptará correctamente. Si ya has hecho los cambios, no se guardarán, así que ten cuidado al convertir la portada.
Ejemplo: Cómo recortar una cubierta
Imagen vertical
Imagen cuadrada
Imagen horizontal estrecha
Imagen horizontal, relación de aspecto 16:9
