HTML-Prompts für KI
Lassen Sie die KI HTML schreiben, das sauber konvertiert
Ist Ihr HTML KI-generiert, fügen Sie zuerst einen dieser Prompts ein. Das Ergebnis lässt sich sauberer in Elementor-Überschriften, -Text, -Bilder, -Buttons und -Container umwandeln.
Allgemeiner Prompt
Für normale Seiten, Detailseiten und Einleitungen. Kopieren Sie den ganzen Block und ergänzen Sie dann Ihre Angaben.
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 für Produktseite
Für Produkt- und Detailseiten, mit Betonung der Produktstruktur.
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 für Landingpage
Für Kampagnen- und Einzelprodukt-Seiten, mit Betonung der Conversion-Struktur.
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)Bilder-zuerst-Prompt
Für den Fall, dass die Bilder zuerst (z. B. per KI) entstehen und das HTML darum herum aufgebaut wird.
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)Noch keine gehosteten URLs? Löschen Sie die URL-Liste, behalten Sie beschreibenden Alt-Text, konvertieren Sie mit der Option „Bilder“ auf „Leere Bildplatzhalter“ – und füllen Sie dann jeden Platz in Elementor.
Umgang mit KI-generierten Bildern
KI kann keine echten Bilddateien in HTML-Text einbetten – wie Bilder referenziert werden, entscheidet daher, ob sie in Elementor ankommen.
- Am besten — echte URLs: Laden Sie Ihre Bilder zuerst in die Mediathek, geben Sie der KI diese URLs, damit das HTML auf absolute https://-Adressen zeigt. Absolute URLs bleiben erhalten, Bilder kommen ohne manuellen Schritt in Elementor an.
- Am einfachsten — Platzhalter: Lassen Sie das HTML beliebige <img> mit beschreibendem Alt verwenden und konvertieren Sie mit „Bilder: Leere Bildplatzhalter“. Jeder Platz behält den Alt als Bildunterschrift, sodass Sie wissen, welches Bild wohin gehört.
- Vermeiden: Base64-eingebettete Bilder und relative oder lokale Dateipfade – der Konverter macht daraus standardmäßig leere Platzhalter.
Warum diese Regeln
Sie erleichtern die Umwandlung von KI-Ausgaben in bearbeitbare Elementor-Komponenten.
| Regel | Vorteil |
|---|---|
| Inline-Styles, kein externes CSS | Das Tool liest echte Styles, sodass Abstände und Farben nach dem Import passen. |
| Klare Abschnitte, semantische Tags | Leichter in einzelne Komponenten für Überschrift/Text/Bild/Button/Container aufzuteilen. |
| Font-Awesome-Icons, kein Inline-SVG oder Emoji | Sie werden als bearbeitbare Icons der Elementor-Icon-Bibliothek importiert; ein eigenes Inline-SVG kann nur als HTML-Block bleiben. Hinweis: Font-Awesome-Icons werden in Elementor angezeigt, auch wenn die Tool-Vorschau sie nicht zeigt. |
| Klare Hinweise zum Bildaustausch | Auch ohne echte Bilder werden Bildplätze importiert und können später ersetzt werden. |
| Keine komplexen Skripte | Sichererer Import und weniger Elementor-Fehler. |
| Inhalt in klare Blöcke aufgeteilt | Bessere Struktur nach dem Import, leichter zu verschieben, löschen und bearbeiten. |
Vermeiden Sie, die KI darum zu bitten
Nicht unmöglich umzuwandeln, aber eher mit manuellen Korrekturen nach dem Import verbunden.
- Skriptgesteuerte Karussells, Popups oder Umschalter.
- Wichtiger Text in Bilder eingebrannt – halten Sie Text auf der Seite.
- Als Symbole verwendete Emoji.
- Seltsam tiefe Verschachtelung – halten Sie Abschnitte klar.
- Bild-URLs, die auf lokale Datenträgerpfade zeigen.
- Seiten, die von externen Dateien abhängen und beim Einfügen Styles oder Inhalt verlieren.