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

Crear un encabezado para el sitio

El encabezado de tu sitio es donde aparecen tu navegación y el título o el logotipo del sitio. El encabezado es igual para todo el sitio y desempeña una función muy importante en la manera en que los visitantes navegan e interactúan con tus contenidos. Está posicionado en la parte superior de tu sitio.

Esta guía repasa cómo crear el encabezado de tu sitio y mostrar funciones adicionales, como el icono del carrito de compras, los iconos de las redes sociales o un botón de llamada a la acción. El encabezado es igual para todas las páginas de tu sitio. No es posible crear un encabezado para cada página.

Version_7.1_site_header.png

Mira el video

Crear un encabezado

Si tu sitio emplea la versión 7.0, el encabezado es parte de la plantilla. Pasa a la sección sobre las funciones de 7.0 a continuación para saber más al respecto. 

Cuando crees tu sitio, el encabezado tal vez incluya el título de este, los enlaces de navegación y otros elementos, según el diseño que elijas.

Consejo: Para cambiar los enlaces de navegación, agrega, edita, elimina o reorganiza páginas en el panel Páginas.

A medida que creas el encabezado, puedes establecer estilos para todo el sitio y elegir el aspecto del encabezado tanto en equipos como en dispositivos móviles.

Establecer estilos globales

Para establecer los estilos de encabezado en todo el sitio:

  1. Haz clic en Editar, en la esquina superior izquierda de la vista previa de tu sitio.
  2. Desplázate sobre el encabezado y haz clic en Editar encabezado del sitio. Esto abre la pestaña Global
  3. Para editar el título del sitio o añadir la imagen de un logotipo, haz clic en Título y logotipo del sitio. Los logotipos aparecen en lugar del título de tu sitio. Si usas un logotipo, también añade un título del sitio. Los motores de búsqueda emplean el título para los resultados de la búsqueda y las pestañas del navegador, a menos que uses un título especial para SEO.
  4. Para agregar u ocultar un botón, iconos de redes sociales, un icono del carrito de compraso un inicio de sesión de Cuentas de clientes, haz clic en Elementos.
  5. Para cambiar los colores del encabezado, presiona Colores.
  6. Para mantener el encabezado fijo en la parte superior del sitio, activa el botón Posición fija. Cuando el encabezado esté fijo, establece el Estilo de encabezado fijo en Básico (siempre aparece en la parte superior del sitio) o Desplazarse hacia atrás (aparece en la parte superior del sitio cuando se desplaza hacia arriba). 
  7. Haz clic en cualquier lugar fuera del editor, luego coloca el cursor sobre Listo y haz clic en Guardar

Configurar diseños para equipos y dispositivos móviles

Para establecer cómo aparece el encabezado en equipos y dispositivos móviles: 

  1. Haz clic en Editar, en la esquina superior izquierda de la vista previa de tu sitio.
  2. Posiciona el cursor sobre el encabezado y haz clic en Editar el encabezado del sitio. Haz clic en el ícono de escritorio
  3. Para cambiar el diseño, haz clic en Diseño del encabezado. Desplázate para ver todas las opciones de diseño y haz clic en una de ellas para acceder a su vista previa en tu sitio.
  4. Para establecer el ancho del contenido del encabezado, haz clic en Completo o en Recuadro
  5. Utiliza los controles deslizantes para cambiar el relleno y el espaciado entre elementos.
  6. Haz clic en el ícono Móvil. La vista previa del sitio cambiará automáticamente a la vista en dispositivos móviles. 
  7. Para cambiar el diseño, haz clic en Diseño del encabezado. Desplázate para ver todas las opciones de diseño y haz clic en una de ellas para acceder a su vista previa en tu sitio.
  8. Para cambiar la forma en que aparece el menú cuando se expanden los enlaces, haz clic en Menú superpuesto. También puedes cambiar el color de superposición del menú
  9. Para cambiar la forma en que aparece el menú cuando está contraído, elige un ícono de menú. Haz clic en cualquier lugar fuera del editor, luego coloca el cursor sobre Listo y haz clic en Guardar.

