Con ayuda de la IA, puedes crear tus propias landing pages y diseños de email sin tener que escribir tú mismo el código HTML.
La IA puede encargarse de gran parte del diseño y, después, generar el código HTML correspondiente.
HTML significa “HyperText Markup Language” o “Lenguaje de Marcado de Hipertexto”. Es un lenguaje de marcado que se utiliza para estructurar contenidos en páginas web y emails. Dicho de forma sencilla, HTML describe qué debe mostrarse y dónde; por ejemplo, un título, una imagen, un botón o un formulario.
No necesitas escribir ni entender HTML para seguir esta guía. Lo importante es que sepas dónde insertar el código terminado y qué información debes proporcionar a la IA.
El proceso suele ser siempre similar:
- Describe a la IA lo que quieres crear.
- Pídele primero que cree un mockup visual.
- Ajusta el diseño junto con la IA.
- Cuando estés satisfecho con el resultado, pídele que genere el código HTML correspondiente.
- Después, inserta el código en Quentn.
Puedes ir directamente a las siguientes secciones:
- 1. Describe a la IA el diseño que deseas
- 2. Pide primero un mockup
- 3. Pide que genere el código HTML
- 4. Utilizar tus propias imágenes
- 5. Integrar formularios de Quentn
- 6. Probar el resultado
1. Describe a la IA el diseño que deseas
Cuanto más exactamente describas lo que quieres, mejor será el resultado.
Este tipo de instrucción para una IA se denomina habitualmente prompt. Un prompt no es más que la instrucción o descripción que escribes en el campo de entrada de la IA.
Por eso, intenta explicarle de la forma más concreta posible:
- ¿Qué quieres crear: una landing page o un email?
- ¿A qué público objetivo quieres dirigirte?
- ¿Qué tono quieres utilizar?
- ¿Qué colores deben utilizarse?
- ¿Qué estilo general debe tener?
- ¿Qué elementos debe incluir la página o el email?
- ¿Ya tienes textos, títulos o llamadas a la acción?
- ¿Hay imágenes que deban utilizarse?
No necesitas conocer todos los detalles desde el principio. Una idea general es suficiente para crear el primer borrador.
Ejemplo de prompt
Crea un mockup para una landing page moderna.
El público objetivo son empresarios y trabajadores autónomos. El diseño debe transmitir una imagen moderna, premium y ordenada. Utiliza principalmente azul oscuro, blanco y colores de acento discretos.
La landing page debe incluir una sección hero con título, subtítulo y llamada a la acción, una sección de beneficios con tres ventajas y una llamada a la acción final.
El tono debe ser directo, profesional y, al mismo tiempo, cercano.
Cuanta más información proporciones a la IA, menos tendrás que corregir después.
2. Pide primero un mockup
Antes de pedirle a la IA que escriba el código HTML, es recomendable que primero cree un mockup.
Un mockup es una vista previa visual.
Te muestra aproximadamente cómo podría verse la landing page o el email terminado antes de crear el código técnico.
Puedes imaginar un mockup como un borrador del diseño.
Por ejemplo, te permite comprobar:
- ¿Dónde está colocado el título?
- ¿Dónde aparecerá la imagen?
- ¿Cómo son los botones?
- ¿Qué colores se utilizan?
- ¿Cuánto espacio hay entre las distintas secciones?
- ¿Encaja el estilo general con tu oferta?
La gran ventaja es que en esta fase resulta especialmente fácil realizar cambios.
Si algo no te gusta, solo tienes que decirle a la IA qué quieres modificar.
Por ejemplo, si la disposición de los elementos todavía no te convence, puedes darle una instrucción de cambio directamente:
Me gusta la sección hero. Haz que la segunda sección tenga un aspecto más moderno y muestra las tres ventajas en tarjetas colocadas una al lado de la otra.
O:
Utiliza menos colores y haz que la página tenga un diseño general más minimalista.
Sigue trabajando en el mockup hasta que la estructura, los colores y el estilo se ajusten a lo que tienes en mente.
3. Pide que genere el código HTML
Cuando estés satisfecho con el mockup, puedes pedirle a la IA que genere el código HTML a partir de él.
Hay una instrucción especialmente importante.
Dile a la IA:
Crea el código HTML de manera que pueda insertarlo como un bloque HTML dentro del área Body de un editor HTML. El diseño también debe visualizarse correctamente en dispositivos móviles, por lo que debe ser responsive.
De esta forma, evitarás que la IA genere, por ejemplo, un archivo HTML completo con sus propias etiquetas <html>, <head> y <body>, aunque solo necesites el contenido para una sección HTML ya existente.
Un prompt completo podría ser así:
Crea ahora el código HTML para el mockup mostrado.
Crea el código HTML de manera que pueda insertarlo como un bloque HTML dentro del área Body de un editor HTML.
Asegúrate de que el diseño también se visualice correctamente en dispositivos móviles.
Después puedes copiar el código generado e insertarlo en el bloque HTML correspondiente de tu plantilla.
Para ello, entra en tu campaña y arrastra el elemento “Landingpage” al área de trabajo.
Abre el elemento haciendo doble clic y elimina de la plantilla todo lo que no necesites.
Después, en la parte derecha, dentro de la pestaña “Contenido”, busca el bloque “HTML” y arrástralo a la landing page.
Haz clic en el bloque.
Ahora puedes eliminar el HTML de ejemplo que aparece en la parte derecha e insertar el código HTML generado por la IA.
4. Utilizar tus propias imágenes
Si quieres integrar una imagen propia en el diseño generado por la IA, esta necesitará la ruta directa del archivo de la imagen.
Puedes obtenerla directamente desde tu plantilla.
Haz lo siguiente:
- Abre tu plantilla.
- Añade el bloque de contenido “Imagen”.
- Sube la imagen que quieres utilizar.
- Después de subirla, se mostrará la ruta del archivo de la imagen.
- Copia esa ruta.
- Añádela a tu prompt para la IA.
Por ejemplo:
Utiliza esta imagen en la sección hero:
[INSERTAR AQUÍ LA RUTA DE LA IMAGEN]Coloca la imagen a la derecha del texto y asegúrate de que en dispositivos móviles aparezca debajo del texto.
Una vez que hayas copiado la ruta del archivo, puedes eliminar de nuevo el bloque de imagen que habías añadido anteriormente.
Ahora la IA puede integrar directamente la ruta de la imagen en el código HTML.
5. Integrar formularios de Quentn
También puedes integrar formularios existentes de Quentn en una landing page generada con IA.
Aquí hay algo importante: no pidas a la IA que programe simplemente un formulario cualquiera por su cuenta.
Para que los campos del formulario y la transmisión de los datos funcionen correctamente con Quentn, primero debes crear un formulario real en Quentn.
Cómo hacerlo
- Crea un formulario nuevo en Quentn.
- Añade todos los campos que quieras solicitar más adelante, por ejemplo:
- Nombre
- Apellidos
- Dirección de email
- Número de teléfono
- Después, genera el código Raw HTML del formulario.
- Copia ese código.
- Proporciona a la IA el código Raw HTML completo.
¿Qué es Raw HTML?
Raw HTML significa, de forma simplificada, “código HTML sin procesar”.
Obtienes el código técnico del formulario sin tener que escribirlo tú mismo.
Este código contiene información importante sobre:
- qué campos existen en el formulario,
- cómo se llaman esos campos,
- adónde se envían los datos introducidos,
- y cómo está conectado técnicamente el formulario con Quentn.
Esta información debe mantenerse.
Ejemplo de prompt
Después puedes escribirle a la IA algo como:
Aquí está el código Raw HTML de mi formulario de Quentn:
[INSERTAR AQUÍ EL CÓDIGO RAW HTML]Integra este formulario en el diseño actual de la landing page. Puedes modificar el diseño visual del formulario, pero los campos existentes, los nombres de los campos y las funciones técnicas deben mantenerse sin cambios.
Esto tiene una ventaja decisiva:
La IA se encarga del diseño y Quentn sigue encargándose del funcionamiento.
La IA puede modificar, por ejemplo, los espacios, colores, tamaños de fuente, bordes y botones. Sin embargo, los campos y las conexiones técnicamente necesarias del formulario de Quentn se mantienen.
6. Probar el resultado
Después de insertar el código HTML, siempre debes comprobar de nuevo el resultado.
Presta especial atención a:
- Visualización en computadoras de escritorio
- Visualización en smartphones
- Espaciados y tamaños de fuente
- Imágenes y rutas de imágenes
- Botones y enlaces
- Campos del formulario
- Envío de formularios
- Visualización en la vista previa
Si algo todavía no encaja, no necesariamente tienes que modificar el código tú mismo.
Simplemente copia de nuevo el código existente en la IA y describe con la mayor precisión posible qué debe cambiarse.
Por ejemplo:
En smartphones, el espacio entre el título y el botón es demasiado grande. Ajusta el código en consecuencia. No modifiques ninguna otra parte del diseño existente.
Todo el proceso explicado de forma sencilla
1. Describe tu idea: Explica a la IA qué quieres crear y cómo debe verse.
2. Crea un mockup: Pide primero que te muestre un borrador visual.
3. Mejora el diseño: Indica a la IA qué te gusta y qué quieres modificar.
4. Genera el código HTML: Cuando estés satisfecho con el diseño, pídele que lo convierta en código HTML.
Utiliza siempre esta instrucción:
Crea el código HTML de manera que pueda insertarlo como un bloque HTML dentro del área Body de un editor HTML.
5. Prepara las imágenes: Si quieres utilizar tus propias imágenes, súbelas primero mediante el bloque de imagen y copia la ruta del archivo que se muestra.
6. Prepara los formularios: Si quieres integrar un formulario de Quentn, créalo primero en Quentn y después copia el código Raw HTML.
7. Inserta el código: Copia el código HTML generado por la IA en el bloque HTML correspondiente.
8. Haz pruebas: Comprueba el diseño, las imágenes, los botones, los enlaces y los formularios.