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.
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:
- Haz clic en Editar, en la esquina superior izquierda de la vista previa de tu sitio.
- Desplázate sobre el encabezado y haz clic en Editar encabezado del sitio. Esto abre la pestaña Global.
- 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.
- 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.
- 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.
- 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.
- 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:
- Haz clic en Editar, en la esquina superior izquierda de la vista previa de tu sitio.
- Coloca el cursor sobre el encabezado y haz clic en Editar encabezado del sitio. Haz clic en el ícono Equipo.
- 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.
- Para establecer el ancho del contenido del encabezado, haz clic en Completo o en Recuadro.
- Utiliza los controles deslizantes para cambiar el relleno y el espaciado entre elementos.
- Haz clic en el ícono Móvil. La vista previa del sitio cambia automáticamente a la vista móvil.
- 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.
- 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.
- Para cambiar el aspecto del menú cuando está contraído, selecciona 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:
- Abre Estilos del sitio.
- Haz clic en Fuentes y, a continuación, en Asignar estilos.
- 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:
- Abre la configuración global del encabezado.
- Haz clic en Estilo.
- 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.
- 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.
- 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 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.
Un botón de llamada a la acción en el encabezado se muestra en todo el sitio. Para agregar un botón a tu encabezado:
- Haz clic en Editar en una página del sitio.
- Haz clic en Editar encabezado del sitio.
- Haz clic en Elementos.
- Activa el controlador Botón.
- Edita el texto del botón y el enlace. También puedes mostrar enlaces a redes sociales y un carrito de compras activando esos botones.
- Posiciona el cursor sobre Listo y haz clic en Guardar.
Dependiendo del diseño que elijas para tu encabezado en un equipo, el botón puede agruparse con los enlaces de navegación o aparte. En un dispositivo móvil, el botón siempre aparece debajo de los enlaces de navegación.
Aplica estilo a la forma del botón en el panel Botones de los estilos del sitio con la pestaña Principal. Para aplicar estilo a la fuente del botón, abre el panel Fuentes de los estilos del sitio, haz clic en Asignar estilos y busca el ajuste Botón de encabezado. El color del botón y del texto sigue la configuración de color de todo el sitio.
Puedes agregar botones al encabezado del sitio en estas familias de plantillas:
- Bedford: Muestra el último enlace en tu navegación en forma de botón.
- Brine: modifica el estilo a la navegación principal o secundaria, o a ambas, como botones.
- Montauk: Añade un bloque de botones al subtítulo personalizado en el encabezado.
- Skye: añade un bloque de botones a la superposición de navegación del sitio.
- Wells: añade un bloque de botones al área de contenido de la barra lateral de navegación.
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:
- Pasa el cursor sobre la parte superior de la página y haz clic en Editar.
- Usa bloques para añadir contenido, como texto e imágenes.
- 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.