Dale estilo a los elementos que aparecen en la parte superior de cada página de tu sitio.

El encabezado es donde se muestran el título o el logotipo de tu sitio, el menú de navegación y otras funciones. Por lo general, 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.

Estas funciones están disponibles para los encabezados del sitio en la versión 7.1. Si tu sitio está en la versión 7.0, tu encabezado es específico de la plantilla de tu sitio.

Video sobre los encabezados del sitio

Este video muestra cómo editar y estilizar el encabezado de tu sitio.

Edita el título o el logotipo de tu sitio

Cuando creaste tu sitio, es posible que le hayas dado un título al sitio. Si agregas un logotipo, este reemplaza el título del sitio en el encabezado, pero deberías agregar un título del sitio de todos modos. 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.

Agrega, edita o elimina enlaces de navegación en tu encabezado

El menú de navegación en el encabezado de tu sitio refleja qué páginas agregaste al panel Páginas. Para cambiar los enlaces de navegación:

• Añade páginas a tu navegación
• Edita los títulos de página
• Eliminar páginas

Agrega un botón a tu encabezado

Al agregar un botón al encabezado, tu llamada a la acción queda bien a la vista, lo que anima a los visitantes a hacer clic en ella de inmediato. Dependiendo del diseño de tu encabezado, el botón puede agruparse con enlaces de navegación o aparte de ellos. En dispositivos móviles, el botón siempre aparece debajo de los enlaces de navegación.

Para añadir un botón a tu encabezado:

1. Abre el panel Páginas.
2. Haz clic en Editar, en la esquina superior izquierda de la vista previa de tu sitio.
3. Posiciona el cursor sobre el encabezado y haz clic en Editar el encabezado del sitio.
4. Haz clic en Agregar elementos.
5. Activa el controlador Botón.

Edita el botón de encabezado

Para configurar el texto, el enlace y el estilo del botón:

1. Abre el panel Páginas.
2. Haz clic en Editar, en la esquina superior izquierda de la vista previa de tu sitio.
3. Posiciona el cursor sobre el encabezado y haz clic en Editar el encabezado del sitio.
4. Haz clic en el botón del encabezado y, luego, en el icono del lápiz.
5. En Contenido, edita el texto y el enlace del botón.
6. Haz clic en la pestaña Diseño y, a continuación, elige Primario, Secundario o Terciario para configurar el estilo del botón.

La forma de tu encabezado sigue los estilos de tus botones.

Establece la fuente del botón de encabezado

Si estableces el estilo de tu botón en Secundario o Terciario, el texto del botón de encabezado sigue los estilos de tus botones.

Para darle estilo a la fuente de un botón de encabezado con estilo Primario:

1. Abre estilos del sitio.
2. Haz clic en > junto a Fuentes.
3. Haz clic en Asignar estilos.
4. Haz clic en el botón de encabezado y haz los cambios necesarios.

Establece el color del botón de encabezado

La forma de cambiar el color del botón del encabezado depende del estilo de fondo del encabezado.

Si el estilo de fondo de tu encabezado es:

• Liso - color: el color del botón sigue la combinación de colores predeterminada de tu sitio.
• Liso - tema: el color del botón sigue la combinación de colores seleccionada.
• Degradado: el color del botón sigue la combinación de colores predeterminada de tu sitio.
• Adaptado: el color del botón sigue la combinación de colores de la sección superior de cada página. Personaliza el color de los botones para cada combinación de colores que usen tus secciones.

Agrega el inicio de sesión de la cuenta, enlaces a redes sociales, un carrito o un cambio de idioma a tu encabezado

Para agregar otros elementos a tu encabezado, como un inicio de sesión de cuenta para clientes, enlaces a redes sociales, un carrito de compras o un selector de idioma: 

1. Abre el panel Páginas.
2. Haz clic en Editar, en la esquina superior izquierda de la vista previa de tu sitio.
3. Posiciona el cursor sobre el encabezado y haz clic en Editar el encabezado del sitio.
4. Haz clic en Agregar elementos.
5. Activa la opción junto a las funciones que quieres habilitar.

Personaliza las características del encabezado

Puedes personalizar el diseño de tus enlaces a redes sociales y el icono del carrito. Si tu sitio usa Weglot, también puedes personalizar el cambio de idioma.

Para editar estas características:

1. Abre el panel Páginas.
2. Haz clic en Editar, en la esquina superior izquierda de la vista previa de tu sitio.
3. Posiciona el cursor sobre el encabezado y haz clic en Editar el encabezado del sitio.
4. Haz clic en la función que quieras editar y, a continuación, en el icono del lápiz.
5. Usa la configuración para hacer cambios en el diseño. Estas opciones varían según la función.
6. Haz clic en Guardar.

Agrega efectos de diseño a tu encabezado

Al editar el diseño del encabezado de tu sitio, puedes agregar efectos visuales para darle un aspecto único o complementar tu marca. Estos efectos se aplican tanto a la versión para computadoras como a la versión de tu encabezado para dispositivos móviles.

Para añadir efectos al encabezado:

1. Abre el panel Páginas.
2. Haz clic en Editar en la esquina superior izquierda de la vista previa del sitio, luego desplaza el cursor sobre el encabezado y haz clic en Editar encabezado del sitio.
3. Haz clic en Editar diseño.
4. En efectos, agrega una sombra paralela, agrega un borde, y establece un estilo de encabezado fijo.

Agrega una sombra paralela a tu encabezado

Para crear un efecto de sombra alrededor del encabezado:

