Prompts HTML pour IA
Faites écrire à l’IA un HTML qui se convertit proprement
Si votre HTML est généré par IA, collez d’abord l’un de ces prompts. Le résultat se convertit plus proprement en titres, textes, images, boutons et conteneurs Elementor.
Prompt général
Pour les pages ordinaires, les pages de détail et les introductions. Copiez tout le bloc, puis ajoutez vos informations.
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 page produit
Pour les pages produit et détail, mettant l’accent sur la structure du produit.
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 page d’atterrissage
Pour les pages de campagne et mono-produit, mettant l’accent sur la structure de conversion.
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 « images d'abord »
Pour quand les images sont créées d'abord (p. ex. par IA) et le HTML est construit autour.
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)Pas encore d'URL hébergées ? Supprimez la liste d'URL, gardez un alt descriptif, convertissez avec l'option « Images » réglée sur « Emplacements d'image vides », puis remplissez chaque emplacement dans Elementor.
Gérer vos images générées par IA
L'IA ne peut pas intégrer de vrais fichiers image dans le texte HTML ; la façon de référencer les images détermine donc si elles arrivent dans Elementor.
- Idéal — vraies URL : téléversez d'abord vos images dans la médiathèque, puis donnez ces URL à l'IA pour que le HTML pointe vers des adresses https:// absolues. Les URL absolues sont conservées, les images arrivent dans Elementor sans étape manuelle.
- Le plus simple — emplacements : laissez le HTML utiliser n'importe quelle <img> avec un alt descriptif, puis convertissez avec « Images : Emplacements d'image vides ». Chaque emplacement conserve l'alt en légende, vous savez donc quelle image placer où dans Elementor.
- À éviter : images intégrées en Base64 et chemins relatifs ou locaux — le convertisseur les transforme en emplacements vides par défaut.
Pourquoi ces règles
Ils facilitent la conversion de la sortie de l’IA en composants Elementor modifiables.
| Règle | Avantage |
|---|---|
| Styles en ligne, sans CSS externe | L’outil lit les styles réels, si bien que les espacements et couleurs correspondent après l’import. |
| Sections claires, balises sémantiques | Plus facile à découper en composants titre/texte/image/bouton/conteneur distincts. |
| Icônes Font Awesome, pas de SVG inline ni d'emoji | Elles s'importent comme des icônes modifiables de la bibliothèque d'icônes Elementor ; un SVG inline personnalisé ne peut rester qu'en bloc HTML. Remarque : les icônes Font Awesome s'affichent dans Elementor même si l'aperçu de l'outil ne les montre pas. |
| Notes de remplacement d’image claires | Même sans vraies images, les emplacements d’image s’importent et peuvent être remplacés plus tard. |
| Pas de scripts complexes | Import plus sûr et moins d’erreurs Elementor. |
| Contenu découpé en blocs clairs | Meilleure structure après l’import, plus facile à déplacer, supprimer et modifier. |
Évitez de demander cela à l’IA
Pas impossible à convertir, mais plus susceptible de nécessiter des corrections manuelles après l’import.
- Carrousels, popups ou bascules pilotés par script.
- Texte important incrusté dans les images — gardez le texte dans la page.
- Emoji utilisés comme icônes.
- Imbrication profonde étrange — gardez les sections claires.
- URL d’images pointant vers des chemins de disque locaux.
- Pages qui dépendent de fichiers externes, qui perdent styles ou contenu au collage.