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.
Nota: No es posible crear encabezados de página específicos o eliminar elementos en ciertas páginas. Sin embargo, si tu sitio está en la versión 7.1, puedes ocultar el encabezado en ciertos tipos de 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.
Enlaces de navegación
Para cambiar los enlaces de navegación, agrega, edita o elimina páginas en el panel Páginas. Para reorganizar los enlaces:
- Haz clic en Editar, en la esquina superior izquierda de la vista previa de tu sitio.
- Posiciona el cursor sobre el encabezado y haz clic en Editar el encabezado del sitio.
- Haz clic en los enlaces de navegación y, a continuación, haz clic en el icono del lápiz.
- Haz clic y arrastra los enlaces de navegación para ponerlos en tu orden preferido.
Ten en cuenta que reorganizar los enlaces aquí también los reorganiza 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 diseño de encabezado en todo el sitio
Para configurar el diseño del encabezado de todo el sitio:
- Haz clic en Editar, en la esquina superior izquierda de la vista previa de tu sitio.
- Posiciona el cursor sobre el encabezado y haz clic en Editar el encabezado del sitio.
- Para editar el título de tu sitio o agregar una imagen de logotipo, haz clic en el título o logotipo de tu sitio y, a continuación, haz clic en el icono del lápiz .Los logotipos aparecen en lugar del título de tu sitio.Si usas un logotipo, asegúrate de agregar un título de sitio también.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.
- Cuando termines de editar el título y el logotipo del sitio, haz clic en cualquier lugar fuera del editor para continuar editando el encabezado del sitio.
- Para agregar u ocultar un botón, iconos de redes sociales, icono de carrito de compras, un inicio de sesión de cuentas de clientes o una opción de idioma, haz clic en Agregar elementos y, a continuación, activa o desactiva las opciones. Haz clic en cualquier lugar fuera del editor para continuar editando el encabezado del sitio.
- Haz clic en Guardar para guardar tus cambios y seguir editando, o en Salir y luego en Guardar para cerrar el editor.
Establecer diseño para computadora
Para establecer cómo aparece el encabezado en una computadora:
- Haz clic en Editar, en la esquina superior izquierda de la vista previa de tu sitio.
- Desplaza el cursor sobre el encabezado y haz clic en Editar el encabezado del sitio. Para asegurarte de que estás en la vista de escritorio, en la esquina superior derecha, haz clic en el icono de computadora
- Para cambiar el diseño, haz clic en Editar diseño. Haz clic en el diseño actual para revisar todas las opciones. Haz clic en un diseño para acceder a su vista previa en tu sitio.
- Para establecer el ancho del contenido del encabezado, haz clic en Completo o en Recuadro.
- Usa los controles deslizantes para cambiar el relleno y el espaciado entre enlaces, iconos de redes sociales y elementos.
- Elige entre los siguientes efectos, y ten en cuenta que las ediciones de estos se aplicarán tanto a las pantallas de computadora como de dispositivos móviles:
- Sombra paralela: activa la opción Sombra paralela para agregar un efecto de sombra alrededor del encabezado. Usa la configuración que aparece para elegir el color, cuánto se extenderá, la distancia y para agregar un efecto de desenfoque.
- 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.
- Para agregar estilos de fondo de encabezado, haz clic en Editar diseño y luego en la pestaña Color. Los cambios que hagas aquí se aplicarán a las vistas en computadora de escritorio y en dispositivos móviles. Obtén más información sobre las opciones que aparecen a continuación.
- Para mantener el encabezado fijo en la parte superior del sitio, haz clic en la pestaña Diseño y activa la opción Posición fija. Cuando el encabezado está fijo, puedes establecer 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 al desplazarte hacia arriba). Dependiendo del dispositivo, los encabezados fijos de cualquier tipo pueden expandirse o contraerse ligeramente al desplazarse. Los cambios que hagas aquí se aplicarán a las vistas en computadora de escritorio y en dispositivos móviles.
Establecer diseño y estilos en dispositivos móviles
- Para cambiar a la vista móvil, en la esquina superior derecha de la pantalla, haz clic en el icono de móvil.La vista previa de tu sitio cambia automáticamente a la vista en dispositivos móviles.
- Para cambiar el diseño, haz clic en Editar diseño. Haz clic en el diseño actual para revisar todas las opciones. Haz clic en un diseño para acceder a su vista previa en tu sitio.
- Elige entre los siguientes efectos, y ten en cuenta que las ediciones de estos se aplicarán tanto a las pantallas de computadora como de dispositivos móviles:
- Sombra paralela: activa la opción Sombra paralela para agregar un efecto de sombra alrededor del encabezado. Usa la configuración que aparece para elegir el color, cuánto se extenderá, la distancia y para agregar un efecto de desenfoque.
- 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.
- Para mantener el encabezado fijo en la parte superior del sitio, haz clic en la pestaña Diseño y activa la opción Posición fija. Cuando el encabezado está fijo, puedes establecer 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 al desplazarte hacia arriba). Dependiendo del dispositivo, los encabezados fijos de cualquier tipo pueden expandirse o contraerse ligeramente al desplazarse. Los cambios que hagas aquí se aplicarán a las vistas en computadora de escritorio y en dispositivos móviles.
- Para agregar estilos de fondo de encabezado, haz clic en Editar diseño y luego en la pestaña Color. Los cambios que hagas aquí se aplicarán a las vistas en computadora de escritorio y en dispositivos móviles. Obtén más información sobre las opciones que aparecen a continuación.
- Para cambiar la forma en que aparece tu menú cuando se expanden los enlaces, haz clic en Ver menú y luego en Editar diseño.Puedes establecer la alineación y el espaciado de enlaces, y elegir un tema cromático.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.
- Para cambiar el aspecto del menú cuando está contraído, selecciona un ícono de Menú.
- Haz clic en Guardar para guardar tus cambios y seguir editando, o en Salir y luego en 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:
- 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.
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.
Consejo: El fondo desplegable de una computadora coincide con el color de fondo del encabezado.
Para agregar un estilo de fondo:
- Haz clic en Editar, en la esquina superior izquierda de la vista previa de tu sitio.
- Posiciona el cursor sobre el encabezado y haz clic en Editar el encabezado del sitio.
- Haz clic en Editar diseño y luego en la pestaña Color .
- Selecciona un estilo de fondo en el menú desplegable en la parte superior del editor.Elige entre Liso, Degradado o Adaptado.Obtén más información sobre cada opción a continuación.
- Dependiendo del estilo que elijas, personaliza la configuración del estilo de fondo, como colores, efectos de desenfoque y opacidad.
- Haz clic en Guardar para guardar tus cambios y seguir editando, o en Salir y luego en Guardar para cerrar el editor.
Opciones de estilo
Elige entre estas opciones de estilo de fondo:
- Liso: elige un fondo de color liso.Puedes elegir colores personalizados, usar la paleta de tu sitio o combinar uno de los temas cromáticos de tu sitio.
- Degradado: el encabezado se superpone a la primera sección de la página. Elige un color degradado que se desvanezca en el fondo de la primera sección. Selecciona los colores del fondo y de la navegación de la paleta de tu sitio o elige colores personalizados.
- Adaptado: hace que el fondo sea transparente. El encabezado se superpone con la primera sección de la página y muestra el fondo 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, 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.
- Cuando el fondo está configurado como Adaptado o Degradado y la primera sección de la página es una sección de diseño inteligente, blog, eventos, galería o tienda, el encabezado no será transparente sobre ninguna imagen. En su lugar, el encabezado mostrará el color de fondo de la primera sección.
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 %.
Nota: algunos navegadores, como Firefox, no admiten fondos desenfocados.
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 de tu sitio.
- Haz clic en Editar encabezado del sitio.
- Haz clic en Agregar elementos.
- Activa el controlador Botón.
- Haz clic en cualquier lugar por fuera del editor.
Para editar el texto, el enlace y el tipo de botón:
- Mientras editas el encabezado del sitio, haz clic en el botón y luego en el icono del lápiz.
- En Contenido, edita el texto y el enlace del botón.
- Para editar el tipo de botón, haz clic en la pestaña Diseño. El botón heredará los estilos establecidos para ese tipo de botón.
- Haz clic en Guardar para guardar tus cambios y seguir editando, o en Salir y luego en Guardar para cerrar el editor.
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.
Para modificar el estilo de los botones:
- Forma: abre el panel de Botones en estilos de sitio y haz clic en la pestaña del tipo de botón que corresponda a tu botón de encabezado (primario, secundario o terciario).
- Fuente: si tu botón es de tipo primario, abre el panel de Fuentes en estilos del sitio, haz clic en Asignar estilos y busca el ajuste Botón de encabezado. Si tu botón es de tipo secundario o terciario, abre el panel de Botones en estilos del sitio y haz clic en Texto.
- Color: en la vista en computadoras de escritorio, haz clic en Editar encabezado del sitio y luego en Editar diseño para ver tu combinación de colores en la pestaña Color. Luego, abre el panel de Colores de estilos del sitio y elige la misma combinación de colores. En Botón, busca tu tipo de botón de encabezado para cambiar el color del fondo y el texto del botón. Para la vista en dispositivos móviles, revisa la sección anterior.
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.
Editar otros elementos de encabezado
Junto con un botón, también puedes agregar enlaces de redes sociales, un carrito, un inicio de sesión de cuenta y un cambio de idioma al encabezado.
Para editar cada uno de estos elementos, uno a la vez, haz clic en cada elemento mientras editas el encabezado del sitio.Luego haz clic en el icono del lápiz para acceder al editor de ese elemento en particular.Puedes editar lo siguiente:
- Enlaces de redes sociales: a dónde vincula el icono, el tamaño del icono de redes sociales, el borde y el grosor del borde
- Carrito de compras: el diseño, el tamaño, el borde y si aparecerá un cero cuando esté vacío
- Cambio de idioma: el icono o el tamaño de la bandera, la forma de la bandera y qué bandera mostrar. Ten en cuenta que necesitas un servicio de terceros para usar este elemento. Para informarte mejor, visita Cómo crear un sitio multilingüe con Weglot.
Ocultar el encabezado
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.
Ocultar el encabezado solo está disponible para las páginas en blanco y las páginas de diseño y las páginas en blanco y las páginas de diseño de los sitios para miembros. Las páginas de colección (como blog, tienda, portafolio y eventos) no tienen esta opción.
Para ocultar el encabezado:
- Abre el panel Páginas.
- Desplaza el cursor sobre el título de una página y luego haz clic en
junto al título.
- Haz clic en Navegación en la pestaña de configuración de página.
- Usa los controles para desactivar Mostrar encabezado.
Repite estos pasos para cada página en la que quieras ocultar el 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 |
| Menús desplegables | 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:
- Pasa el cursor sobre la parte superior de la página y haz clic en Editar.
- Usa bloques para añadir contenidos 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.