1. Mientras editas el diseño del encabezado, haz clic en sombra paralela. Se habilita una sombra paralela de inmediato.
2. Elige entre los ajustes predeterminados suave o fuerte. Puedes personalizar los ajustes predeterminados después de seleccionarlos.
3. Para elegir y personalizar el color, haz clic en Color.
4. Para cambiar la apariencia de la sombra paralela, usa los deslizadores de alcance, distancia y desenfoque. Te recomendamos probar diferentes combinaciones hasta que encuentres la que te guste.
5. Para eliminar la sombra paralela, haz clic en Eliminar.

Añade un borde alrededor del encabezado

Para poner un borde alrededor del encabezado:

1. Mientras editas el diseño del encabezado, haz clic en Borde. Se establece un borde inmediatamente.
2. Para elegir y personalizar el color, haz clic en Color.
3. Haz clic en S, M o L para establecer el grosor de la línea, o haz clic en … para establecer un grosor personalizado.
4. Establece la posición del borde. Puede mostrarse en todos los lados del encabezado, solo en la parte superior, solo en la parte inferior o en la parte superior e inferior.
5. Para eliminar el borde, haz clic en Eliminar.

Habilita un encabezado fijo

Dependiendo del dispositivo, los encabezados fijos de cualquier tipo pueden expandirse o contraerse ligeramente al desplazarse. Para mantener el encabezado fijo en la parte superior de tu sitio mientras los visitantes se desplazan:

1. Mientras editas el diseño del encabezado, activa la opción de Posición fija.
2. Establece el estilo fijo de encabezado como Básico (el encabezado siempre aparece en la parte superior del navegador) o Desplazar hacia atrás (el encabezado solo aparece en la parte superior del navegador cuando el visitante sube).

Personaliza tu menú de navegación en dispositivos móviles

En la vista en dispositivos móviles, la barra de navegación del encabezado se reducirá a un menú desplegable.

Para personalizar el menú de navegación en dispositivos móviles:

1. Abre el panel Páginas.
2. Haz clic en Editar en la esquina superior izquierda de la vista previa del sitio, luego desplaza el cursor sobre el encabezado y haz clic en Editar encabezado del sitio.
3. En la esquina superior derecha, haz clic en el icono de Vista en dispositivos móviles.
4. Haz clic en el menú de navegación en dispositivos móviles y, a continuación, en el icono del lápiz.
5. Selecciona un estilo de icono de menú.
6. Haz clic en S, M o L para ajustar el grosor de las líneas del icono, o haz clic en … para establecer un grosor personalizado.

Cambia los efectos de fondo y el color del encabezado

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 personal de tu sitio. Si tu navegación tiene menús desplegables, el fondo del menú desplegable en computadoras coincide con el color de fondo del encabezado.

Para cambiar el estilo de fondo:

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.
3. Haz clic en Editar diseño y luego en la pestaña Color .
4. Selecciona un estilo de fondo en el menú desplegable en la parte superior del editor. Elige entre Liso, Degradado o Adaptado. 
5. Dependiendo del estilo que elijas, personaliza el color, el efecto de desenfoque y la opacidad del estilo de fondo. Algunos navegadores pueden no mostrar efectos de desenfoque.

Fondo de encabezado sólido

Para configurar el fondo del encabezado con un color liso, elige el estilo de fondo liso. Elige un color personalizado, usa la paleta de tu sitio o combina una de las paletas de colores de tu sitio.

Fondo de encabezado degradado

Para que el fondo del encabezado se funda con el fondo de la primera sección de cada página, elige el estilo de degradado. Puedes personalizar el fondo degradado y los colores de la navegación.

Fondo adaptado del encabezado

Para que el encabezado tenga un aspecto variable en cada página, elige el estilo adaptado para que sea transparente. El fondo de la primera sección de cada página se muestra detrás del encabezado.

Oculta el encabezado de tu sitio

Para ayudar a llamar la atención sobre tu contenido, o para animar a tus visitantes a hacer una acción, puedes ocultar el encabezado en ciertas páginas.

Las páginas de colección, como blog y páginas de tienda, no tienen esta opción.

Para ocultar el encabezado:

1. Abre el panel Páginas.
2. Desplaza el cursor sobre el título de una página y luego haz clic en junto al título.
3. Haz clic en Navegación en la pestaña de configuración de página.
4. Usa los controles para desactivar Mostrar encabezado.
5. Repite estos pasos en cada página donde quieras ocultar el encabezado.

¿Puedo hacer que mi encabezado se vea diferente en dispositivos móviles?

Puedes personalizar el diseño, la altura y el ancho del encabezado para dispositivos móviles de forma independiente de la vista en computadoras de escritorio. Otros cambios de diseño afectan tanto a las vistas en computadoras de escritorio como a las vistas en dispositivos móviles.

Para configurar estilos distintos para la vista en computadoras de escritorio o en dispositivos móviles:

1. Haz clic en Editar, en la esquina superior izquierda de la vista previa de tu sitio. En la esquina superior derecha, haz clic en el icono Vista en computadoras de escritorio o en el icono Vista en dispositivos móviles, dependiendo de cuál quieras editar.
2. Posiciona el cursor sobre el encabezado y haz clic en Editar el encabezado del sitio.
3. Haz clic en Editar diseño. 
4. Haz clic en el menú desplegable Diseño y selecciona un diseño para cambiar la disposición del encabezado. Usa los controles deslizantes para ajustar el espacio entre los enlaces y los demás elementos.
5. Usa el control deslizante de Encabezado para cambiar la altura del encabezado.
6. Haz clic en Sin bordes o Recuadro para establecer el ancho del encabezado.
7. Haz clic en Guardar.