Nota: Si bien hemos traducido las guías más populares al español, algunas guías están disponibles solamente en inglés.
Agregar una imagen de cabecera

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 cabecera incorporada, puedes añadir un Bloque de Imagen en la parte superior de la Página Normal en cualquier plantilla.

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 mostrar un mensaje personalizado en la parte superior de tu sitio, añade una Barra de Anuncios.
  • En todas las plantillas, puedes añadir un Bloque de Imagen en la parte superior de una Página Normal para crear el aspecto de una cabecera.

Tipos de cabeceras

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

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:

  1. Abre la página y haz clic en la nota Settings (Configuración) dentro de la vista previa del sitio. También puedes abrir la Configuración de Página.
  2. En la pestaña Media (Medios), haz clic en Add an image (Añadir una imagen).
  3. Haz clic en Image (Imagen) para añadir una imagen de tu computadora o haz clic en Getty para adquirir la licencia de una imagen prediseñada por 10 dólares.
  4. 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.
  5. Haz clic en Guardar para publicar los cambios.
  6. Usa el Editor de Estilo para modificar el estilo de tu cabecera.
Consejo: Para editar una cabecera existente, haz clic en la nota Banner (Cabecera), o vuelve a abrir la Configuración de Página.

editor.png

Plantillas admitidas

Las siguientes plantillas admiten cabeceras de página. Las plantillas están agrupadas por familia.

Plantilla Páginas compatibles
Adirondack Páginas Normales, Blog, Eventos y Productos

Familia Bedford

Anya, Bryant, Bedford, Hayden

Páginas Normales, Álbum, Blog, Eventos y Productos

Familia Brine

Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West

Páginas Normales, de Álbum, Blog, Eventos, Galería y Productos
Five Páginas Normales, de Álbum, Blog, Eventos, Galería y Productos

Familia Montauk

Julia, Kent, Montauk, Om

Páginas Normales, Blog, Eventos y la Página de Índice Principal

Familia Pacific

Charlotte, Fulton, Horizon, Naomi, Pacific

Páginas Normales, de Álbum, Blog, Eventos, Galería y Productos
Supply Páginas Normal, de Blog, de Álbum y de Eventos

Familia Tremont

Camino, Carson, Henson, Tremont

Páginas Normales, de Álbum, Blog, Eventos, Galería y Productos

Familia York

Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York

Páginas Normales, de Álbum, Blog, Eventos, Galería, Proyecto, Productos y la Página de Índice principal

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.

skye-blog-post-header.png

Plantillas admitidas

Las cabeceras para objetos de la colección son compatibles con las siguientes plantillas: Algunos objetos de la colección muestran la cabecera de página; por ejemplo, una publicación de blog mostrará la cabecera de Página de Blog. Las plantillas están agrupadas por familia.

Plantilla Objetos de la colección Qué muestra
Adirondack Entradas del blog, eventos, productos Miniaturas de los elementos de la colección

Familia Bedford

Anya, Bryant, Bedford, Hayden

Entradas del blog, eventos Miniaturas de los elementos de la colección
 

Familia Farro

Farro, Haute

Publicaciones en blogs Miniaturas de los elementos de la colección
 

Five

Entradas del blog, eventos, productos Cabecera de página

Familia Montauk

Julia, Kent, Montauk, Om

Entradas del blog, eventos Cabecera de página

Familia Skye

Foundry, Indigo, Ready, Skye, Tudor

Publicaciones en blogs Miniaturas de los elementos de la colección
Supply Entradas del blog, eventos Miniaturas de los elementos de la colección

Añade una cabecera para todo el sitio

Las cabeceras para todo el sitio están disponibles en la plantilla Five y en algunas otras plantillas descontinuadas. Se muestran en cualquier página que no tenga una cabecera de página.

Para añadir una cabecera de página para todo el sitio, sigue los pasos en cabeceras Five. Si estás usando una plantilla descontinuada, debes seguir los mismos pasos, solo que el ajuste imagen de cabecera puede tener otro nombre.

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:

pacific-page-banner.png

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 agregar bloques de contenido sobre una imagen de cabecera o video en las siguientes plantillas. Las plantillas están agrupadas por familia.

Familia Brine

Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West

Agrega bloques en las áreas de introducción de las cabeceras de página y secciones de contenido de un Índice.

Familia Pacific

Charlotte, Fulton, Horizon, Naomi, Pacific

