Añadir imágenes de banner

Las imágenes de cabecera se muestran cerca de la parte superior de la página y añaden un elemento visual que puede establecer el tono de tu sitio. Muchas plantillas crean automáticamente imágenes de cabecera a partir de las miniaturas de la página, pero la forma en que las visualizas y las opciones de estilo varían según la plantilla.

Esta guía te indicará los pasos a seguir para agregar, editar y modificar el estilo de una imagen de cabecera.

Consejo: Como alternativa a nuestras opciones de banner incorporado, puedes añadir un Bloque de imagen a la parte superior de la Página de Diseño de cualquier plantilla.

Estos pasos corresponden a la versión 7.0. Si tu sitio emplea la versión 7.1, consulta las opciones de estilo y diseño de la versión 7.1.

Mira el video

Consejos para formatear la imagen

Te recomendamos que cargues imágenes que tengan al menos 1500 píxeles de ancho.
No recomendamos que uses una imagen que tenga texto dentro del mismo archivo de imagen. En lugar de eso, la mayoría de las plantillas permiten superponer texto.
Puedes usar imágenes .jpg, .png, y .gif. Para conocer más sobre los requisitos de imagen, visita cómo ajustar el formato de imagen para la web.
Para obtener ayuda sobre cómo elegir una imagen que se vea genial en todos los navegadores, revisa nuestros consejos de diseño adaptable.
Si tu cabecera no se ve bien, visita nuestros consejos para resolver problemas.
Para que aparezca un mensaje personalizado en la parte superior de tu sitio, añade una barra de anuncios.

Tipos de cabeceras

La forma en que añades la imagen de cabecera depende de qué tipos de cabeceras son compatibles con tu plantilla:

Cabecera de página: se muestra en la parte superior de páginas individuales. Puedes añadirla como miniatura de página.
Cabecera de video: puede reemplazar la cabecera de página en algunas plantillas. La añades como miniatura de página.
Cabeceras de objetos de la colección: se muestran sobre las publicaciones del blog, productos y eventos individuales. Se añaden como miniatura del elemento.
Banners para todo el sitio: Se pueden mostrar en cada página. Se agregan desde Estilos del sitio.

Mira una tabla de comparación entre las opciones de cabecera por plantilla.

Añade una cabecera de página

Para añadir una cabecera de página:

Abre la página y haz clic en la nota Settings (Configuración) dentro de la vista previa del sitio.
En la pestaña Medios, haz clic en Agregar imagen para subir una imagen de tu equipo o bien, haz clic en Buscar imágenes para reutilizar una imagen o agregar una imagen de stock.
Haz clic y arrastra el punto focal para determinar cuál es el punto central de la imagen. Esto ayudará a recortarla en la mayoría de las plantillas.
Haz clic en Guardar para publicar los cambios.
Usa Estilos del sitio para modificar el estilo de tu banner.

Para editar un banner existente, haz clic en la nota Banner o vuelve a abrir la Configuración de página.

Para informarte mejor sobre qué plantillas admiten banner de página, ve las opciones de Banner por plantilla.

Consejo: Algunas plantillas también admiten banners en video.

Añade una cabecera al elemento de la colección

Las cabeceras para elementos de la colección se muestran sobre las publicaciones de blog, productos y eventos individuales.

Para añadir una cabecera para un elemento de la colección, abre el editor en ese elemento, luego añade una imagen miniatura en la pestaña Opciones. Para ver los pasos detallados, visita Agregar imágenes en miniatura.

Así se ve la cabecera de una publicación del blog en Skye:

Consejo: Algunas cabeceras para objetos de la colección admiten el texto superpuesto.

Plantillas admitidas

Estas familias de plantillas admiten banners para elementos de la colección. Algunos elementos de la colección muestran los banners de la página; por ejemplo, una publicación de blog puede incluir el banner de la Página de Blog.

Adirondack: Las publicaciones de blog, los eventos y los productos muestran imágenes en miniatura de los elementos de la colección.
Bedford: Las publicaciones de blog y los eventos muestran imágenes en miniatura de los elementos de la colección.
Farro: Las publicaciones de blog muestran imágenes en miniatura de los elementos de la colección.
Five: Las publicaciones de blog, los eventos y los productos muestran los banners de la página.
Montauk: Las publicaciones de blog y los eventos muestran los banners de la página.
Skye: Las publicaciones de blog muestran imágenes en miniatura de los elementos de la colección.
Supply: Las publicaciones de blog y los eventos muestran imágenes en miniatura de los elementos de la colección.

Añade una cabecera para todo el sitio

Los banners para todo el sitio están disponibles en la plantilla Five y en algunas plantillas descontinuadas. Se muestran en todas las páginas que no tengan un banner de página.

Para añadir un banner de todo el sitio, haz clic en su ajuste en Estilos del sitio. En Five, el ajuste es Imagen de fondo del encabezado. En las plantillas descontinuadas, el ajuste podría tener otro nombre.

