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

Crear un encabezado

Si tu sitio emplea la versión 7.0, el encabezado es parte de la plantilla de tu sitio. Continúa con la sección sobre las funciones de 7.0 más abajo para informarte mejor. 

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 compras o un inicio de sesión de cuentas de clientes, haz clic en Elementos.
  5. Para agregar estilos de fondo de encabezado, haz clic en Estilo. Obtén más información sobre las opciones que aparecen a continuación
  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 el modo en que aparece el menú cuando se expanden los enlaces, haz clic en Menú superpuesto. También puedes establecer el espaciado de los enlaces y elegir un tema de color. Usa los ajustes en Superposición de menú para establecer los colores de enlace, botón y fondo específicos para dispositivos móviles.  
  9. Para cambiar el aspecto del menú cuando está contraído, selecciona un ícono de Menú.
  10. 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 Cambiar fuentes.

Ver un video: Crear un encabezado

Estilos de fondo de 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 agregar estilos de fondo al encabezado para darle un aspecto más distintivo del resto del contenido o ayudar a que se combine con el resto de la gestión de marca de tu sitio. 

Sugerencia: Los menús desplegables de carpetas de un equipo coinciden con el color de fondo del encabezado. 

Para agregar un estilo de fondo:

  1. Abre la configuración global del encabezado
  2. Haz clic en Estilo.
  3. Haz clic en el menú desplegable de la parte superior del editor para elegir un fondo. Elige entre Liso, Degradado, Tema o Dinámico. Obtén más información sobre cada opción a continuación
  4. Dependiendo del estilo que elijas, personaliza los demás ajustes que aparecen, que pueden incluir colores, un efecto de desenfoque, bordes o una sombra paralela. 
  5. Para guardar los cambios, haz clic en cualquier lugar fuera del editor, coloca el cursor sobre Listo y haz clic en Guardar.

Opciones de estilo

Elige entre estas opciones de estilo de fondo:

  • Liso: elige un fondo de color liso. Selecciona colores de fondo y navegación de la paleta de tu sitio o elige colores personalizados. 
  • Degradado: elige un color degradado que se difumine de oscuro a claro desde la parte superior del encabezado. Selecciona colores de fondo y navegación en la paleta de tu sitio o elige colores personalizados. 
  • Tema: combina el color de fondo con uno de los temas de color de tu sitio. 
  • Dinámico: hace que el fondo sea transparente. El encabezado se superpone a la primera sección de la página y muestra el color de fondo o la imagen de la primera sección. Esto puede cambiar de una página a otra en función de si la primera sección utiliza estilos específicos de la sección o tiene una imagen de fondo.

Ten en cuenta lo siguiente:

  • Cuando el fondo se establece en Liso o Tema, 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 cubre parte de la imagen.
  • El encabezado será liso si la primera sección es una sección de blog, galería, tienda o eventos.
  • Cuando el fondo se establece en Dinámico y 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. En su lugar, el encabezado muestra el color de fondo de la sección de galería.

Otras opciones de estilo

Según el efecto de fondo que hayas elegido, el editor también puede mostrar estas opciones de estilo:

  • Opacidad: usa el control deslizante para cambiar la transparencia del color. 
  • Desenfocar fondo: activa el botón Desenfocar fondo para desenfocar cualquier contenido de fondo. Los fondos borrosos se notan más cuando la opacidad es inferior al 90 %. Algunos navegadores, como Internet Explorer y Firefox, no admiten fondos borrosos.
  • Borde: activa el botón Borde para agregar un borde alrededor del encabezado. Usa los ajustes que aparecen para elegir el color, la posición y el grosor de la línea.
  • Sombra paralela: activa la opción Sombra paralela para agregar un efecto de sombra alrededor del encabezado. Usa los ajustes que aparecen para elegir el color, cuánto se extiende, la distancia y agrega un efecto de desenfoque.

Ver un video: Estilos de encabezado

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, mientras te desplazas hacia abajo en la página. Usa el cuadro que sigue para ver qué plantillas aceptan encabezados fijos y cómo aparecen en una computadora de escritorio o un dispositivo móvil.

  • 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 se puede fijar para dispositivos móviles en muchas plantillas. En algunos casos, se puede fijar la navegación en 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: 27 de 201