JoomlaDay ES 2026 Málaga

Landing Pages "al toque"

IA y Child Templates en Cassiopeia: de la idea a una página lista para publicar.

Objetivo: salir con una receta práctica para crear landings rápidas sin tocar la plantilla base.

Ver la receta completa

Qué vamos a ver

  1. Qué es una landing page
  2. Elementos clave
  3. Usos habituales
  4. Extensiones Builder
  5. IA vs Builder: pros y contras
  6. Child Templates
  7. IA + Prompts
  8. Demo en Joomla

Sergio Iglesias

Back end & Front end

Contexto de la charla: crear landing pages rápidas con IA y Child Templates de Cassiopeia, manteniendo el control del diseño sin tocar la plantilla base.

Desarrollo web Joomla
Formador Joomla
sergioiglesias.net

01 · Landing page

Una página con una intención única

Convertir una visita en una acción concreta.

Una página

Enfocada

Sin navegación ni distracciones innecesarias.

Un objetivo

Medible

Contacto, registro, descarga, compra o reserva.

Una acción

Visible

CTA claro y repetido en el momento correcto.

Menos "sitio web completo"; más "camino corto hacia una decisión".

02 · Elementos clave

La estructura cambia; la lógica se repite

La landing responde rápido: qué es, para quién es, por qué ahora y qué hago después.

Arranque

Titular + propuesta de valor

Hero, subtítulo y CTA principal.

Confianza

Pruebas + reducción de riesgo

Beneficios, testimonios, garantías y FAQ.

03 · Usos habituales

Cuando necesitamos foco, velocidad y medición

Campañas

Ads, email, redes.

Eventos

Inscripciones, agendas.

Lead magnets

Guías, webinars, demos.

También sirven para validar ideas, probar mensajes y lanzar promociones sin rehacer todo el sitio.

Una landing es un laboratorio pequeño: cambia rápido, mide rápido, aprende rápido.

04 · Extensiones Builder

La otra vía: maquetar con un Page Builder

Si prefieres arrastrar y soltar, Joomla tiene varias extensiones de tipo Builder para montar landings sin escribir código.

Un builder da velocidad visual, pero añade una dependencia: el diseño y el contenido quedan ligados a la extensión.

En esta charla vamos por la otra vía: HTML propio generado con IA y un Child Template de Cassiopeia.

Modelos de licencia orientativos: versiones, funciones y precios pueden cambiar. Consulta siempre la web oficial.

05 · IA vs Builder

Pros y contras de cada camino

Las dos vías sirven para crear landings en Joomla. La diferencia está en quién controla el código y quién va a mantener la página.

Landing con IA + Child Template

HTML propio generado con IA y revisado

A favor

  • Código propio, limpio y semántico: controlas cada línea.
  • Sin dependencias de terceros: la landing no depende de ninguna extensión.
  • Páginas ligeras: solo el HTML y el CSS que necesitas.
  • Sin coste de licencias ni renovaciones.
  • Accesibilidad y SEO bajo tu control directo.
  • Reutilizable: guardas el prompt y la estructura para la siguiente.

En contra

  • Hace falta saber HTML y CSS para revisar lo que genera la IA.
  • La IA puede inventar o equivocarse: siempre hay que revisar antes de publicar.
  • El cliente no puede editar el diseño de forma visual.
  • Cada cambio de diseño pasa por editar archivos (index.php, user.css).
  • Formularios, sliders o funciones dinámicas requieren trabajo extra.

Landing con extensión Builder

Maquetación visual con un Page Builder

A favor

  • Edición visual de arrastrar y soltar, sin escribir código.
  • El cliente puede actualizar sus contenidos sin ayuda.
  • Bloques y plantillas listos para arrancar muy rápido.
  • Funciones incluidas: formularios, popups, sliders, animaciones.
  • Vista previa responsive dentro del propio editor.

En contra

  • Dependencia de la extensión: si la quitas, pierdes el diseño.
  • Código más pesado: más CSS, JavaScript y marcado anidado.
  • Licencias y renovaciones en las versiones Pro.
  • Más superficie que mantener: actualizaciones y parches de seguridad.
  • La accesibilidad y la semántica dependen de cómo esté hecho el builder.
  • Migrar a otro builder o de versión de Joomla puede salir caro.

¿Cuándo elegir cada una?

IA + Child Template

Landings de campaña o puntuales, cuando priman el rendimiento, el control del código y no depender de extensiones, y hay alguien con perfil técnico para revisarlas.

Extensión Builder

Cuando el cliente necesita editar a menudo sin ayuda, hay muchas páginas parecidas que producir o el equipo no tiene perfil técnico.

No hay una opción mejor para todo: elige según quién va a mantener la landing.

06 · Flujo "al toque"

IA para acelerar. Joomla para mantener el control.

La velocidad no sustituye el criterio: acelera borradores, no decisiones.

Brief

Público, objetivo, oferta y tono.

Sin brief, la IA inventa.

Producción

Prompt → HTML semántico → CSS en user.css.

Revisar siempre antes de publicar.

07 · IA para crear HTML

Qué pedir para obtener una landing usable

