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.
Qué vamos a ver
- Qué es una landing page
- Elementos clave
- Usos habituales
- Child Templates
- IA + Prompts
- 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.
01 · Landing Page
Una página con una intención única
Convertir una visita en una acción concreta.
Enfocada
Sin navegación ni distracciones innecesarias.
Medible
Contacto, registro, descarga, compra o reserva.
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
Titular + propuesta de valor
Hero, subtítulo y CTA principal.
Pruebas + reducción de riesgo
Beneficios, testimonios, garantías y FAQ.
La landing responde rápido: qué es, para quién es, por qué ahora y qué hago después.
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 · Flujo “al toque”
IA para acelerar. Joomla para mantener el control.
Paso 1: Brief
Público, objetivo, oferta y tono.
Sin brief, la IA inventa.
Paso 2: Producción
Prompt → HTML semántico → CSS en user.css.
Revisar siempre antes de publicar.
La velocidad no sustituye el criterio: acelera borradores, no decisiones.
05 · 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.
- 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.
06 · 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.
07 · 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.
Si no entiendes el HTML, no lo publiques todavía.
08 · 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.
09 · 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.
10 · Demo en Joomla
Del HTML generado con IA a una landing funcional
Lo veremos en directo en el ordenador.
Paso 1
Crear o seleccionar la subplantilla hija.
Paso 2
Añadir o editar
index.php.Paso 3
Pegar HTML revisado.
Paso 4
Mover estilos a
user.css.Paso 5
Asignar item de menú a la landing.
Paso 6
Probar y ajustar en móvil.
La demo será el puente entre concepto y práctica.
11 · 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.
12 · Receta final
Un método simple para repetir en cualquier campaña
- Paso 1: Define objetivo, público, oferta y CTA.
- Paso 2: Genera estructura y copy con IA.
- Paso 3: Pide HTML semántico + CSS separado.
- Paso 4: Revisa accesibilidad, responsive y enlaces.
- Paso 5: Integra en Joomla con Child Template.
- Paso 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.
13 · 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.