Kurz gesagt: Ab dem 02.08.2026 müssen KI-generierte Bilder auf deiner Website als solche gekennzeichnet werden (EU-KI-Verordnung, Art. 50).
Du kannst das Label entweder vor dem Upload direkt am Bild ergänzen, z.B. über Canva. Oder du nutzt die hier vorgestellten Möglichkeiten, das Label direkt über deine Website einzubinden. Einmal eingerichtet, kannst du entweder deinen Blogbeiträgen ein Schlagwort hinzufügen, um das Label automatisch zu ergänzen. Oder dem Bildmodul eine entsprechende Klasse hinzufügen.
Ab 02.08.2026 gilt die Pflicht, KI-Bilder zu kennzeichnen
Ob die Kennzeichnungspflicht für deine Bilder gilt, kann du in der EU Verordnung nachlesen:
Grundsätzlich kannst du davon ausgehen: je realistischer dein KI-Bild ist, desto höher die Wahrscheinlichkeit, dass du es kennzeichnen musst. Besonders wichtig ist dies natürlich bei Bildern mit Personen - das gilt übrigens auch, wenn du diese Person auf dem KI-Bild bist.
Wie lässt sich die Kennzeichnungspflicht für deine Bilder praktisch umsetzen?
In diesem Beitrag geht es darum, ein möglichst einfaches System zu haben, damit die Kennzeichnung kein zusätzlicher Aufwand wird. Vielleicht liefern KI-Tools die Kennzeichnung ja auch bald direkt mit. Gemini versieht generierte Bilder bereits mit einem Wasserzeichen – ob das rechtlich als Kennzeichnung ausreicht, ist allerdings fraglich.
Zwar lässt sich maschinell erkennen, ob ein Bild KI-generiert wurde – für einen menschlichen Betrachter reicht das aber nicht aus.
Deine Website lebt von Bildern. In diesem Beitrag geht es hauptsächlich um die Bilder deines Blogs. Hier haben wir die Blogübersicht und die Einzelbeitragsansicht. Je nach dem, wie du deinen Blog erstellt hast, findest du hier die passende Lösung. Und natürlich gibt es auch eine Lösung für Bilder, die du mit dem Bildmodul einfügst.
Vorbereitung für deine Blogbeiträge
Für deine Blogbilder behelfen wir uns mit einem Schlagwort. Immer, wenn du einem Beitrag das Schlagwort "ki-generiert" hinzufügst, wird dem Bild ein entsprechendes Label hinzugefügt. Für die Blogbeiträge unterscheiden wir dabei, ob du deine Blogübersicht mit dem Loop-Builder erstellt hast oder mit dem Standard-Blogmodul. Ebenso für die Einzelbeiträge, die entweder über den Theme-Builder erstellt sind oder das Standard-Layout verwenden.
Im nächsten Schritt kannst du auswählen, welche Methode du brauchst. Jetzt aber erstmal das Schlagwort einrichten:
- Wähle als Name "Bild KI-generiert" - den Namen kannst du so vergeben, wie er auch beim Bild angezeigt werden soll (für Methode 1, Loop-Builder).
- Als Titelform gibst du "ki-generiert" ein. Während du den Namen frei vergeben kannst, übernimm diese Titelform, denn die zur Verfügung gestellten Codes funktionieren sonst nicht.
Mit "Schlagwort hinzufügen" bestätigen.
Jetzt kannst du den entsprechenden Beiträgen das Schlagwort zuordnen (wie geht das?).
Das KI-Label für normale Bilder wird direkt am Modul hinzugefügt.
Welcher Weg passt zu dir?
- Deine Blogübersicht basiert auf dem Loop-Builder? → Methode 1
- Deine Blogübersicht basiert auf dem Standard-Blogmodul? → Methode 2
- Du hast dein Beitragslayout mit dem Theme-Builder erstellt? → Methode 3
- Du nutzt das Standard-Beitragslayout des Divi-Themes? → Methode 4
- Du fügst ein einzelnes Bild über das Bildmodul ein? → Methode 5
Methode 1: Die KI-Kennzeichnung mit dem Loop-Builder
Voraussetzung: Für diese Methode ist es wichtig, dass du keine weiteren Schlagwörter für deinen Blog verwendest, weil hier automatisch alle Schlagworte angezeigt werden.
Gehe nun zur Blogübersicht und bearbeite den Loop-Builder:
- Füge ein neues Textmodul ein und zwar dort, wo das KI-Label erscheinen soll (z.B. direkt unter dem Bild).
- Statt eines Textes fügst du mit dem kleinen Münzsymbol einen dynamischen Text hinzu.
- Dazu wählst du aus der Liste "Beitrags-Schleifenbegriffe"
- Es öffnet sich ein neues Fenster, hier unter Taxonomie die Schlagworte auswählen.
Sobald du bei Schritt 3 auf anwenden klickst, werden alle verfügbaren Schlagworte geladen - deshalb sollte hier nur das Schlagwort für unseren Zweck vorhanden sein. Hier ist auch die Stelle, wo der "Name" des Schlagwortes erscheint, also "Bild KI-generiert". Diesen Namen kannst du in der Bearbeitung des Schlagwortes anpassen.
Du kannst den Text jetzt ganz normal noch anpassen und ausrichten.
Noch kein Blog-Layout mit dem Loop-Builder erstellt?
- Blog-Layout mit dem Loop-Builder in Divi 5 erstellen
Methode 2: KI-Kennzeichnung im Divi Blogmodul
Für diese Methode benötigen wir einen kleinen Code. Dieser sorgt dafür, dass bei allen Beiträgen, die mit dem Schlagwort versehen sind, ein Label auf dem Bild erscheint. Wenn der Text im Label anders heißen soll, musst du im Code die Stelle "content: "KI-generiert" anpassen.
/* 1. Bild-Behälter für die absolute Positionierung des Labels vorbereiten */
.et_pb_blog_grid article.tag-ki-generiert .et_pb_image_container,
.et_pb_posts article.tag-ki-generiert .et_pb_image_container {
position: relative !important;
}
/* 2. KI-Label auf dem Beitragsbild des Standard-Blogmoduls platzieren */
.et_pb_blog_grid article.tag-ki-generiert .et_pb_image_container::after,
.et_pb_posts article.tag-ki-generiert .et_pb_image_container::after {
content: "KI-generiert";
position: absolute;
top: 5px; /* Abstand zum oberen Bildrand */
left: 10px; /* Abstand zum linken Bildrand */
background-color: rgba(255, 255, 255, 0.7); /* Weißer, halbtransparenter Hintergrund (70% Deckkraft) */
color: #333333; /* Dunkelgraue Schriftfarbe für optimale Lesbarkeit */
padding: 4px 8px; /* Kompakter Innenabstand für ein dezentes Label */
line-height: 1; /* Setzt die Zeilenhöhe zurück, um ungewollte Divi-Abstände zu verhindern */
font-size: 0.7rem; /* Kleine, unaufdringliche Schriftgröße */
font-style: italic; /* Kursive Schriftgestaltung */
font-weight: normal; /* Normale Schriftstärke */
border-radius: 4px; /* Leicht abgerundete Ecken */
z-index: 10; /* Stellt sicher, dass das Label über dem Bild liegt */
pointer-events: none; /* Klicks gehen durch das Label hindurch auf das Bild */
display: block !important;
}Den Code musst du nur einmal hinterlegen und zwar im Theme Customizer unter "zusätzliches CSS" (wie geht das?).
Methode 3: Beitragslayout mit dem Theme-Builder
In dieser einfachen Variante setzen wir die Kategorie unter das Bild:
- füge ein Textmodul hinzu
- klicke über dem Editor auf das kleine Münzsymbol, um einen dynamischen Text auszuwählen.
- Wähle: "Beitrags Tag".
- Im nächsten Schritt wählst du als Kategorietyp Schlagwörter aus.
- Und wichtig: deaktiviere die Verlinkung zu den Tag-Indexseiten.
- Gestalte den Text nach deinen Wünschen
Methode 4: Standard-Beitragslayout des Divi-Themes
Auch hier fügen wir einen Code im Customizer ein. Wenn du das Schlagwort eingerichtet und den entsprechenden Beiträgen zugeordnet hast, wird das KI-Label dann automatisch in der Beitragsansicht angezeigt.
/* ======================================================
EINZELBEITRÄGE (Anzeige unten rechts auf dem Bild)
====================================================== */
.single article.tag-ki-generiert .et_post_meta_wrapper,
.single article.tag-ki-generiert .et_pb_post_title_image_container,
.single article.tag-ki-generiert .entry-featured-image-url {
position: relative !important;
}
.single article.tag-ki-generiert .et_post_meta_wrapper::after,
.single article.tag-ki-generiert .et_pb_post_title_image_container::after,
.single article.tag-ki-generiert .entry-featured-image-url::after {
content: "Bild: KI-generiert" !important;
position: absolute !important;
bottom: 15px !important; /* Sitzt bombenfest unten rechts AUF dem Bild */
right: 12px !important;
top: auto !important;
left: auto !important;
background-color: rgba(255, 255, 255, 0.35) !important;
color: #333333 !important;
padding: 4px 8px !important;
line-height: 1 !important;
font-size: 0.7rem !important;
font-style: italic !important;
font-weight: normal !important;
border-radius: 4px !important;
z-index: 10 !important;
pointer-events: none !important;
display: block !important;
}Methode 5: KI-Kennzeichnung für Bilder, die du über das Bildmodul einfügst
Auch hier benötigen wir einen Code, den du einmalig dem Theme Customizer hinzufügst:
/* 1. KI-Label für NORMALE BILD-MODULE (Unter dem Bild) */
/* ------------------------------------------------ */
.ki-bild::after {
content: "Bild: KI-generiert";
display: block;
text-align: right;
margin-top: -20px;
position: relative; /* Wichtig, damit es nicht vom Bild verdeckt wird */
z-index: 10;
font-size: 0.7rem;
font-style: italic;
font-weight: normal;
color: #666666;
line-height: 1;
}
Wenn du jetzt ein Bild über das Bildmodul einfügst, musst du diesem lediglich noch die Klasse "ki-bild" zuordnen. Dazu gehst du auf den Reiter erweitert und fügst ein Attribut "class" hinzu. Dort trägst du "ki-bild" und das Label wird sofort angezeigt (wie geht das?).
Tipp: Wenn du dir für das Attribut ein Design-Preset erstellst, geht die Zuordnung noch schneller
Tipp: Schlagwort von der Suche ausschließen
Da Schlagworte grundsätzlich von Google indexiert werden und es in diesem Fall ein falsches Signal sein könnte, gibt es zwei Möglichkeiten:
- wenn du Schlagworte ohnehin nicht nutzt, kannst du sie komplett über dein SEO-Tool, z.B. Yoast, von der Indexierung ausschließen
- falls du Schlagworte für deinen Blog verwendest, kannst du in der Liste der Schlagwörter unser hinzugefügtes "ki-generiert" bearbeiten. Du wirst dort die Einstellungsmöglichkeit finden, dieses Wort aus der Indexierung auszuschließen (wie geht das?).
Wie geht das - erklärt
Hier habe ich dir noch Tipps zusammengestellt, wo du welche Einstellungen findest. Wenn Fragen offen geblieben sind, dann schreib gerne in die Kommentare, damit ich das ergänzen kann.
Theme Customizer finden
Du findest den Customizer entweder direkt über das Dashboard:
1. Im WordPress-Backend links auf Design gehen.
2. Dort Customizer anklicken.
3. Im Customizer-Menü den Punkt "zusätzliches CSS" auswählen (ganz unten).
4. Den Code dort einfügen und oben auf Veröffentlichen klicken.
Wenn du im Frontend deiner Seite und eingeloggt bist, siehst du ganz oben die schwarze Bearbeitungsleiste. Dort links kannst du auch den Customizer aufrufen. Einfach mit der Maus auf deinen Seitentitel gehen:
Schlagwort von der Indexierung ausschließen
Gehe in dein WordPress-Dashboard und wähle das Menü "Beiträge ->Schlagwörter". Wenn du in der Liste der Schlagwörter auf "Bearbeiten" gehst, öffnen sich die Details.
Darunter findest du ein Fenster deines SEO Tools. Dort suchst du den Reiter erweitert und stellst unter erweitert "Nein" ein. Hier am Beispiel Yoast:
(Bei Rankmath ebenfalls der Reiter erweitert - dort "Kein Index" auswählen.
Einem Beitrag ein Schlagwort zuordnen
Das kannst entweder direkt machen, wenn du den Beitrag erstellst bzw. auch das Bild im Backend hochlädtst. Dort in der Seitenleiste findest du etwas weiter unten ein Eingabefeld für die Schlagworte:
Wenn du deinen Beitrag schon erstellt hast, kannst du auch in der Beitragsübersicht die Schnellbearbeitung aufrufen und dort das Schlagwort ergänzen:
Ein Attribut hinzufügen
Du kannst jedem Element (Sektion, Zeile, Modul) ein Attribut zuordnen. Die am häufigsten verwendete sind:
class - (damit kannst du einen CSS-Code einem bestimmten Element zuordnen) und
id - diese wird z.B. für Ankerlinks verwendet
Du findest die Attribute immer im Reiter "Erweitert". Dort wählst du "Attribut hinzufügen" und wählst aus der Liste dein gewünschtes Attribut aus.
Im nächsten Fenster trägst du ganz unten noch den Wert ein.
0 Kommentare