Crear un encabezado para el sitio

Dale estilo al menú y a otros elementos que aparecen en la parte superior de cada página de tu 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 encabezados específicos de página ni eliminar elementos de determinadas páginas.

Ver un video: Crear un encabezado

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. Desplaza el cursor sobre el encabezado y haz clic en Editar el encabezado del sitio. Se abrirá 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 de 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 de tu sitio, activa la opción Posición fija. Cuando el encabezado sea fijo, establece 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). Cualquier tipo de encabezado puede expandirse o contraerse ligeramente al desplazarse, según el dispositivo.
7. Haz clic en cualquier lugar fuera del editor, luego haz clic en Guardar para guardar tus cambios y seguir editando, o Salir y luego Guardar para cerrar el editor.

Establecer diseño para computadora

Para establecer cómo aparece el encabezado en una computadora:

1. Haz clic en Editar, en la esquina superior izquierda de la vista previa de tu sitio.
2. Desplaza el cursor sobre el encabezado y haz clic en Editar el encabezado del sitio. Haz clic en el ícono de Computadora.
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.

Establecer diseño y estilos en dispositivos móviles

1. Haz clic en el ícono de Dispositivos móviles. La vista previa de tu sitio cambia automáticamente a la vista en dispositivos móviles.
2. 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.
3. Para cambiar cómo aparece tu menú cuando se amplían los enlaces, haz clic en Menú de superposición. También puedes configurar el espaciado del enlace y elegir una combinación de colores. Usa los ajustes en Superposición del menú para configurar el enlace, el botón, el texto del botón y los colores de fondo específicos para dispositivos móviles.
4. Para cambiar el aspecto del menú cuando está contraído, selecciona un ícono de Menú.
5. Haz clic en cualquier lugar fuera del editor, luego haz clic en Guardar para guardar tus cambios y seguir editando, o Salir y luego Guardar para cerrar el editor.

Consejo: Agrega una imagen de logotipo separada para tu encabezado de móvil para crear un aspecto único para los visitantes móviles. Para obtener más información, visita Agregar el logotipo de un sitio.

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.

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, Gradiente, Tema o Dinámico. 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. Haz clic en cualquier lugar fuera del editor, luego haz clic en Guardar para guardar tus cambios y seguir editando, o Salir y luego Guardar para cerrar el editor.

Opciones de estilo

Elige entre estas opciones de estilo de fondo:

• Liso: elige un fondo de color liso. Selecciona los colores del fondo y de la navegación de la paleta de tu sitio o elige colores personalizados.
• Gradiente: elige un color de gradiente que varíe de oscuro a claro desde la parte superior del encabezado. Selecciona los colores del fondo y de la navegación de 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 desenfocados se notan más cuando la opacidad es inferior al 90 %. Algunos navegadores, como Firefox, no admiten fondos desenfocados.
• 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

Agregar un botón a un encabezado

Agregar un botón a un encabezado coloca tu llamada a la acción en primer plano, lo que anima a los visitantes a hacer clic en este de inmediato. Las opciones dependen de la versión de tu sitio.

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 disponible, 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 contenidos 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.