Crea y publica tu web con el Website Builder

Antes de empezar

• El Website Builder completo (páginas nuevas, plantillas, publicar, animaciones y componentes reutilizables) está incluido en los planes Professional e Institutional. Free y Basic incluyen el diseño web básico.
• Si pasaste por el asistente de configuración, ya tienes una página de inicio en borrador esperándote.

1. Conoce el Studio

Abre Mi academia → Diseñador → Website Builder. Las páginas se agrupan en cuatro ámbitos:

• Website público: inicio, landings, cursos, precios, contacto, FAQ, blog…
• Login y registro: tus páginas de acceso, registro y contraseña con tu marca.
• Pago y acceso: la página de acceso.
• Zona estudiantes: páginas dentro del área del alumno, más Configurar menú.

Cada página muestra su estado (Publicada o Borrador), su URL y cuántas versiones tiene.

2. Crea una página desde una plantilla

1. Pulsa Nueva página

   Elige el Ámbito (p. ej. Website público), la Clave de página (p. ej. landing), un Título (Intensivo de septiembre) y, en páginas web, un Slug (intensivo-septiembre).

2. Elige una plantilla inicial

   En Plantilla inicial (opcional) elige Usar una plantilla. Hay 30 plantillas de página que puedes filtrar por tipo y objetivo (captar, vender, evento), como SAT/ACT Test Prep, K-12 Tutoring Center, oposiciones, idiomas o Evento / webinar. O elige Empezar en blanco.

   

3. Decide los estilos globales

   Al aplicar una plantilla, el Studio pregunta si quieres aplicar también su estilo (colores, fuentes, bordes) a todas tus páginas como Estilos globales. Di que sí en tu primera página para tener una web coherente.

3. Edita los bloques

El panel izquierdo tiene tres pestañas:

• Componentes: busca o recorre nueve categorías: Básicos, Academia y cursos, Layout, Marketing, Navegación, Contenido, Formularios, Avanzados y Área de alumno. Cada bloque tiene varias variantes con miniatura. Pulsa para añadirlo.
• Estructura: el árbol de tu página, más la Guía de construcción que comprueba que tienes cabecera, hero, contenido principal, pie y SEO.
• Secciones: secciones completas listas (p. ej. cabecera con menú, tabla de precios, testimonios).

1. Añade un bloque

   Ejemplo: de Academia y cursos, añade una rejilla de cursos bajo el hero; de Marketing, un bloque de testimonios con tres opiniones de familias.

2. Selecciónalo y edítalo

   Pulsa cualquier bloque del lienzo para editar textos, imágenes (de la Biblioteca de medios), enlaces, colores y espaciado en el panel derecho. El espaciado y la visibilidad se pueden fijar por dispositivo.

3. Añade movimiento (opcional)

   Elige un preset de animación de página (Minimal, Dinámico, Impactante, Elegante), una animación de entrada por elemento o un efecto de componente en Efecto (estilo FlyonUI): escalonado, elevación al pasar el ratón, inclinación 3D, borde con brillo, contador animado, marquee, texto rotatorio 3D, parallax suave, degradado animado, destello que cruza o revelado de imagen. Los botones tienen efectos al pasar, al pulsar y de «atención continua».

4. Guarda lo que reutilizas

   Componentes reutilizables te deja guardar un bloque (como tu pie) y reutilizarlo en todas las páginas; lo actualizas una vez y comparas versiones.

4. Completa el SEO de la página

Abre SEO de la página desde la estructura y rellena: Título de página, URL / slug, Título SEO (opcional) (hasta 190 caracteres, p. ej. Clases de refuerzo en Madrid | Academia Aula Norte), Meta description (hasta 300 caracteres, con contador) y una imagen destacada Open Graph para redes sociales. Pulsa Guardar SEO. Más en SEO y Google Search Console.

5. Publica

1. Previsualiza

   Pulsa Vista previa para ver la página tal como la verán los visitantes.

2. Pulsa Publicar

   Publicar congela una versión nueva con el diseño actual, que es la que ven los visitantes. Tu borrador sigue editable, así que puedes seguir trabajando sin tocar la página publicada. Las páginas web solo son accesibles en su URL una vez publicadas.