Para configurar la fuente y el tamaño del título de tu sitio en dispositivos móviles:

  1. Abre Estilos del sitio.
  2. Haz clic en Fuentes y, a continuación, en Asignar estilos.
  3. Haz clic en Título del sitio en dispositivos móviles y, a continuación, en los menús desplegables para elegir el estilo y el tamaño de la fuente. 

Si deseas obtener más información, visita Cómo cambiar fuentes.

Fondo del encabezado

Si tu sitio usa la versión 7.0, el fondo del encabezado depende de la plantilla que hayas usado para tu sitio. Continúa con la sección sobre las funciones de 7.0 más abajo para informarte mejor.

Puedes establecer el fondo del encabezado en un color transparente o uniforme. Los menús desplegables de carpetas de un equipo coinciden con el color de fondo del encabezado. También puedes establecer el color de la superposición del encabezado para dispositivo móvil.

Configurar el fondo como transparente

Para que el fondo del encabezado sea transparente:

  1. Abre la configuración del encabezado global.
  2. Haz clic en Colores.
  3. Activa la opción Transparente.

Cuando este control deslizante está activado, el encabezado se superpone a la primera sección de la página y tiene el color o la imagen de fondo de la primera sección. Este puede cambiar de página a página, según si la primera sección usa estilos específicos de dicha sección o si tiene una imagen de fondo.

Cuando está activada la opción Posición fija y la primera sección tiene una imagen de fondo, el comportamiento del encabezado transparente cambia ligeramente. A medida que se desplaza, el encabezado pasa de mostrar la imagen de fondo de la primera sección a mostrar el color de fondo de la primera sección. 

Nota: Si la primera sección de la página es una sección de galería, el encabezado no será transparente sobre las imágenes de la galería, sino que muestra el color de fondo de la sección de la galería.

Hacer que el fondo sea un color pleno

Para que el fondo del encabezado tenga un color uniforme:

  1. Abre la configuración del encabezado global.
  2. Haz clic en Colores.
  3. Desactiva la opción Transparente y, a continuación, elige un tema de color.

Cuando el control deslizante de Transparente está desactivado, el encabezado se superpone a la primera sección de la página. Si la primera sección tiene una imagen de fondo, el encabezado cubrirá una parte de la imagen.

Para obtener más ayuda con los temas cromáticos de sección, visita Cómo cambiar colores.

Establecer el color de superposición en dispositivo móvil

Elige un tema cromático para el menú de navegación expandido que aparece en dispositivos móviles:

  1. Abre la configuración de encabezado para dispositivo móvil.
  2. Haz clic en Menú superpuesto y, a continuación, en Colores
  3. Elige un tema cromático.

Para obtener más ayuda con los temas cromáticos de sección, visita Cómo cambiar colores.

Funciones del encabezado en la versión 7.0

En la versión 7.0, el encabezado del sitio sigue apareciendo en cada página e incluye los mismos elementos que en la versión 7.1, pero su estilo depende de la plantilla de tu sitio. Infórmate mejor sobre el encabezado de tu plantilla en la guía de plantilla respectiva.

Algunas plantillas tienen funciones especiales en el encabezado. Usa los enlaces de este cuadro para informarte mejor:

Característica

Disponibilidad

Color de Fondo

Disponible en algunas plantillas

Imagen o video del banner

Disponible en algunas plantillas.

Área de bloques

Disponible en algunas plantillas

Información comercial

Disponible en algunas plantillas 

Botones

Disponible en algunas plantillas .

Encabezado fijo

Disponible en algunas plantillas 

Carpetas Siempre disponibles, pero la visualización varía según la plantilla.
Logotipo

Siempre disponibles, pero la visualización varía según la plantilla

Enlaces de navegación principal

Siempre disponibles, pero la visualización varía según la plantilla

Superposición de navegación 

Disponible en la familia de plantillas Skye (algunos sitios para dispositivos móviles tienen una superposición).

Barra de búsqueda

Disponible en algunas plantillas

Navegación secundaria

Disponible en algunas plantillas
Carrito de compras Siempre disponible, pero algunas plantillas tienen opciones de estilo.

