Visión general
Educ CMS es una plataforma moderna y flexible que permite a cualquier persona o empresa crear y gestionar sitios web profesionales en minutos, sin necesidad de conocimientos técnicos avanzados.
- Landing Pages Dinámicas: Diseña páginas de alto impacto visual para captar la atención de tus visitantes y convertirlos en clientes.
- Blog Integrado: Publica artículos, noticias y recursos fácilmente, potenciando tu estrategia de contenidos y SEO.
- Gestión Multitenant: Administra múltiples sitios o proyectos desde una sola cuenta, cada uno con su propio dominio, configuración y contenido independiente.
- Componentes Personalizables: Accede a una biblioteca de componentes UI modernos y responsivos para crear experiencias únicas y adaptadas a tu marca.
- Autenticación Segura: Ofrece acceso seguro para administradores y usuarios, con soporte para login tradicional y social (Google, GitHub, etc.).
- Escalabilidad y Rendimiento: Arquitectura optimizada para crecer contigo, desde pequeños proyectos hasta grandes portales multiempresa.
- Editor Visual Intuitivo: Construye y edita tus páginas arrastrando y soltando componentes, imágenes, textos y más, sin complicaciones gracias a la integración de GrapesJS.
- Editor de Código Avanzado: Personaliza el código fuente de tus páginas y componentes directamente desde la plataforma, gracias a la integración con CodeMirror. Modifica HTML, CSS y JavaScript en tiempo real, con resaltado de sintaxis y una experiencia de edición profesional.
- Lanza tu presencia digital en minutos y gestiona todo tu contenido desde un solo lugar.
- Ofrece a tus usuarios una experiencia moderna, profesional y adaptable a cualquier dispositivo.
- Actualiza y personaliza tu sitio web fácilmente, sin depender de terceros.
Cómo funciona
La idea central de Educ CMS es simple: cada página de tu sitio es HTML, CSS y JavaScript puro.
Cuando guardas una página, el sistema no la interpreta con ningún motor de plantillas propio ni la reescribe: guarda exactamente el código que escribiste (o que generó el editor visual) y lo sirve tal cual a tus visitantes, igual que si abrieran un archivo .html normal.
Esto tiene dos consecuencias muy prácticas:
- Sin candados técnicos: puedes usar cualquier CSS o librería de JavaScript en tus páginas (Tailwind vía CDN, Alpine.js, animaciones, lo que necesites), sin depender de un lenguaje de plantillas propietario.
- Portabilidad real: como cada página es un archivo HTML autocontenido, puedes exportar tu sitio completo, editarlo con cualquier herramienta o incluso con un agente de IA, y volver a subirlo. Nada te ata a un formato propietario.
<cms-component slug="..."> por el contenido del componente correspondiente (ver Componentes), y agregar scripts de primera parte como analytics cuando corresponde. El resto de tu código no se toca.
Empezar tu sitio
Al crear un proyecto nuevo, tienes tres caminos disponibles. Ninguno es "el correcto": elige el que mejor se adapte a cuánto control quieres sobre el código.
1. Con plantilla
Al crear tu proyecto, elige una plantilla del catálogo. Tu sitio arranca con páginas ya diseñadas que puedes editar visualmente o por código. Es el camino más rápido si no quieres empezar desde cero.
2. Sin plantilla
Elige "Continuar sin plantilla" y arranca con un proyecto vacío. Crea tus páginas una por una usando el editor visual o el editor de código desde cero.
3. Importar tu sitio HTML
¿Ya tienes un sitio en HTML/CSS/JS (propio, exportado de otra herramienta, o hecho por un diseñador)? Súbelo directamente: cada archivo .html se convierte en una página. Ver Desarrollo local.
.html reales.
Páginas
Las páginas son la base de tu sitio web en Educ CMS. Aquí puedes mostrar información relevante, productos, servicios o cualquier contenido que desees compartir con tus visitantes de manera profesional y atractiva.
¿Cómo crear una página?
Crear una nueva página es muy sencillo. Solo necesitas completar dos campos esenciales:
- Título: Es el nombre visible de la página en tu sitio, por ejemplo “Acerca de Nosotros”.
-
Slug: Es la parte de la
URL que identifica a la página. Por ejemplo, para la página “Acerca de Nosotros”, el
slug podría ser acerca-de-nosotros,
lo que generará una URL como:
educ.pe/acerca-de-nosotros
home es especial: la página con ese slug es tu página principal (la que se muestra en la raíz de tu dominio).
El contenido web se pueden editar de 2 maneras:
- Editor Visual: Diseña tu página de forma intuitiva arrastrando y soltando componentes, imágenes, textos y más. Es perfecto para usuarios sin experiencia técnica que quieren resultados rápidos y profesionales.
- Editor de Código: Si tienes conocimientos técnicos o quieres personalizar tu página al máximo, puedes editar el código HTML, CSS y JavaScript directamente. Esto te da control total sobre el diseño y la funcionalidad de tu página.
Desarrollo local e importar/exportar
Como cada página es un archivo HTML autocontenido (ver Cómo funciona), puedes trabajar tu sitio completo en tu computadora, con tu editor de código favorito o con un agente de IA, y luego subirlo a Educ CMS de una sola vez.
Archivos de ayuda para desarrollo local
La forma más rápida de arrancar es descargar el proyecto base completo: un .zip con server.js, README.md, AGENTS.md y tres páginas de ejemplo (home.html con un menú de navegación hacia las otras dos), listo para levantar el servidor local y empezar a editar de inmediato.
O descarga cada archivo por separado:
-
local-server.md — instrucciones paso a paso para levantar un servidor local (con
http-servero con elserver.jsincluido). Se incluye comoREADME.mden cada export. -
server-example.js — un servidor local en Node.js listo para usar. Sirve tu página principal en
/, resuelve rutas sin extensión (/contacto→contacto.html) igual que lo hace Educ CMS en producción, para que veas tu sitio exactamente como se verá publicado. -
AGENTS.md — instrucciones pensadas para agentes de IA (Claude Code, Cursor, GitHub Copilot, Codex, etc.), con las convenciones de nombres de archivo y enlaces que espera Educ CMS. Ponlo en la raíz de tu carpeta de trabajo para que tu agente lo lea automáticamente.
Convención de nombres de archivo
Cuando trabajas localmente (o preparas un .zip para importar), el nombre de cada archivo es el slug de la página:
home.htmles tu página principal.contacto.html,precios.html, etc. se importan con ese mismo slug.- Solo minúsculas, números y guiones, sin espacios ni acentos.
- Los enlaces internos entre páginas deben ir sin la extensión
.html(ej.href="/contacto") para que funcionen igual en local y en producción.
Algunos slugs están reservados porque coinciden con rutas internas del sistema, y se omiten al importar: api, dashboard, admin, login, logout, register, password, reset-password, verify-email, two-factor, user, users, settings, profile, search, sitemap, feed, rss.
Desde el panel de páginas, selecciona una o varias páginas y usa "Exportar". Descargas un .zip con un .html por página, más README.md, server.js y AGENTS.md ya incluidos.
Desde el mismo panel, usa "Importar" y sube un .zip con tus archivos .html. Verás una vista previa de qué páginas se crearán y cuáles reemplazarán a una existente antes de confirmar.
AGENTS.md y tu agente de IA favorito, previsualízalas con el servidor local para revisar que todo se vea bien, y vuelve a importarlas. También puedes generar contenido con IA siguiendo la guía de generación de contenido.
Creación de blogs y posts
El sistema de blog de Educ CMS te permite compartir noticias, artículos, tutoriales o cualquier tipo de contenido que quieras publicar regularmente. Es una excelente herramienta para mantener a tu audiencia informada y mejorar tu posicionamiento en buscadores.
¿Cómo crear un blog y publicar posts?
Para crear un blog, simplemente ve a la sección de blogs en tu panel de administración y haz clic en “Crear nuevo blog”. Luego, para publicar un post, selecciona el blog deseado y haz clic en “Nueva Publicación”. Completa el título, slug, extracto, imagen Url, fecha de publicación y otros detalles, ¡y listo!
Cada post puede incluir texto, imágenes, videos y otros medios para hacerlo más atractivo y relevante para tus lectores. Además, puedes programar la publicación de tus posts para que se publiquen automáticamente en la fecha y hora que elijas.
Recuerda que un blog activo y bien gestionado es una de las mejores formas de mantener a tu audiencia comprometida y mejorar tu SEO, así que ¡no dudes en compartir contenido de valor regularmente!
El contenido de los posts se pueden editar de la misma manera que los editores de páginas, con un editor visual intuitivo o editando el código directamente para personalizar al máximo cada publicación.:
Componentes
Los componentes son bloques de código reutilizables que puedes usar para diseñar tus páginas y posts de manera rápida y profesional. Desde encabezados, footers, botones, tarjetas, hasta secciones completas, nuestra biblioteca de componentes te permite crear experiencias únicas y adaptadas a tu marca sin necesidad de diseñar cada elemento desde cero.
¿Cómo crear componentes?
Para crear un nuevo componente, haz clic en el botón “Nuevo componente” en el panel de componentes. Solo necesitas ingresar el nombre y el slug del componente.
- El nombre es solo para identificar el componente en el panel.
- El slug debe ser único, en minúsculas y sin espacios (usa guiones si es necesario).
Luego podrás editar el contenido del componente usando el editor de código integrado, donde puedes agregar HTML, CSS y JavaScript para personalizarlo completamente.
¿Cómo usar los componentes?
Una vez creado tu componente, puedes insertarlo en cualquier página o post usando la siguiente sintaxis:
<cms-component slug="mi-componente" />
Reemplaza mi-componente por el slug de tu componente. Puedes agregar este código en cualquier parte del contenido de tus páginas o posts para mostrar el componente personalizado.
- Los componentes te permiten reutilizar bloques de diseño y funcionalidad en todo tu sitio.
- Si editas el componente, los cambios se reflejarán automáticamente en todos los lugares donde lo hayas usado.
Recuerda que el uso de componentes no solo acelera el proceso de diseño, sino que también te permite mantener un diseño profesional y coherente en todo tu sitio web, lo que mejora la experiencia de tus visitantes y fortalece tu marca. ¡Experimenta con diferentes combinaciones de componentes para crear páginas y posts únicos y atractivos!
Editor visual y de código
Cada página, post o componente se puede editar con dos herramientas distintas. Puedes alternar entre ambas sin perder tu trabajo, ya que las dos operan sobre el mismo HTML.
Editor visual (GrapesJS)
Arrastra y suelta bloques, imágenes y texto sin tocar código. Ideal si no tienes experiencia técnica o quieres avanzar rápido en el diseño.
Editor de código (CodeMirror)
Edita el HTML, CSS y JavaScript directamente, con resaltado de sintaxis. Ideal si vienes de trabajar el sitio localmente o quieres control total.
@click, x-data o :class funcionan sin ningún ajuste extra de tu parte.
Autenticación
El acceso a tu panel de administración está protegido con registro e inicio de sesión tradicionales (correo y contraseña), además de inicio de sesión social con Google y GitHub.
- El registro incluye verificación de correo electrónico y protección contra bots (honeypot y reCAPTCHA).
- Las contraseñas deben cumplir requisitos mínimos de seguridad, que se muestran en tiempo real mientras las escribes.
- Puedes vincular tu cuenta con Google o GitHub para iniciar sesión sin contraseña.
Multitenancy
Educ CMS es multitenant: cada proyecto que creas ("tenant") tiene sus propias páginas, posts, componentes y usuarios, completamente aislados del resto. Desde una sola cuenta puedes administrar varios sitios independientes.
- Cada proyecto obtiene un subdominio propio, y puede configurarse con un dominio personalizado.
- El contenido de un proyecto nunca es accesible desde otro: la separación es a nivel de datos, no solo de interfaz.
- Los planes disponibles (incluido un plan DEMO gratuito) determinan límites como la cantidad de páginas publicadas.
Preguntas frecuentes
¿Necesito saber programar para usar Educ CMS?
No. Puedes empezar con una plantilla y usar solo el editor visual. El editor de código y la importación de HTML propio son opcionales, pensados para quienes sí quieren control total.
¿Puedo usar JavaScript personalizado en mis páginas?
Sí. El contenido de tus páginas es HTML/CSS/JS real (ver Cómo funciona), así que puedes usar cualquier librería vía CDN, incluyendo frameworks ligeros como Alpine.js.
¿Qué pasa si quiero irme de la plataforma?
Como cada página se guarda como HTML puro, siempre puedes exportar tu sitio completo como archivos .html normales y hospedarlos donde quieras.
¿Por qué mi sitio muestra una marca "DEMO"?
Los proyectos en el plan DEMO muestran un pequeño distintivo a los visitantes que no han iniciado sesión, como recordatorio de que el sitio aún no está en un plan de producción.
¿Puedo generar el contenido de mis páginas con IA?
Sí, tenemos una guía paso a paso para generar contenido HTML con Claude y luego publicarlo directamente en tu sitio.