Alcance inmediato
El teléfono y el WhatsApp están a un toque desde cualquier página, sin buscar. Menos fricción para contactar = más conversaciones.
Módulo del sitio · Topbar
El Topbar: la barra utilitaria
La franja delgada que corona el sitio, por encima del logotipo y el menú. Pequeña en tamaño, grande en función: es la capa de «siempre disponible» —contacto y confianza a un golpe de vista—.
No es una ficha técnica más: es el módulo entero, abierto y explicado. Qué problema resuelve y por qué se gana su lugar, de qué piezas se compone, dónde encaja en el layout y cómo está construido —el recorrido completo, del criterio de diseño a la implementación.
Y todo se apoya en un mismo principio: una única fuente de verdad. El contenido y el diseño van por separado —los datos en site.ts, la apariencia en el componente—; por eso ajustas un valor una sola vez y el cambio se propaga, idéntico y sin sorpresas, a cada página.
Definición
¿Qué es un topbar?
La barra utilitaria superior: una franja fina, de un solo color de marca, que va por encima del menú y se repite en todas las páginas.
El topbar (o barra utilitaria) es esa tira delgada que corona el sitio, antes del logotipo y la navegación. No es decoración ni un segundo menú: es el lugar donde pones lo que el visitante puede necesitar en cualquier momento —cómo te llama, en qué horario, por dónde escribirte— sin que estorbe al mensaje principal de la página.
Por eso es discreta: poca altura, un color sobrio de marca y texto pequeño. Su trabajo no es llamar la atención, sino estar ahí cuando se la busca. Piensa en ella como el mostrador de información de una tienda: nadie entra por él, pero todos agradecen que exista y esté siempre en el mismo sitio.
Función e importancia
¿Para qué sirve?
Cumple dos funciones a la vez: acercar el contacto y transmitir confianza, en todas las páginas y sin pedir nada a cambio.
Su función es ser la capa de «siempre disponible». Mientras el hero presenta y el catálogo vende, el topbar resuelve una pregunta muy concreta que el visitante trae en la cabeza: «si me interesa, ¿cómo los contacto?». Tener esa respuesta a la vista, en cada página, baja la fricción justo en el momento en que alguien decide dar el paso.
Y ahí está su importancia: una parte enorme de las consultas se pierden por un detalle tonto —el visitante no encontró el teléfono o el WhatsApp rápido y se fue—. El topbar elimina ese punto de fuga. Es de los elementos más pequeños del sitio y, sin embargo, de los que más trabajan por la conversión.
Confianza a primera vista
Horario y propuesta visibles dicen, sin palabras, «este es un negocio real y disponible». Esa señal pesa antes de leer una sola línea del contenido.
Constancia en todo el sitio
Va en todas las páginas, idéntica. El visitante siempre sabe dónde encontrar el contacto, esté donde esté dentro del sitio.
Anatomía
¿Qué va en el topbar?
Cuatro piezas, ni una más: una propuesta corta y tres formas de contacto.
Cada pieza se gana su lugar por una razón. La propuesta posiciona la marca en una línea; el teléfono y el WhatsApp dejan el contacto a un toque; el horario aporta la señal de disponibilidad. Si un elemento no trabaja para el visitante, no entra en la barra.
Abajo la ves montada con los datos reales de la plantilla. Cada punto numerado se desglosa en su tarjeta —qué resuelve y de qué campo de site.ts toma su valor—, para que distingas de un vistazo qué es diseño y qué es dato.
1Plantilla base para sitios Astro profesionales 2Lun–Vie 9:00–18:00 355 0000 0000 4WhatsApp
Propuesta principal
Una frase corta que posiciona la marca: lo primero que se lee. No es un eslogan vacío, sino la línea que dice a qué te dedicas. Ojo: el logotipo NO va aquí, va en el Header.
Dato SITE.tagline
Horario
Señal de disponibilidad y confianza —«hay alguien y atiende a estas horas»—. Es información de apoyo, así que en móvil se oculta para cederle el espacio a las acciones.
Dato CONTACT.schedule.display
Teléfono
Contacto directo con clic-para-llamar en el celular. El enlace tel: no se escribe a mano: lo arma telUrl() con el número en formato E.164.
Dato CONTACT.phone · telUrl()
La acción principal de la barra, resaltada como pastilla. El enlace SIEMPRE se arma con waUrl() y el mensaje precargado sale de WA_MESSAGES, para que el lead entre en materia desde el primer toque.
Dato waUrl(WA_MESSAGES.cotizar)
Variantes
Otros diseños y aplicaciones
El de esta plantilla es una barra de contacto, pero el topbar adopta muchas formas según el negocio.
No hay un único topbar: hay una franja superior que cada tipo de sitio adapta a su objetivo. Una tienda la usa para promociones; una aplicación, para navegación y acciones; una marca global, para idioma y moneda. Mismo lugar, intención distinta.
Abajo, seis variantes reales —cada una con una réplica en vivo y el tipo de proyecto donde brilla—. Sirven para reconocer cuál te conviene y para ver cómo el mismo molde se reescribe sin perder su sitio.
- Tu taller de confianza Lun–Sáb 9–18 h 55 1234 5678 WhatsApp
- Envío gratis desde $999 Comprar →
- Te faltan $200 para envío gratis
- Devoluciones gratis · 30 días
- Ayuda Seguir pedido ES ▾ MXN ▾ Mi cuenta
- Panel
Responsive y móvil
Cómo se comporta en el teléfono
En móvil un topbar no es «el de escritorio encogido»: es decidir qué sobrevive y dónde se toca.
La pantalla del teléfono no da para todo, así que la barra se piensa al revés: primero, qué es imprescindible. Lo informativo —propuesta, horario— cae primero; la razón de ser de la barra, la acción de contacto, nunca se va. Es el patrón de «prioridad» o divulgación progresiva: mostrar lo esencial y revelar el resto solo si se pide.
Y manda la ergonomía: en una mano, lo cómodo es la franja inferior —la «zona del pulgar»—, los objetivos se tocan a partir de 44 px y un aviso que ocupa pantalla debe poder cerrarse. Abajo, cuatro patrones, cada uno con su vista en el teléfono y una receta comentada lista para copiar.
Taller WhatsApp
1 · Prioridad: que sobrevivan las acciones
Conforme se angosta la pantalla, la barra suelta primero la propuesta, luego el horario; el teléfono y el WhatsApp se quedan siempre —y en lo más estrecho el tel se vuelve solo ícono—.
/* TOPBAR · patrón «prioridad» (progressive disclosure)
Regla de oro: lo informativo cae primero; las ACCIONES nunca.
En cada breakpoint la barra suelta lo menos crítico. */
.topbar__tagline,
.topbar__schedule { display: inline-flex; } /* visibles en escritorio */
@media (max-width: 900px) {
.topbar__tagline { display: none; } /* 1º cae la propuesta */
}
@media (max-width: 600px) {
.topbar__schedule { display: none; } /* 2º cae el horario */
}
@media (max-width: 420px) {
/* En lo más estrecho, el teléfono se reduce a su ícono (☎),
pero el enlace tel: y el WhatsApp SIEMPRE permanecen. */
.topbar__phone-label { display: none; }
} Taller
2 · La acción, en la zona del pulgar
En el teléfono, el contacto baja al borde inferior —lo más cómodo de alcanzar con una mano—, con objetivos de 44 px y respetando el área segura del iPhone.
/* ACCIÓN EN LA «ZONA DEL PULGAR»
En el teléfono, la acción que más convierte baja al borde
inferior: es el área más cómoda de alcanzar con una mano. */
@media (max-width: 600px) {
.acciones-movil {
position: fixed;
inset: auto 0 0 0; /* fija abajo, de borde a borde */
z-index: 50;
display: flex;
gap: .5rem;
padding: .5rem;
/* No quedar tapada por la barra de gestos del iPhone: */
padding-bottom: calc(.5rem + env(safe-area-inset-bottom));
background: #fff;
border-top: 1px solid #e8e8e8;
}
.acciones-movil a {
flex: 1 1 0;
min-height: 44px; /* objetivo táctil mínimo (iOS HIG) */
display: grid;
place-items: center;
}
} Envío gratis desde $999
Tienda
3 · Aviso compacto y descartable
La barra de promoción se mantiene corta (menos de 45 caracteres, 36–42 px) y, sobre todo, se puede cerrar: en móvil ocupa espacio valioso, y recordar el cierre evita molestar página tras página.
<!-- BARRA DE ANUNCIO · compacta y DESCARTABLE
En móvil el espacio es oro: una sola acción, < 45 caracteres,
alto 36–42px y un botón para cerrarla. Recordamos el cierre
para no repetirla en cada página de la sesión. -->
<aside id="aviso" class="aviso">
<p class="aviso__txt">Envío gratis desde $999</p>
<button class="aviso__x" type="button" aria-label="Cerrar aviso">✕</button>
</aside>
<script>
const aviso = document.getElementById('aviso');
// Si ya se cerró antes en esta sesión, no se vuelve a mostrar.
if (sessionStorage.getItem('aviso:cerrado')) aviso.hidden = true;
aviso.querySelector('.aviso__x').addEventListener('click', () => {
aviso.hidden = true;
sessionStorage.setItem('aviso:cerrado', '1');
});
</script> Despacho WhatsApp
4 · Overflow para lo secundario
Lo primario (llamar, WhatsApp) queda siempre a la vista; el resto —horario, ubicación, redes— se pliega en un menú de overflow nativo, accesible y sin una sola línea de JavaScript.
<!-- MENÚ DE OVERFLOW · acciones secundarias, SIN JavaScript
Lo primario (llamar / WhatsApp) queda siempre visible; lo
secundario se pliega en <details>: accesible por teclado y
lectores de pantalla de fábrica, sin una línea de script. -->
<details class="overflow">
<summary class="overflow__btn" aria-label="Más opciones">⋯</summary>
<nav class="overflow__panel">
<a href="#horario">Horario</a>
<a href="#ubicacion">Ubicación</a>
<a href="#redes">Redes sociales</a>
</nav>
</details>Posición
¿Dónde se coloca?
Hasta arriba del todo, antes del header, de borde a borde. Es lo primero del sitio en el orden de lectura.
Va en la cima: por encima del logotipo y del menú, ocupando todo el ancho. Ese lugar no es casual —al estar primero, es lo que enmarca la entrada al sitio y deja el contacto a la vista antes de cualquier otra cosa—. Debajo, pegado, va el Header con la marca y la navegación.
En esta plantilla la barra es fija (sticky): se queda arriba al hacer scroll, así el WhatsApp nunca se va de pantalla. Y es responsive con criterio: en escritorio caben las cuatro piezas; conforme la pantalla se angosta, primero cae la propuesta y el horario, y en móvil sobrevive lo único imprescindible —la acción de contacto—.
Implementación
Cómo está construido
Un componente, una sola fuente de datos y enlaces que se arman solos. Editas el dato una vez y cambia en todo el sitio.
El topbar vive en el componente TopBar.astro, pero no guarda ningún dato propio: todo —propuesta, horario, teléfono y WhatsApp— sale de site.ts, la única fuente de verdad (SSoT). Por eso cambiar el número de teléfono o el horario es un solo ajuste, en un solo lugar, que se refleja en cada página.
Los enlaces de contacto nunca se escriben a mano. El tel: lo construye telUrl() y el de WhatsApp lo arma waUrl() con el mensaje precargado de WA_MESSAGES. Es la regla dura D4: centralizar número y encoding evita errores y mantiene todo consistente. La barra es accesible (cada enlace con su aria-label, iconos ocultos a lectores) y responsive por breakpoints.
En concreto, así se reparten las responsabilidades: el componente
(src/components/TopBar.astro) pone el diseño y el comportamiento; el
contenido (src/config/site.ts) pone los datos. El componente
lee SITE.tagline, CONTACT.schedule.display, CONTACT.phone
y los mensajes de WA_MESSAGES, y construye los enlaces con
telUrl() y waUrl().
El responsive es por prioridad de acciones: en
< 900px se ocultan la propuesta y el horario; en
< 480px cae también el teléfono y queda solo el WhatsApp —la acción que más
convierte—. Así, en una pantalla pequeña, la barra no se amontona: conserva lo esencial.
Buenas prácticas
Qué hacer y qué evitar
La diferencia entre un topbar que ayuda y uno que estorba está en unos pocos hábitos.
Ninguno de estos hábitos es capricho: salen de observar qué acerca al visitante y qué lo aleja. Un topbar que ayuda mantiene el foco en el contacto; uno que estorba se llena de enlaces, imita al menú o arrastra datos de ejemplo hasta producción.
La ventaja es que son pocos y se sostienen solos en cuanto respetas la fuente única: datos reales en site.ts, enlaces con telUrl() y waUrl(), y la barra ligera. Abajo, lo que conviene y lo que conviene evitar, enfrentados.
Sí conviene
- Mantenla ligera: propuesta + 2 o 3 datos de contacto, nada más.
- En móvil, conserva las acciones (llamar / WhatsApp) y suelta lo accesorio (propuesta, horario).
- Usa datos reales y una sola fuente (site.ts); cámbialos una vez y se actualizan en todo el sitio.
- Arma los enlaces con telUrl() / waUrl(): centralizan el número y el encoding.
Mejor evita
- No metas el logotipo aquí: la marca vive en el Header, justo debajo.
- No escribas el tel: o el wa.me a mano dentro de un componente (regla dura D4).
- No la satures de enlaces ni la conviertas en un segundo menú.
- No dejes datos DEMO en producción: teléfono, horario y mensaje deben ser los reales.