3. Hazla tu página de inicio

   De vuelta en el Studio, usa Establecer como inicio en la página. La portada anterior se conserva con el nombre home_backup.

¿Algo salió mal? Versiones abre el Historial de versiones, donde puedes comparar y Restaurar versión.

Biblioteca Uiverse: cientos de elementos listos para usar

Además de los bloques del Studio, la pestaña Componentes tiene la tarjeta Biblioteca Uiverse, con más de 300 elementos de código abierto de Uiverse.io: botones, tarjetas, loaders, campos de texto, interruptores, casillas y opciones, formularios, tooltips, notificaciones y patrones de fondo.

1. Busca un elemento

   Pulsa Biblioteca Uiverse, elige una categoría (por ejemplo Botones) o escribe en Buscar en Uiverse (texto, autor o estilo). Con Cargar más aparecen más elementos.

2. Añádelo

   Pulsa la miniatura para añadirlo a la columna seleccionada o arrástrala a la página.

3. Personalízalo

   En Propiedades solo ves lo que admite ese elemento: sus textos (por ejemplo Texto del botón), el Enlace del botón (una página como /cursos o una URL completa), el placeholder de un campo, Usar el color de la academia o un Color principal y la alineación. Los patrones de fondo tienen además altura y un título opcional. Cambiar por otro elemento lo sustituye conservando el enlace y los colores.

Los elementos se usan con licencia MIT. Los créditos y el texto de la licencia están en Licencia y créditos, al pie del panel de la biblioteca; cada elemento muestra su autor al seleccionarlo.

Formularios y leads

Los bloques Formulario de contacto y Suscripción newsletter guardan cada envío en Comunicación → Leads y email marketing y te avisan por email. Están protegidos contra bots de spam.

Crea tu web con Kody (IA)

Kody es el asistente con IA del Website Builder (planes Profesional e Institucional). Pulsa Crear mi web con Kody en el Website Studio y responde unas pocas preguntas: tipo de academia (preparación de SAT/ACT, tutorías, enfermería, high school online, idiomas, oposiciones…), nombre, a quién te diriges, qué te hace diferente, tus cursos principales, el tono, si usar el color de tu marca, el idioma de la web (inglés, español o ambos), el objetivo principal (que se registren, que pidan información o que compren un plan) y qué secciones quieres (testimonios, precios, preguntas frecuentes, equipo). Con Sorpréndeme, Kody elige el estilo y la composición.

1. Kody prepara una propuesta

   Verás su progreso paso a paso (pensando, estructurando secciones, redactando textos, diseño de login y registro, maquetando). Solo usa bloques, estilos y diseños de acceso reales del Studio, así que todo queda editable.

2. Revísala

   Mira la página de inicio, el login y el registro en escritorio y en móvil (y en cada idioma). Puedes Regenerar una sección, Probar otro estilo (gratis, sin IA) o Descartar.

3. Usa el borrador

   Usar este borrador o Abrir en el editor crea la página en borrador: Kody nunca publica. Si ya tienes portada, se crea como página nueva y la actual no se toca; el diseño de login y registro va a sus borradores. Después publicas desde el Studio como siempre.

Cupo mensual por academia: Profesional 5 webs e Institucional 10. El contador de la página de Kody (Webs este mes: 1 / 5) muestra lo gastado y se renueva el día 1 de cada mes. Puedes tener hasta 20 webs de Kody guardadas: descarta alguna para crear otra. Solo cuentan las webs terminadas; regenerar una sección y probar otro estilo no gastan cupo. Si bajas de plan, las webs que ya generaste se conservan.

Preguntas frecuentes

¿Puedo hacer la página en inglés y en español?

Sí. La barra superior tiene un selector de Idioma de la página (EN/ES) para editar la versión en inglés y en español de la misma página.

¿Qué tamaño pueden tener mis imágenes?

Los archivos de la Biblioteca de medios pueden pesar hasta 4 MB cada uno (imágenes, vídeos, SVG o fuentes). Organízalos en carpetas y etiquetas.

¿Puedo usar mi propio dominio para la web?

Sí, en los planes Professional e Institutional: ver Conecta tu propio dominio.