El encabezado es el área que aparece en la parte superior de cada página de tu tienda. Muestra y agrupa los elementos fijos superiores de la tienda, como el logo y el menú principal.
Secciones adicionales
Dentro del Encabezado del diseño Ipanema podés incluir dos tipos de sección. Además de las configuraciones del propio encabezado, también podés agregar la sección "Barra de anuncios".
| Sección | ¿Cuándo usarla? | ¿Qué configurar? |
|---|---|---|
| Encabezado | Para mostrar el logo, la navegación principal, el buscador, el carrito y el acceso a la cuenta en una única barra consistente. | Una línea extra de navegación (por ejemplo, enlaces destacados o categorías secundarias) con textos y URLs para que los clientes descubran colecciones o campañas importantes. |
| Barra de anuncios | Para destacar montos mínimos para envío gratis, promociones, plazos o avisos cortos encima del encabezado principal. | Un mensaje corto (con formato básico) y un enlace opcional (por ejemplo, a una categoría o página de campaña). |
¡Vamos a los pasos!
1. Ingresar al administrador de tu Tiendanube.
2. Acceder a "Tienda online > Diseño" y hacer clic en "Editar diseño".
3. En el menú lateral izquierdo, hacer clic en "Encabezado".
4. Luego, hacer clic nuevamente en "Encabezado" para abrir las configuraciones.
5. Hacer clic en la opción correspondiente para configurar el encabezado y todos sus elementos:
Encabezado
5.1. En el menú lateral podés configurar la disposición, el diseño y los colores del encabezado:
Disposición
- Posición del logo: elegí entre Izquierda o Centro para definir dónde aparecerá el logo en la versión de escritorio.
- Usar otra posición para celulares: activá esta opción si querés que el logo aparezca en una posición diferente en la versión móvil. Permite elegir entre Izquierda o Centro.
Diseño
- Ancho: define el ancho del encabezado. Seleccioná Página para alinearlo al contenido principal o Completo para que ocupe toda la pantalla.
- Espaciado superior e inferior: ajusta el espaciado vertical interno del encabezado, en píxeles (px).
- Espaciado izquierdo y derecho: ajusta el espaciado horizontal interno del encabezado, en píxeles (px).
- Espaciado diferente para celular: activá para configurar valores de espaciado exclusivos para dispositivos móviles.
- Encabezado siempre visible al navegar la tienda: cuando está activado, el encabezado queda fijo en la parte superior de la pantalla mientras tu cliente se desplaza por la página.
Colores
- Color de fondo: hacer clic en el círculo de color para seleccionar y definir el color de fondo del encabezado.
- Color de textos: hacer clic en el círculo de color para seleccionar y definir el color de los textos que se muestran en el encabezado.
- CSS personalizado: permite agregar reglas de CSS propias para personalizar visualmente el encabezado más allá de las opciones predefinidas.
5.2. También podés configurar los otros elementos del encabezado, como Logo, Utilidades y Navegación.
A continuación te explicamos y mostramos cómo configurar cada uno de estos elementos:
Logo
Hacer clic en "Logo" para abrir las configuraciones en el menú lateral. Una vez desplegado el panel, vas a poder realizar los siguientes ajustes:
- Elegir la altura del logo para la versión de computadora y configurar una altura específica para celulares (en píxeles) activando la opción "Usar altura diferente para celular".
- Hacer clic en "Cargá tu logo" para ir directamente a la sección de Diseño, donde vas a poder subir la imagen del logotipo de tu marca y publicarla en tu tienda.
- Hacer clic en los tres puntos verticales a la derecha de "Logo" si necesitás cambiar el nombre de esta sección.
Utilidades
Hacer clic en "Utilidades" para abrir las configuraciones en el menú lateral, donde podés configurar la disposición, el diseño y los colores de los íconos del encabezado.
Disposición
- Formato en computadoras: elegí cómo se muestran los elementos en la versión de escritorio. "Ícono y texto" para mostrar el nombre al lado del símbolo o "Ícono" para mostrar solo el símbolo.
- Tipo de buscador: "Expandido" mantiene la barra de búsqueda siempre visible, mientras que "Comprimido" muestra solo el ícono, que abre el campo al hacer clic.
- Usar otro tipo para celulares: activá para configurar un tipo de búsqueda diferente para dispositivos móviles.
- Mostrar ícono de usuario en celulares: cuando está activado, muestra el ícono de acceso a la cuenta del cliente en la versión móvil.
Diseño
- Ícono de compra: definir qué ícono representa el carrito de compras en el encabezado. Elegí entre Bolsa o Carrito.
- Tamaño del ícono: ajustar el tamaño de los íconos que se muestran en el encabezado, en píxeles (px).
- Usar otro tamaño para celulares: activar para definir un tamaño de ícono diferente en la versión móvil.
- Separación entre elementos: controlar el espaciado entre los íconos y los demás elementos del encabezado, en píxeles (px).
Colores de los íconos
- Ícono: definir el color de los íconos del encabezado. La opción "Por defecto" mantiene el color definido en las configuraciones generales del diseño.
Navegación
Hacer clic en "Navegación" para abrir las configuraciones del menú de navegación del encabezado. Podés configurar la navegación principal, la disposición, el diseño, los colores, ítem destacado y navegación secundaria.
Navegación principal
- Usar texto en mayúsculas: cuando está activado, muestra los elementos del menú principal completamente en letras mayúsculas.
- Mostrar un link de "Categorías" en computadoras: activá para mostrar un enlace adicional llamado "Categorías" en el menú de la versión de escritorio.
- Mostrar una barra horizontal de categorías en celulares: cuando está activado, presenta una barra horizontal con las categorías de la tienda en la versión móvil.
Disposición
- Alineación en computadoras: define el alineamiento del menú principal en la versión de escritorio. Elegí entre Izquierda o Centro.
Diseño
- Espaciado superior e inferior: ajusta el espaciado vertical interno del menú, en píxeles (px).
- Espacio entre links: controla la distancia horizontal entre los elementos del menú, en píxeles (px).
Colores
- Color de fondo: define el color de fondo del menú. La opción Predeterminado mantiene el color definido en las configuraciones generales del diseño.
- Color de los textos: define el color de los textos de los enlaces del menú.
- Línea divisoria en computadoras: define el color de la línea que separa el menú del resto del encabezado en la versión de escritorio.
Recursos adicionales
- Ítem destacado: cuando está activado, permite destacar un link específico del menú principal con un color que podés personalizar.
- Navegación secundaria: cuando está activado, agrega un segundo menú al encabezado.
6. Para agregar la sección "Barra de anuncios" al encabezado, hacer clic en el botón “+ Agregar sección” y luego en "Barra de anuncio > Agregar". Podés agregar tantos anuncios como quieras haciendo clic en "+ Agregar Anuncio".
7. Hacer clic en "Guardar y publicar" para aplicar los cambios en tu tienda
¡Listo!
Tu encabezado está configurado y personalizado para tu tienda.
Para saber cómo gestionar las secciones y páginas de tu diseño, consultá el tutorial: ¿Cómo cambiar, agregar y gestionar páginas y secciones del Diseño Ipanema en Tiendanube?