La barra superior (Topbar) permite mostrar información destacada en la parte superior del sitio web, como anuncios, promociones o accesos rápidos.
Su configuración se divide en dos partes:
- Ajustes de plantilla (Barra superior)
- Gestión de contenido (Barra superior)
Ajustes de plantilla (Barra superior)
Este módulo permite personalizar la barra superior del sitio web (Topbar), utilizada para mostrar información destacada como anuncios, promociones o accesos rápidos.
Dentro de esta sección podrá configurar las siguientes opciones:
- Activar o desactivar Topbar:
Permite mostrar u ocultar la barra superior en el sitio. - Color de fondo Topbar:
Define el color de fondo de la barra superior . - Color de texto Topbar:
Configura el color del texto que se mostrará en la barra superior. - Tipo de contenido:
Podrá seleccionar entre las siguientes opciones:- Mensaje rotativo: Muestra mensajes que cambian automáticamente
- Componentes: Permite agregar otros elementos personalizados dentro de la barra superior.
- Ancho de la barra:
- Estándar: Ajusta el ancho de la barra de acuerdo con el contenido del sitio web.
- Pantalla completa: Utiliza todo el ancho disponible de la pantalla.
- Mensajes rotativos (texto y URL):
Permite agregar mensajes de manera visual, incluyendo enlaces que redirijan a otras páginas o secciones del sitio web. - Tamaño de letra Topbar:
- Grande
- Pequeño
Una vez realizadas las modificaciones, haga clic en el botón “Publicar” para guardar los cambios correctamente. En caso de no presionar el botón “Publicar”, los cambios realizados no serán aplicados en el sitio web.
Recomendaciones
- Utilice mensajes claros, breves y llamativos para captar la atención de los usuarios.
- Aproveche los enlaces para dirigir a promociones, productos o secciones importantes del sitio web.
- Evite saturar la barra superior con demasiada información para mantener una apariencia limpia y ordenada.
Barra superior (Gestión de contenido)
En esta sección podrá gestionar el contenido de la barra superior mediante bloques, organizándolos y configurándolos de acuerdo con sus necesidades.
Diríjase a TiendaMaker > Barra superior.
Agregar bloque
Para añadir un bloque en la barra superior, haga clic en el botón “Agregar bloque”. Esta opción permite añadir un elemento individual dentro de la barra superior del sitio web.
Al hacer clic en esta opción, se abrirá un panel donde podrá seleccionar el tipo de componente que desea agregar, por ejemplo:
- Mensajes contextuales
- Correo electrónico
- Imagen
- Botón
- Texto
- Iconos
Cada bloque podrá configurarse de manera independiente según el contenido que desee mostrar.
Una vez seleccionado el componente:
- Deberá configurar sus parámetros, tales como contenido, estilos, enlaces, entre otros.
- Luego, haga clic en el botón “Aceptar” para agregar el componente a la barra superior.
Agregar bloque de columnas
Para añadir un bloque de columnas en la barra superior, haga clic en el botón “Agregar bloque de columnas”. Permite estructurar la barra superior en varias columnas.
Al seleccionar esta opción, usted podrá:
- Definir el número de columnas
- Ajustar el espacio entre columnas.
- Configurar márgenes
- Establecer el comportamiento en dispositivos móviles
Una vez configurado el bloque de columnas de clic en el botón “Aceptar”. A continuación, podrá:
- Agregar componentes dentro de cada columna
- Organizar el contenido de forma horizontal (por ejemplo: teléfono, correo y menú)
Esta opción es ideal para distribuir mejor la información en la barra superior.
Guardar cambios
Permite aplicar todos los ajustes realizados en la barra superior.
Es necesario hacer clic en este botón para que:
- Los bloques agregados se guarden
- Los cambios de diseño se reflejen en el sitio
Si no guarda los cambios, la configuración realizada no será aplicada.
Consideraciones importantes
- La configuración visual se realiza en Topbar (Ajustes de plantilla)
- El contenido se gestiona en Barra superior (bloques)
- Si utiliza componentes, debe administrar los bloques desde la sección correspondiente
- Se recomienda mantener una estructura clara y organizada
Recomendaciones
- Utilice mensajes claros, breves y llamativos
- Evite sobrecargar la barra con demasiada información
- Se recomienda un máximo de 2 a 3 elementos visibles
- Priorice promociones o información relevante
- Mantenga coherencia visual con el diseño del sitio