Agrega bloques a secciones de contenido en unÍndice.

video-block-on-background-image.png

Dar estilo al encabezado

Para obtener más información sobre las opciones de estilo para las cabeceras de tu plantilla, visita la guía de tu plantilla:

  • Adirondack
  • Familia Bedford - Anya, Bryant, Bedford, Hayden
  • Familia Brine - Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West
  • Familia Farro - Farro, Haute
  • Five
  • Familia Montauk - Julia, Kent, Montauk, Om
  • Familia Pacific - Charlotte, Fulton, Horizon, Naomi, Pacific
  • Familia Skye - Foundry, Indigo, Ready, Skye, Tudor
  • Supply
  • Familia Tremont - Camino, Carson, Henson, Tremont
  • Familia York - Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York

Cambia la altura de la cabecera

Esta es una visión general de cómo configurar la altura de la cabecera en cada plantilla. Para obtener ayuda detallada sobre cómo cambiar el estilo, mira las guías de las plantillas desde los enlaces de la sección anterior. Las plantillas están agrupadas por familia.

Plantilla

Cómo cambiar la altura

Adirondack

Altura

Familia Bedford

Anya, Bryant, Bedford, Hayden

Cabeceras de Página y Video: Añade saltos de línea a la descripción de página. Conoce más.

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.

Familia Brine

Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West

Añade saltos de línea al área de introducción.

Las cabeceras de índice tienen opciones de altura por separado.

Familia Farro

Farro, Haute

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.)

Familia Montauk

Julia, Kent, Montauk, Om

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.

Familia Pacific

Charlotte, Fulton, Horizon, Naomi, Pacific

Añade saltos de línea a la descripción de página o usa el ajuste Padding (Relleno). Conoce más.

Las cabeceras de índice tienen opciones de altura por separado.

Familia Skye

Foundry, Indigo, Ready, Skye, Tudor

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.

Familia Tremont

Camino, Carson, Henson, Tremont

Ajuste Altura de la Imagen de Cabecera de Página

Familia York

Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, 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.
  • Las cabeceras en video no se mostrarán en los dispositivos móviles. Crea una imagen alternativa para móviles que se mostrará en lugar de la cabecera en video.
  • 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 videos de cabecera de las siguientes plantillas se pueden mostrar detrás del contenido del encabezado del sitio, como el título del sitio y la navegación de la página. Haz clic en el enlace para ver más información. Las plantillas están agrupadas por familia.

  • Familia Bedford - Anya, Bryant, Bedford, Hayden
  • Familia Brine - Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West
  • Familia Pacific - Charlotte, Fulton, Horizon, Naomi, Pacific
  • Familia Tremont - Camino, Carson, Henson, Tremont
Nota: las cabeceras de Five siempre se muestran debajo del encabezado, pero el título del sitio, el logo y la descripción se pueden mostrar como texto superpuesto en la cabecera.

Así es como se ve en la plantilla Bedford:

bedford-transparent-header.png

Cabeceras apiladas en un índice

Algunas plantillas admiten una Página de Índice que mostrará varias cabeceras apiladas verticalmente en una página, lo que creará un efecto de desplazamiento largo.

Aquí tienes una lista de plantillas compatibles con esta opción. Las plantillas están agrupadas por familia.

  • Familia Bedford - Anya, Bryant, Bedford, Hayden
  • Familia Brine - Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West
  • Familia Pacific - Charlotte, Fulton, Horizon, Naomi, Pacific
  • Familia York - Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York
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.

En algunas plantillas podrás crear cabeceras que no se recorten:

  • Las cabeceras en la familia Montauk (Julia, Kent, Montauk, Om) no se recortan de manera vertical. Siempre se muestran al ancho del contenido del sitio. Ten en cuenta que las cabeceras altas y delgadas pueden pixelarse, ya que será necesario estirarlas para cubrir el ancho.
  • En la familia Pacific (Charlotte, Fulton, Horizon, Naomi, Pacific), puedes crear una imagen de cabecera que no se recorte si añades una Página de Galería dentro de una Página de Índice.
  • Para recibir más ayuda sobre los recortes, visita nuestros consejos para resolver problemas.
Consejo: Cambiar el punto focal de la miniatura podría ayudarte con el recorte en las cabeceras de página y elementos de la colección.

Cabeceras tipo presentación de diapositivas

