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.
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:
- Haz clic en Editar, en la esquina superior izquierda de la vista previa de tu sitio.
- Hover over the header and click Edit Site Header. This opens the Global tab.
- 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.
- Para agregar un botón, íconos de redes sociales o un ícono de carrito de compras, haz clic en Elementos.
- To change the header colors, click Colors.
- 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).
- 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:
- Haz clic en Editar, en la esquina superior izquierda de la vista previa de tu sitio.
- Hover over the header and click Edit Site Header. Click the Desktop icon.
- To change the layout, click Header Layout. Scroll to see all layout options and click one to preview it on your site.
- To set the width of the header content, click Full or Inset.
- Use the sliders to change the padding and spacing between elements.
- Click the Mobile icon. Your site preview will automatically switch to mobile view.
- To change the layout, click Header Layout. Scroll to see all layout options and click one to preview it on your site.
- Para cambiar la forma en que aparece el menú cuando se expanden los vínculos, haz clic en Menú superpuesto. También puedes cambiar el color de superposición del menú.
-
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:
- Abre la configuración del encabezado global.
- Click Colors.
- 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:
- Abre la configuración del encabezado global.
- Click Colors.
- 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 de color de sección, visita Cómo cambiar colores.
Establecer el color de superposición en dispositivo móvil
Elige un tema de color para el menú de navegación expandido que aparece en dispositivos móviles:
- Abre la configuración de encabezado para dispositivo móvil.
- Haz clic en Menú superpuesto y, a continuación, en Colores.
- Elige un tema de color.
Para obtener más ayuda con los temas de color 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 vínculos 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:
- 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.