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

Mira el video

Crear un encabezado

Si tu sitio emplea la versión 7.0, el encabezado es parte de la plantilla. Pasa a la sección sobre las funciones de 7.0 a continuación para saber más al respecto. 

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.

Tip: To change the navigation links, add, edit, delete, or rearrange pages in the Pages panel.

As you build your header, you can set site-wide styles and choose how the header looks on both computers and mobile devices.

Set global styles

To set your site-wide header styles:

  1. Haz clic en Editar, en la esquina superior izquierda de la vista previa de tu sitio.
  2. Hover over the header and click Edit Site Header. This opens the Global tab. 
  3. To edit your site title or add a logo image, click Site Title & Logo. Logos appear in place of your site title. If you use a logo, add a site title too. Search engines use the title for search results and browser tabs, unless you add a separate SEO title.
  4. Para agregar un botón, íconos de redes sociales o un ícono de carrito de compras, haz clic en Elementos.
  5. To change the header colors, click Colors.
  6. To keep the header fixed at the top of your site, switch the Fixed Position toggle on. When the header is fixed, set the Fixed Header Style to Basic (always appears at the top of the site) or Scroll Back (appears at the top of the site when scrolling up). 
  7. Click anywhere outside the editor, then hover over Done and click Save

Set computer and mobile layouts

To set how the header appears on computers and on mobile devices: 

  1. Haz clic en Editar, en la esquina superior izquierda de la vista previa de tu sitio.
  2. Hover over the header and click Edit Site Header. Click the Desktop icon. 
  3. To change the layout, click Header Layout. Scroll to see all layout options and click one to preview it on your site.
  4. To set the width of the header content, click Full or Inset
  5. Use the sliders to change the padding and spacing between elements.
  6. Click the Mobile icon. Your site preview will automatically switch to mobile view. 
  7. To change the layout, click Header Layout. Scroll to see all layout options and click one to preview it on your site.
  8. Para cambiar la forma en que aparece el menú cuando se expanden los enlaces, haz clic en Menú superpuesto. También puedes cambiar el color de superposición del menú
  9. Para cambiar la forma en que aparece el menú cuando está contraído, elige un ícono de menú. Haz clic en cualquier lugar fuera del editor, luego coloca el cursor sobre Listo y haz clic en Guardar.

Fondo del 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 establecer el fondo del encabezado en un color transparente o uniforme. Los menús desplegables de carpetas de un equipo coinciden con el color de fondo del encabezado. También puedes establecer el color de la superposición del encabezado para dispositivo móvil.

Configurar el fondo como transparente

To make the header background transparent:

  1. Abre la configuración del encabezado global.
  2. Click Colors.
  3. Switch the Transparent toggle on.

Cuando este control deslizante está activado, el encabezado se superpone a la primera sección de la página y tiene el color o la imagen de fondo de la primera sección. Este puede cambiar de página a página, según si la primera sección usa estilos específicos de dicha sección o si tiene una imagen de fondo.

Cuando está activada la opción Posición fija y la primera sección tiene una imagen de fondo, el comportamiento del encabezado transparente cambia ligeramente. A medida que se desplaza, el encabezado pasa de mostrar la imagen de fondo de la primera sección a mostrar el color de fondo de la primera sección. 

Nota: Si la primera sección de la página es una sección de galería, configúrala para que ocupe todo el ancho Sin bordes y el encabezado no será transparente sobre las imágenes de la galería. En su lugar, el encabezado mostrará el color de fondo de la primera sección.

Hacer que el fondo sea un color pleno

To make the header background a solid color:

  1. Abre la configuración del encabezado global.
  2. Click Colors.
  3. Switch the Transparent toggle off, then choose a color theme.

Cuando el control deslizante de Transparente está desactivado, 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.

Para obtener más ayuda con los temas cromáticos de sección, visita Cómo cambiar colores.

Establecer el color de superposición en dispositivo móvil

Elige un tema cromático para el menú de navegación expandido que aparece en dispositivos móviles:

  1. Abre la configuración de encabezado para dispositivo móvil.
  2. Haz clic en Menú superpuesto y, a continuación, en Colores
  3. Elige un tema cromático.

Para obtener más ayuda con los temas cromáticos de sección, visita Cómo cambiar colores.

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

Banner image or video

Disponible en algunas plantillas.

Blocks area

Disponible en algunas plantillas

Información comercial

Disponible en algunas plantillas 

Botones

Disponible en algunas plantillas .

Fixed header

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

Main Navigation links

Always available, but display varies by template

Superposición de navegación 

Available in the Skye template family (Some mobile sites have an overlay)

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, a pesar de que te desplaces hacia abajo en la página. Usa el cuadro que sigue para ver qué plantillas aceptan encabezados fijos y cómo aparecen en las computadoras de escritorio y en los dispositivos fijos.

  • Except where noted, fixed headers display all your site's header elements (such as site title or logo and navigation links).
  • Para conservar el espacio en las pantallas más pequeñas, la navegación no puede ser fija para los dispositivos móviles en muchas plantillas. En algunos casos, la navegación puede ser fija en los 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.

Not fixed

Avenue

Not fixed

Not fixed

Aviator

Navigation links only 

En Estilos del sitio, usa Diseño de la Página de Información para seleccionar entre Desplazamiento y Tarjeta personal.

Not fixed

Bedford

Index Pages only

El encabezado vuelve a aparecer en posición fija cuando te hayas desplazado más abajo de la primera sección.

Not fixed

Brine

Not fixed

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

Not fixed

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

Not fixed

Not fixed

Flatiron

En Estilos del sitio, selecciona Posición del encabezado: Fija.

Not fixed

Forte

Not fixed

Not fixed

Galapagos

Not fixed

Not fixed

Ishimoto

Not fixed

Not fixed

Momentum

Always fixed

Always fixed

Montauk

Not fixed Not fixed

Native

Not fixed Not fixed

Pacific

Navigation links only, and only on Index Pages set as the homepage.

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.

Not fixed

Skye

Always fixed

Can be transparent

Always fixed

Supply

Barra lateral, fija (se desplaza si el contenido es más alto que el navegador)

Not fixed

Tremont

Not fixed

Not fixed

Wells

Barra lateral, siempre fija

Not fixed

Wexley

Not fixed

Not fixed

York

Not fixed

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: 22 de 147
Crear un encabezado para el sitio