Puedes crear una cabecera con presentación de diapositivas en las siguientes plantillas. Las plantillas están agrupadas por familia.

Consejo: En otras plantillas, agrega un Bloque de Galería de Presentación de Diapositivas en la parte superior de una Página Normal para lograr un efecto similar.
Plantilla Notas

Familia Brine

Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West

Crea una Página de Índice con una presentación de diapositivas como sección superior. Conoce más.

Familia Bedford

Anya, Bryant, Bedford, Hayden

Crea una cabecera con diapositivas en Páginas Normales con un Bloque de Galería como el primer bloque de la página, o en Páginas de Blog utilizando Entradas Destacadas. 

Familia Pacific

Charlotte, Fulton, Horizon, Naomi, Pacific

Crea una Página de Índice con una presentación de diapositivas como sección superior. Conoce más.

 

Crear cabeceras en otras plantillas

Puedes crear el efecto de una cabecera en cualquier plantilla si añades un Bloque de Imagen en la parte superior de una Página Normal.Cada diseño tiene sus propias opciones de superposición de texto.

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.

image-block-as-a-banner.png

Opciones de cabecera por plantilla

Las siguientes plantillas admiten uno o más tipos de cabecera. Las plantillas están agrupadas por familia.

Plantilla

Cabeceras de página: páginas compatibles

Cabeceras en video

Cabeceras para elementos de la colección: elementos compatibles

Otras opciones

Adirondack

Normal
Blog
Eventos
Productos

Publicaciones del blog
Eventos
Productos

Efecto de atenuación al desplazarse (vista de escritorio)

Familia Bedford

Anya, Bryant, Bedford, Hayden

Normal
Álbum
Blog
Eventos
Productos

Publicaciones de blog
Eventos

Cabeceras tipo presentación de diapositivas

Cabeceras tipo presentación de diapositivas para la Página de Blog

Familia Brine

Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West

Normal
Álbum
Blog
Eventos
Galería
Productos

 

Efecto parallax scrolling

Familia Farro

Farro, Haute

   

Publicaciones en blogs

 

Five

Normal
Álbum
Blog
Eventos
Galería
Productos

Las cabeceras de página se muestran en publicaciones de blog, eventos y productos

Cabeceras en todo el sitio

Familia Montauk

Julia, Kent, Montauk, Om

Normal
Blog
Eventos
Índice

Las cabeceras de página se muestran en publicaciones de blog, eventos

 

Familia Pacific

Charlotte, Fulton, Horizon, Naomi, Pacific

Normal
Álbum
Blog
Eventos
Galería
Productos

   

Familia Skye

Foundry, Indigo, Ready, Skye, Tudor

   

Publicaciones en blogs

 

Supply

Normal
Blog
Álbum
Eventos

 

Publicaciones de blog
Eventos

La cabecera se muestra a la derecha, excepto en los dispositivos móviles.

Familia Tremont

Camino, Carson, Henson, Tremont

Normal
Álbum
Blog
Eventos
Galería
Productos

  Superposición de página

Familia York

Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York

Normal
Álbum
Blog
Eventos
Galería
Proyecto
Productos
Índice Principal

   

Efecto de difuminado

Imágenes transparentes

Si usas un archivo .png con fondo transparente, los siguientes ajustes modifican el color que muestra detrás de la cabecera. Las plantillas están agrupadas por familia.

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.
Plantilla Ajuste
Adirondack Content Background Color (Color de fondo del Contenido)

Familia Bedford

Anya, Bryant, Bedford, Hayden

Banner Overlay Color (Superposición de Color del Encabezado)

Familia Brine

Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West

Superposición de color en la sección Principal: Superposición

Familia Farro

Farro, Haute

Color de fondo de la publicación. La Superposición de Color también afecta al color.
Five Header Background (Fondo del Encabezado)

Familia Montauk

Julia, Kent, Montauk, Om

Canvas Background (Fondo del área de contenido principal)

Familia Pacific

Charlotte, Fulton, Horizon, Naomi, Pacific

Overlay Color (Superposición de Color)

Familia Skye

Foundry, Indigo, Ready, Skye, Tudor

Fondo del Sitio
Supply Color de Página

Familia Tremont

Camino, Carson, Henson, Tremont

Site Background Color (Color de Fondo del Sitio)

Familia York

Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York

Color de Fondo en la sección Cabecera.

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 21 de 99