Título del sitio

Siempre disponible, pero la visualización varía según la plantilla.

Iconos de redes sociales

Disponible en algunas plantillas

Leyenda

Disponible en algunas plantillas 

Encabezados fijos en la versión 7.0

En la versión 7.0, algunas plantillas admiten encabezados fijos. La navegación fija o "pegada" permanece en la misma posición, en la parte superior del navegador, a pesar de que te desplaces hacia abajo en la página. Usa el cuadro que sigue para ver qué plantillas aceptan encabezados fijos y cómo aparecen en las computadoras de escritorio y en los dispositivos fijos.

  • Excepto cuando se indique, los encabezados fijos muestran todos los elementos en el sitio (como el título o el logotipo del sitio y los enlaces de navegación).
  • Para conservar el espacio en las pantallas más pequeñas, la navegación no puede ser fija para los dispositivos móviles en muchas plantillas. En algunos casos, la navegación puede ser fija en los dispositivos móviles más grandes, como las tabletas.
Plantilla Computadora Móvil

Adirondack

En Estilos del sitio, marca Mostrar siempre la navegación.

Cuando te desplazas hacia abajo, el encabezado se contrae y el título del sitio reemplaza el logotipo. Más información.

No fijo

Avenue

No fijo

No fijo

Aviator

Únicamente enlaces de navegación 

En Estilos del sitio, usa Diseño de la Página de Información para seleccionar entre Desplazamiento y Tarjeta personal.

No fijo

Bedford

Únicamente páginas de índice

El encabezado vuelve a aparecer en posición fija cuando te hayas desplazado más abajo de la primera sección.

No fijo

Brine

No fijo

La barra superior en dispositivos móviles puede ser fija (Barra superior fija para dispositivos móviles). La barra inferior para dispositivos móviles siempre es fija. Elige qué aparece en cada una de ellas.

Farro

No fijo

La barra superior en dispositivos móviles puede ser fija (Barra superior fija para dispositivos móviles). La barra inferior para dispositivos móviles siempre es fija. Elige qué aparece en cada una de ellas.

Five

No fijo

No fijo

Flatiron

En Estilos del sitio, selecciona Posición del encabezado: Fija.

No fijo

Forte

No fijo

No fijo

Galapagos

No fijo

No fijo

Ishimoto

No fijo

No fijo

Momentum

Siempre fijo

Siempre fijo

Montauk

No fijo No fijo

Native

No fijo No fijo

Pacific

Únicamente en enlaces de navegación y en páginas de índice establecidas como página de inicio.

En Estilos del sitio, selecciona Navegación del índice por desplazamiento: Mostrar barra de desplazamiento. Vuelve a aparecer la barra de navegación en una posición fija cuando te hayas desplazado más allá de la primera sección.

No fijo

Skye

Siempre fijo

Puede ser transparente.

Siempre fijo

Supply

Barra lateral, fija (se desplaza si el contenido es más alto que el navegador)

No fijo

Tremont

No fijo

No fijo

Wells

Barra lateral, siempre fija

No fijo

Wexley

No fijo

No fijo

York

No fijo

La barra de dispositivos móviles puede ser fija (Posición de la barra de dispositivos móviles: Fija en la parte superior o Fija en la parte inferior)

Encabezados de página en la versión 7.0

En la versión 7.0, algunas plantillas admiten encabezados de página. Estos son áreas de contenido específicas de la página que aparecen sobre el contenido de la página principal.

Los encabezados de página están disponibles en estas familias de plantillas:

  • Avenue
  • Brine (llamadas áreas Intro)
  • Farro (llamadas áreas Intro)
  • Five
  • Wexley
  • York

Para editar el encabezado de la página:

  1. Pasa el cursor sobre la parte superior de la página y haz clic en Editar.
  2. Usa bloques para añadir contenido, como texto e imágenes.
  3. Haz clic en Guardar para publicar los cambios.

Los encabezados de página están separados del contenido de la página principal. No es posible mover bloques del encabezado de página a otras áreas de contenido de la página.

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