Después de que hayas añadido la imagen, cambia su estilo con las opciones que aparezcan.

Nota: las cabeceras en todo el sitio nunca deben medir más de 2500 píxeles, ya que esto podría provocar problemas en los dispositivos móviles.

Añade texto superpuesto

Usa las opciones incorporadas en tu plantilla para crear una superposición de texto que se muestre delante de la imagen. Para más información, visita Agregar texto a las cabeceras.

Nota: No te recomendamos subir una imagen que tenga texto o palabras. El texto dentro de un archivo de imagen puede quedar cortado al recortar la imagen y no lo pueden indexar los motores de búsqueda.

Aquí tienes un ejemplo de texto superpuesto con la plantilla Pacific:

Añade contenido superpuesto

En algunas plantillas, puedes agregar bloques de contenido sobre una cabecera. Por ejemplo, puedes agregar un Bloque de Video sobre una imagen de cabecera, como se muestra en la captura a continuación.

Puedes añadir bloques de contenido sobre una imagen o video de banner en estas familias de plantillas:

Brine: Agrega bloques a las áreas de introducción de los banners de página y a las secciones de contenido de un Índice.
Pacific: Añade bloques a las secciones de contenidos de un Índice.

Dar estilo al encabezado

Infórmate sobre las opciones de estilo para estas familias de plantillas:

Cambia la altura de la cabecera

Para seleccionar la altura de los banners en estas familias de plantillas:

Familia de plantillas	Cómo cambiar la altura
Adirondack	Altura
Bedford	Banners de página y de video: Añade saltos de línea a la descripción de la página. Infórmate mejor. Slideshow banners (Cabeceras con diapositivas), Blog slideshow banners (Cabeceras del Blog con diapositivas) y Collection item banners (Cabeceras de objetos de la colección): altura fija.
Brine	Añade saltos de línea al área de introducción. Los banners de índice tienen distintas opciones de altura.
Farro	Usa el ajuste Header (Encabezado) en la sección Blog: Item (Blog: Elemento) para ajustar el tamaño de la cabecera.
Five	Usa los ajustes Banner Area Height (Altura del Área de Cabecera) o Banner Area Spacing (Espacio del Área de Cabecera). (Banner Area Height [Altura del Área de Cabecera] no afecta a los móviles.)
Montauk	Altura fija, según la imagen original. Las cabeceras de página siempre se muestran al ancho del contenido del sitio. No se recortan de manera vertical.
Pacific	Añade saltos de línea a la descripción de página o usa el ajuste Relleno. Conoce más. Los banners de índice tienen distintas opciones de altura.
Skye	Usa el ajuste Banner Image Width (Ancho de la Imagen de Cabecera) para ajustar el tamaño de la cabecera. La altura queda establecida por la imagen original y es proporcional al ancho.
Supply	El ancho de página es fijo, de modo que la cabecera llena el espacio restante del navegador.
Tremont	Ajuste Altura de la Imagen de Cabecera de Página
York	Altura

Cabeceras en dispositivos móviles

Las imágenes de cabecera siempre tendrán algunos inconvenientes y aparecerán recortadas en los dispositivos móviles.
A veces, los banners de video no se muestran en dispositivos móviles, dependiendo de la velocidad de conexión del visitante y de la versión del navegador. Configura que aparezca una imagen de reserva para dispositivos móviles cuando el banner de video no se pueda cargar.
La configuración de altura de cabecera no siempre se aplica a los dispositivos móviles.
El Efecto Parallax Scrolling funciona en dispositivos móviles en la mayoría de los casos.
Para las cabeceras para todo el sitio, el ajuste Fix position (posición Fija) aparecerá en algunos dispositivos móviles, incluido iOS.
Las cabeceras en todo el sitio nunca deben medir más de 2500 píxeles, ya que esto podría provocar problemas en los dispositivos móviles.

Qué sucede cuando cambias de plantilla

Las miniaturas de página, las miniaturas de elementos de la colección y las miniaturas de video se transfieren cuando cambias de plantilla. Si cambias de una plantilla que admite cualquiera de estas cabeceras a otra, en la nueva plantilla se mostrará la misma imagen de cabecera.

Cabeceras que se muestran detrás del encabezado

Las imágenes y los videos de banners pueden aparecer detrás del encabezado del sitio en estas familias de plantillas (haz clic en los enlaces para informarte mejor):

Consejo: En Five, los banners aparecen debajo del encabezado, pero el título del sitio web, el logotipo y el mensaje pueden aparecer sobre el banner.

Apilar anuncios

Algunas plantillas admiten una Página de Índice que mostrará varios banners apilados verticalmente en una página, lo que creará un efecto de desplazamiento largo. Puedes apilar los banners en un Índice, en estas familias de plantillas (haz clic en los enlaces para informarte mejor):

Nota: las cabeceras en un Índice en general tienen su propia configuración de estilo.

Las cabeceras que no se recortan

