Prompts HTML para IA
Haz que la IA escriba HTML que se convierta sin problemas
Si tu HTML lo genera una IA, pega primero uno de estos prompts. El resultado se convierte de forma más limpia en encabezados, texto, imágenes, botones y contenedores de Elementor.
Prompt general
Para páginas normales, páginas de detalle e introducciones. Copia todo el bloque y luego añade tu información.
Please generate a complete HTML page that I will import into Elementor, following these rules:
1. Output only a single complete HTML file starting from <!doctype html>, no extra explanation.
2. Put all styles inside one <style> tag in <head>, or as inline style. Do not link external CSS files.
3. Split the page into clear sections (hero, benefits, content, call to action), each wrapped in <section> or <div>.
4. Use <h1>–<h3> for headings, <p> for body text, and <a> or <button> for buttons.
5. Use <img> with clear, descriptive alt text. Do not embed images as Base64 data URLs — use a real hosted URL, or a simple placeholder src to fill in later.
6. Prefer flex or grid for layout; do not rely on absolute positioning.
7. For icons use Font Awesome classes, e.g. <i class="fas fa-shield-alt"></i> — not inline SVG and not emoji. They import as editable Elementor icon-library icons.
8. Do not include JavaScript, form submissions, carousels or popups.
9. Keep the DOM shallow: one wrapper <section> or <div> per block, no redundant nested divs.
Here is the page information:
(add your product/page topic, key selling points, and copy notes here)Prompt de página de producto
Para páginas de producto y detalle, enfatizando la estructura del producto.
Generate a complete product detail HTML page to import into Elementor. Same rules as above (single file, inline styles, clear sections, no scripts), and include these sections:
1. Hero: product name <h1>, one-line selling point <p>, two buttons (Get a Quote / View Details), and a main product image placeholder.
2. Key benefits: 3–6 benefit cards, each with a title, description and a Font Awesome icon (e.g. <i class="fas fa-check"></i>), not inline SVG.
3. Specifications: a <table> listing key parameters.
4. Use cases: 2–3 image-and-text use cases.
5. Call to action: a heading and a button.
Product info:
(add product name, benefits, specs, target customer here)Prompt de página de aterrizaje
Para páginas de campaña y de un solo producto, enfatizando la estructura de conversión.
Generate a complete marketing landing HTML page to import into Elementor. Same rules as above (single file, inline styles, clear sections, no scripts), with this structure:
1. Hero: big heading <h1> + subheading <p> + primary button + a visual placeholder.
2. Advantages: 3–4 advantage cards with Font Awesome icons (<i class="fas fa-..."></i>), not inline SVG.
3. Trust: testimonials or stats (as text, not inside images).
4. FAQ: 3–5 items as headings and paragraphs.
5. Closing CTA: one line + a button.
Campaign info:
(add the campaign topic, audience, selling points and goal here)Prompt de imágenes primero
Para cuando las imágenes se crean primero (p. ej. con IA) y el HTML se construye en torno a ellas.
Build a complete product detail HTML page for me to import into Elementor. I already have the images — use exactly the image URLs I provide below, one <img> per image, each with descriptive alt text. Do not invent extra images and do not use Base64 data URLs.
Rules:
1. Output only a single complete HTML file from <!doctype html>, no explanation.
2. All CSS inline or in one <style> tag; no external CSS.
3. Semantic tags: <h1>–<h3>, <p>, <button> or <a>.
4. Keep the DOM shallow: one wrapper per block, no redundant nested divs.
5. Flex or grid layout, no absolute positioning; Font Awesome classes for icons (<i class="fas fa-..."></i>), no inline SVG, no emoji; no JavaScript.
Sections: hero (product name + one-line pitch + button + hero image); 3–6 benefit cards (icon + title + text); a specs <table>; 2–3 image-and-text use cases; closing call to action.
My images (URL → what it shows):
- https://your-site.com/wp-content/uploads/hero.jpg → main product on white background
- https://your-site.com/wp-content/uploads/use-1.jpg → product in use, outdoors
- (add the rest)
Product info:
(add product name, selling points, specs, target customer here)¿Aún no tienes URL alojadas? Elimina la lista de URL, conserva un alt descriptivo y convierte con la opción «Imágenes» en «Marcadores de imagen vacíos»; luego rellena cada hueco en Elementor.
Gestión de tus imágenes generadas por IA
La IA no puede incrustar archivos de imagen reales en el texto HTML, así que cómo se referencian las imágenes decide si llegan a Elementor.
- Lo mejor — URL reales: sube primero tus imágenes a la biblioteca de medios y dale esas URL a la IA para que el HTML apunte a direcciones https:// absolutas. Las URL absolutas se conservan, así que las imágenes llegan a Elementor sin pasos manuales.
- Lo más simple — marcadores: deja que el HTML use cualquier <img> con alt descriptivo y convierte con «Imágenes: Marcadores de imagen vacíos». Cada hueco conserva el alt como leyenda, así sabes qué imagen colocar en Elementor.
- Evita: imágenes incrustadas en Base64 y rutas de archivo relativas o locales; el convertidor las convierte en marcadores vacíos por defecto.
Por qué estas reglas
Facilitan que la salida de la IA se convierta en componentes de Elementor editables.
| Regla | Ventaja |
|---|---|
| Estilos en línea, sin CSS externo | La herramienta lee los estilos reales, de modo que el espaciado y los colores coinciden tras importar. |
| Secciones claras, etiquetas semánticas | Más fácil de dividir en componentes separados de encabezado/texto/imagen/botón/contenedor. |
| Iconos de Font Awesome, no SVG en línea ni emoji | Se importan como iconos editables de la biblioteca de iconos de Elementor; un SVG en línea personalizado solo puede quedar como bloque HTML. Nota: los iconos de Font Awesome se muestran en Elementor aunque la vista previa de la herramienta no los muestre. |
| Notas claras de reemplazo de imágenes | Incluso sin imágenes reales, los espacios de imagen se importan y pueden reemplazarse después. |
| Sin scripts complejos | Importación más segura y menos errores de Elementor. |
| Contenido dividido en bloques claros | Mejor estructura tras importar, más fácil de mover, eliminar y editar. |
Intenta no pedir esto a la IA
No es imposible de convertir, pero es más probable que necesite arreglos manuales tras importar.
- Carruseles, ventanas emergentes o alternadores impulsados por scripts.
- Texto importante incrustado en imágenes: mantén el texto en la página.
- Emoji usados como iconos.
- Anidamiento profundo extraño: mantén las secciones claras.
- URL de imágenes que apuntan a rutas de disco local.
- Páginas que dependen de archivos externos, que pierden estilos o contenido al pegarse.