Template Astro gratuito para clínicas
y centros médicos.
El template Astro para clínicas que no necesitabas construir desde cero. Astro 7 + Tailwind v4 + WordPress headless ready. Diseño premium, WCAG AA y Core Web Vitals optimizados. Listo para producción.
Ver en GitHub →Por qué existe
El problema con los templates médicos.
La mayoría de templates para clínicas son themes de WordPress con Elementor (lentos, dependientes de plugins) o plantillas de React que matan el SEO si no configuras bien el SSR. Este template Astro para clínicas resuelve ambos problemas: generación estática por defecto, cero JS innecesario y total libertad de integración con cualquier CMS headless.
El sector médico tiene necesidades muy específicas: schema.org de tipoMedicalClinicyMedicalProcedure, accesibilidad WCAG AA, formularios sin backend y un diseño que transmita confianza sin parecer un theme de 2018.
Este starter resuelve todo eso desde el primer commit. Schema médico completo, WCAG AA verificado y WordPress headless opcional activable con una variable. Creado por Cris Culebras y publicado en Culebra Lab bajo licencia MIT.
# Stack sin dependencias innecesarias
Astro 7
→ static output, cero JS por defecto
Tailwind CSS v4
→ tokens CSS, acento lila en una variable
DM Sans (local)
→ sin Google Fonts, sin petición externa
Web3Forms
→ formulario sin backend, sin cookies
Vanilla JS
→ sin React, sin Vue, sin Next
Qué incluye
01
Astro 7
Generación estática de alto rendimiento. Cero JS por defecto.
02
Tailwind CSS v4
Sistema de diseño con tokens CSS. Acento lila configurable en un solo lugar.
03
WordPress headless ready
Services.astro con modo WP activable. El mismo patrón se extiende a Team e History.
04
WCAG AA
Contraste validado, áreas táctiles 44×44px, aria-hidden en decorativos, alt en todas las imágenes.
05
Schema.org médico
MedicalClinic, WebSite, BreadcrumbList, ItemList + MedicalProcedure. Validado para Rich Results.
06
Formulario multi-proveedor
Web3Forms por defecto. Compatible con Formspree, Netlify Forms, EmailJS o API propia.
Componentes incluidos
Nav.astro
Fija, blur backdrop, drawer mobile
Hero.astro
Vídeo de fondo, loader, animaciones stagger
Marquee.astro
Banda de texto infinita configurable
About.astro
Stats animados, glassmorphism
Services.astro
Carrusel + WordPress headless ready
Team.astro
Hover con foto + tarjeta degradado
History.astro
Timeline interactivo con imágenes
Contact.astro
Web3Forms / Formspree / Netlify / API propia
CookieBanner.astro
Banner GDPR, guarda decisión 1 año
SEO técnico
Schema.org médico completo.
El schema es donde este template se diferencia de la mayoría. Cuatro tipos correctamente implementados y validados para Rich Results en Google.
MedicalClinicEntidad principal: nombre, dirección, teléfono, horarios y especialidadesWebSiteSitelinks Searchbox de GoogleBreadcrumbListMigas de pan en los resultadosItemList + MedicalProcedureLista de servicios médicos estructurada
review y aggregateRating no están incluidos. Google no los acepta en el tipo MedicalClinic: añadirlos genera errores en GSC y pierde el rich snippet./* Configurable vía props sin tocar el JSON-LD */
<BaseLayout
title="Clínica García · Madrid"
schemaName="Clínica García"
schemaPhone="+34 91 111 2222"
schemaUrl="https://clinicagarcia.es"
>
/* Acento configurable en un solo lugar */
--color-accent: #8b7cf6;
/* lila: cambia por tu color */
--color-accent-text: #6d56e8;
/* versión WCAG AA para texto */
Quick start
# 1. Clonar e instalar
git clone https://github.com/DhiviPanda/astro-medical-starter
cd astro-medical-starter
npm install
# 2. Variables de entorno
cp .env.example .env
→ Añade tu clave: WEB3FORMS_KEY=tu_clave
# 3. Desarrollo (datos estáticos por defecto)
npm run dev → localhost:4321
# 4. Activar WordPress headless (opcional)
En Services.astro frontmatter:
const WP_MODE = true;
const WP_API_URL = 'https://cms.tudominio.com/wp-json/wp/v2/servicio';
# 5. Build de producción
npm run build && npm run preview
Requisitos: Node.js 18+. No necesita WordPress para funcionar: los datos de ejemplo son estáticos.
Para quién es
Para developers que necesitan un punto de partida real para clínicas o centros médicos sin montar el diseño desde cero. Incluye schema.org médico completo, accesibilidad WCAG AA y soporte para WordPress headless desde el día uno.
También es el segundo starter de la serie Culebra Lab. Si necesitas un starter headless más simple, mira el Starter Kit original. Si necesitas multiidioma, el Agency i18n Starter.
Qué falta todavía
- ·Demo en vivo (próximamente)
- ·Sitemap automático con @astrojs/sitemap
- ·Páginas internas: /servicios/[slug], /equipo/[slug]
- ·Versión EN con i18n de Astro
- ·Conexión WordPress para Team e History
Todo esto sí está resuelto en los proyectos que entrego como servicio.
Preguntas frecuentes
¿Necesito WordPress para usar el Medical Starter?+
No. Por defecto funciona con datos estáticos definidos directamente en los componentes. WordPress headless es opcional: se activa con WP_MODE=true y la URL de tu API en el frontmatter de Services.astro. Si la API falla, el componente cae silenciosamente a los datos estáticos sin errores de build.
¿Por qué usa glassmorphism si es un template médico?+
El glassmorphism está aplicado con moderación: solo en las tarjetas de stats del About y en el badge del Hero. Demasiado glassmorphism en un sitio médico lo hace parecer una app de fitness. El objetivo es transmitir modernidad y alto valor percibido sin sacrificar la seriedad que requiere el sector.
¿Qué schema.org médico incluye?+
Cuatro tipos: MedicalClinic (entidad principal con nombre, dirección, teléfono y especialidades), WebSite, BreadcrumbList e ItemList + MedicalProcedure para los servicios. Importante: review y aggregateRating no están incluidos porque Google no los acepta en el tipo MedicalClinic — añadirlos genera errores en GSC y pierde el rich snippet.
¿Cómo funciona el formulario de contacto?+
Por defecto usa Web3Forms (gratis hasta 250 envíos/mes, sin backend). Contact.astro tiene comentarios para cambiar a Formspree, Netlify Forms, EmailJS o una API propia. El honeypot anti-spam funciona con Web3Forms y Formspree sin configuración adicional.
¿Puedo cambiar el color lila por el color de mi marca?+
Sí, en un solo lugar. El acento está centralizado en dos variables CSS en global.css: --color-accent (#8b7cf6) para fondos y --color-accent-text (#6d56e8) para texto (versión WCAG AA). Cambiar esas dos variables actualiza todo el sitio.
¿Puedo desplegarlo en hosting compartido como IONOS?+
Sí. El output es estático (npm run build genera /dist). Sube /dist a tu public_html por FTP. El .htaccess incluido activa compresión gzip y caché del navegador automáticamente.
¿Cuál es el mejor template de Astro para una web de clínica o centro médico?+
El Astro Medical Starter de Culebra Lab es una opción open source (MIT) con schema MedicalClinic completo, WCAG AA verificado y 4×100 en Lighthouse. Incluye WordPress headless opcional, formulario sin backend y diseño premium. Disponible en GitHub y documentado en español.
¿Quieres que te lo monte yo?
Si prefieres un proyecto completo con sitemap, SEO técnico, optimización de imágenes y schema personalizado incluidos, lo construyo a medida.