La mayoría de las imágenes de cabecera sufren algún recorte, sobre todo cuando se las ajusta a diferentes tamaños de pantalla. Esto ayuda a que tus imágenes se vean de la mejor manera dentro del diseño de tu sitio y en diferentes tamaños de navegador.

Puedes crear banners que no se recorten en estas familias de plantillas:

Montauk: Los banners no se recortan verticalmente. Siempre se muestran con el mismo ancho del contenido del sitio. Los banners altos y delgados pueden pixelarse, ya que será necesario extenderlos para cubrir el ancho.
Pacific: Crea una imagen de banner que no se recorte añadiendo una Página de Galería a una Página de Índice.

Consejo: Cambiar el punto focal de la miniatura podría ayudarte con el recorte en los banners de página y elementos de la colección. Para recibir más ayuda sobre los recortes, visita nuestros consejos para la solución de problemas.

Cabeceras tipo presentación de diapositivas

En estas familias de plantillas, puedes crear banners en modo presentación.

Brine: Crea una Página de Índice con una presentación como sección superior.
Bedford: Crea un banner en modo presentación en las Páginas de Diseño con un Bloque de galería promocionado o un banner de Página de Blog en modo presentación con las publicaciones destacadas.
Pacific: Crea una Página de Índice con una galería en modo presentación en su sección superior.

Consejo: En otras plantillas, agrega un Bloque de galería de presentación a la parte superior de una Página de Diseño para lograr un efecto similar.

Crear cabeceras en otras plantillas

Crea el efecto de un banner en cualquier plantilla agregando un Bloque de imágenes a la parte superior de una Página de Diseño.
Cada diseño tiene sus propias opciones de texto superpuesto.

Los Bloques de Imagen se muestran dentro del relleno del área de contenido principal. No tienen opciones incorporadas de sangrado completo.

Consejo: Algunas plantillas tienen áreas de encabezado de página que soportan bloques, incluso Bloques de Imagen, Texto y Video.

Imágenes transparentes

Si usas un archivo .png con fondo transparente, los siguientes ajustes modifican el color que aparece detrás del banner en estas familias de plantillas.

Adirondack: Color de fondo del contenido
Bedford: Color de la superposición del banner
Brine: Color de la superposición en la sección Principal: Superposición
Farro: Color de fondo de la publicación. El Color de la superposición también afecta el color.
Five: Fondo del encabezado
Montauk: Fondo del lienzo
Pacific: Color de la superposición
Skye: Fondo del sitio
Supply: Color de página
Tremont: Color del fondo del sitio
York: Color del fondo en la sección Banner.

Consejo: En la mayoría de los casos, el color se muestra con un 100 % de opacidad. Si tienes problemas para conseguir el color que deseas, puedes ajustar la transparencia.

Opciones de cabecera por plantilla

Estas familias de plantillas admiten uno o más tipos de banners:

Familia de plantillas	Cabeceras de página: páginas compatibles	Cabeceras en video	Cabeceras para elementos de la colección: elementos compatibles	Otras opciones
Adirondack	Diseño Blog Eventos Productos	Sí	Publicaciones de blog Eventos Productos	Efecto de atenuación al desplazarse (vista de escritorio)
Bedford	Diseño Álbum Blog Eventos Productos	Sí	Publicaciones de blog Eventos	Cabeceras tipo presentación de diapositivas Cabeceras tipo presentación de diapositivas para la Página de Blog
Brine	Diseño Álbum Blog Eventos Galería Productos	Sí		Efecto parallax scrolling
Farro			Publicaciones en blogs
Five	Diseño Álbum Blog Eventos Galería Productos	Sí	Las cabeceras de página se muestran en publicaciones de blog, eventos y productos	Cabeceras en todo el sitio
Montauk	Diseño Blog Eventos Índice	Sí	Las cabeceras de página se muestran en publicaciones de blog, eventos
Pacific	Diseño Álbum Blog Eventos Galería Productos	Sí
Skye			Publicaciones en blogs
Supply	Diseño Blog Álbum Eventos		Publicaciones de blog Eventos	La cabecera se muestra a la derecha, excepto en los dispositivos móviles.
Tremont	Diseño Álbum Blog Eventos Galería Productos	Sí		Superposición de página
York	Diseño Álbum Blog Eventos Galería Proyecto Productos Índice			Efecto de difuminado

Eliminar una imagen de banner

Para eliminar una imagen de banner, abre el área específica del banner y borra la imagen.

Banners de página: En la pestaña de Medios de la configuración de la página, haz clic en Borrar imagen.
Banners de video: En la pestaña Medios de las configuraciones de la página, presiona Video y borra la URL del video.
Banners con elementos de una colección: Abre el elemento (publicación de blog, producto o evento), haz clic en la pestaña Opciones y, a continuación, en el icono de la papelera.
Banners globales del sitio: Abre el ajuste específico en Estilos del sitio y presiona Eliminar.