ChatGPT, Claude, Gemini, Copilot u otros modelos capaces de generar HTML/CSS.
El modelo importa menos que el brief y la revisión.
Ver propuestas

  • HTML semántico y accesible.
  • CSS separado y compatible con Cassiopeia.
  • Copy orientado a conversión.
  • Variantes de titular y CTA.
  • Checklist de SEO y accesibilidad.
  • Código sin frameworks si no hacen falta.

Salida pensada para Joomla: pegar, ajustar, probar y medir.

08 · Prompts optimizados

Contexto + objetivo + restricciones + formato de salida

Actúa como copywriter y front-end Joomla.
Crea una landing en HTML semántico para [oferta],
dirigida a [público], con tono [tono].

Usa clases propias, sin JavaScript externo
y con CSS separado para user.css.

Ejemplo real: la landing de inscripción del JoomlaDay ES 2026.

  • Objetivo de conversión y CTA.
  • Público, dolor y propuesta de valor.
  • Secciones obligatorias y orden.
  • Restricciones técnicas de Joomla/Cassiopeia.
  • Entrega: HTML, CSS, variantes y checklist.
  • Iteración: "reduce", "hazlo más directo", "mejora accesibilidad".

No pedir "haz una landing bonita": pedir decisiones concretas y código mantenible.

09 · Del prompt al HTML

Copiar no es publicar

La IA entrega un borrador. Nosotros validamos estructura, textos, accesibilidad, responsive y encaje con Cassiopeia.

  • Un único H1 y jerarquía H2/H3.
  • CTA con enlaces reales o anclas claras.
  • Imágenes con alt y dimensiones razonables.
  • CSS aislado: prefijo de clases propio.
  • Sin dependencias externas innecesarias.
  • Probar móvil, contraste y formularios.

Regla práctica

Si no entiendes el HTML, no lo publiques todavía.

10 · Child Template

Heredar + adaptar

Una subplantilla hereda Cassiopeia y permite personalizar sin modificar la plantilla base. Conservamos actualizaciones de Cassiopeia y añadimos cambios propios: overrides, archivos, estilos y comportamiento específico.

  • No tocar la plantilla base.
  • Mantener personalizaciones separadas.
  • Crear estilos para una campaña concreta.
  • Probar diseños sin comprometer el sitio.
  • Facilitar mantenimiento y reversión.
  • Ideal para landings puntuales.

Child template = seguridad para experimentar con diseño sin romper el sitio.

11 · Cassiopeia + Child Template

Base + hija

La subplantilla hereda la estructura y permite personalizar index.php y user.css.

La plantilla hija recibe lo común de Cassiopeia y concentra los cambios de la landing: layout, estilos y ajustes únicos.

Esquema de la estructura de un Child Template de Cassiopeia
Paso a paso

Crear una plantilla hija en Joomla con Cassiopeia

  1. Acceder al panel de administración.

  2. Ir a Sistema > Plantillas del sitio.

  3. Entrar en "Detalles y archivos de la plantilla Cassiopeia" (la principal).

  4. Hacer clic en el botón de "Crear plantilla secundaria".

  5. Rellenar el formulario que aparece en el modal.

Con estos 5 pasos ya tendríamos creada la plantilla hija para poder utilizarla.

12 · Demo en Joomla

Del HTML generado con IA a una landing funcional

Lo veremos en directo en el ordenador.

  1. Crear o seleccionar la subplantilla hija.

  2. Añadir o editar index.php.

  3. Pegar HTML revisado.

  4. Mover estilos a user.css.

  5. Asignar item de menú a la landing.

  6. Probar y ajustar en móvil.

La demo será el puente entre concepto y práctica.

13 · Buenas prácticas

Rápido no significa improvisado

Una landing debe poder mantenerse, medirse y mejorar. Una landing rápida solo vale si luego podemos aprender de ella.

Antes de publicar

  • H1, CTA y enlaces revisados.
  • Responsive y contraste comprobados.
  • Formulario probado de extremo a extremo.
  • Analítica preparada para medir el CTA.

14 · Receta final

Un método simple para repetir en cualquier campaña

  1. Define objetivo, público, oferta y CTA.
  2. Genera estructura y copy con IA.
  3. Pide HTML semántico + CSS separado.
  4. Revisa accesibilidad, responsive y enlaces.
  5. Integra en Joomla con Child Template.
  6. Publica, mide e itera.

Guarda el prompt y reutiliza la base.

IA para acelerar; Cassiopeia child para mantener el control. No buscamos "páginas perfectas"; buscamos landings útiles, medibles y fáciles de modificar.

15 · Conclusiones

Velocidad sin perder claridad, control ni mantenimiento

  • Una landing funciona cuando tiene un objetivo y un CTA claros.
  • La IA acelera copy, estructura y una primera versión de HTML.
  • Un prompt concreto reduce retrabajo y código innecesario.
  • Accesibilidad, responsive y enlaces siguen necesitando revisión.
  • El Child Template separa la personalización de Cassiopeia.
  • Publica, mide el CTA y mejora con datos reales.
  • Guarda prompts y estructura: la siguiente landing será más rápida.

La fórmula

Brief claro → IA → revisión → Child Template → publicar y medir

IA para ir rápido. Child Templates para no perder el control.