Pfeile in Bilder einfügen: Screenshots und Fotos direkt in WordPress markieren

Du schreibst eine Anleitung in WordPress und möchtest auf einem Screenshot genau den Button zeigen, den Leser anklicken sollen. Oder du willst in einem Foto ein Detail markieren, ohne das Bild erst herunterzuladen und in ein anderes Programm zu schieben. Mit neo Draw kannst du Pfeile in Bilder einfügen, direkt im WordPress-Backend.

Der Pfeil bleibt ein eigenes Element. Du kannst ihn später verschieben, drehen, skalieren, umfärben oder wieder entfernen. Das ist für Content-Redakteure und Support-Teams nützlich, die WordPress-Screenshots regelmäßig an neue Oberflächen anpassen müssen.

Die Anleitung zeigt den Ablauf für ein vorhandenes JPG oder PNG. Linien, Kreise, Text und rote Rahmen im Bild funktionieren im selben Editor.

Lade neo Draw über die neoWP-Downloadseite kostenfrei herunter. Öffne anschließend im WordPress-Backend Plugins > Plugin hinzufügen > Plugin hochladen, wähle die ZIP-Datei aus und aktiviere das Plugin.

Nach der Aktivierung erscheint neo Draw an unterstützten Bildelementen und in der Mediathek. Wenn du den Editor vor der Installation ausprobieren möchtest, öffne die Browser-Demo. Für einen Pfeil auf einem vorhandenen Screenshot reicht die kostenlose Version aus.

Wähle dein Bild im Beitrag oder in der Mediathek aus, öffne neo Draw und ziehe den Pfeil auf. Die Pfeilspitze gehört an das genaue Ziel, nicht ungefähr daneben. Danach passt du die Farbe an den Hintergrund an und speicherst die neue Fassung.

Im Beispiel zeigt ein roter Pfeil im WordPress-Backend auf Media > Library. Die sichtbare neoDraw-Werkzeugleiste enthält außerdem Formen, Linien, Text und das Werkzeug zum Einfügen weiterer Bilder.

Öffne den Beitrag oder die Seite mit dem Bild. Klicke in Gutenberg auf den Bildblock oder wähle in Bricks beziehungsweise Elementor das Bildelement aus. Du kannst auch unter Medien > Mediathek beginnen und dort ein vorhandenes Foto oder einen Screenshot öffnen.

Für kleine Beschriftungen und dünne Pfeile sollte das Ausgangsbild nicht schon stark verkleinert sein. Verwende möglichst die große Fassung aus der Mediathek. WordPress verwaltet hochgeladene Bilder zentral in der Media Library, sodass du die markierte Fassung später wiederfindest.

Öffne neo Draw über die Schaltfläche am ausgewählten Bild. Aus einem bestehenden JPG oder PNG entsteht eine neue SVG-Zeichnung, in die neo Draw das Ausgangsbild einbettet. Die ursprüngliche Datei bleibt in der WordPress-Mediathek erhalten.

Du bearbeitest also eine neue Fassung. Das ist hilfreich, wenn du dasselbe Foto einmal sauber und einmal mit Pfeil, Text oder Rahmen verwenden möchtest.

Klicke oben in der Werkzeugleiste auf das Pfeil-Symbol. Setze den Startpunkt in einen ruhigen Bereich des Bildes, halte die Maustaste gedrückt und ziehe bis zu dem Detail, auf das du zeigen möchtest. An der Zielposition sitzt die Pfeilspitze.

Lass zwischen Pfeilspitze und Ziel ein wenig Abstand. Ein Pfeil, der einen Button oder Text überdeckt, erschwert das Lesen. Wenn die Richtung nicht stimmt, wählst du den Pfeil aus und drehst oder verschiebst ihn.

Wähle eine Konturfarbe, die sich deutlich vom Bild abhebt. Rot passt oft zu hellen Screenshots. Gelb oder Weiß funktioniert auf dunklen Flächen besser. Über Stroke width stellst du die Linienstärke ein, über Opacity die Deckkraft.

Kontrolliere den Pfeil bei einer kleineren Zoomstufe. Auf der großen Zeichenfläche sieht eine dünne Linie gut aus, kann im veröffentlichten Blogbeitrag aber fast verschwinden. Meist wirkt ein klarer Pfeil besser als mehrere Markierungen, die um Aufmerksamkeit konkurrieren.

Speichere die Zeichnung in der WordPress-Mediathek. WordPress behandelt die SVG-Datei wie ein Bild, sodass du sie in Beiträge, Seiten und Page Builder einfügen kannst. Die Editor-Daten bleiben in der Datei und ermöglichen spätere Änderungen.

Für eine lokale Kopie kannst du die Zeichnung zusätzlich als SVG oder PNG exportieren. SVG ist für die weitere Bearbeitung und eine scharfe Darstellung bei unterschiedlichen Größen geeignet. PNG passt, wenn du eine flache Pixelgrafik an ein anderes Programm weitergeben möchtest.

Ein Pfeil, der direkt in eine PNG-Datei gerendert wurde, lässt sich später nicht mehr einzeln auswählen. Du müsstest den betreffenden Bildbereich neu bearbeiten oder den Screenshot noch einmal aufbauen.

In neo Draw bleibt der Pfeil ein eigenes Element. Du kannst ihn anklicken, an eine andere Stelle schieben, verlängern, drehen oder seine Farbe ändern. Auch Text, Linien, Kreise und Rahmen bleiben getrennt. Das spart Arbeit, wenn sich nach einem WordPress-Update die Position eines Buttons verschiebt.

neo Draw hat Werkzeuge für Pfeile, gerade Linien, Rechtecke, Kreise, Freihand-Zeichnungen und Text. Für den Pfeil kannst du Farbe, Linienstärke, Strichstil, Deckkraft, Position und Größe anpassen. Die Elemente lassen sich außerdem auf verschiedene Ebenen legen.

Nutze einen Pfeil für ein genaues Ziel. Ein roter Rahmen im Bild passt besser, wenn ein kompletter Bereich zusammengehört. Text lohnt sich nur, wenn die Bildunterschrift allein nicht erklärt, worauf die Markierung hinweist.

Bei einem Support-Screenshot soll der Leser die gesuchte Schaltfläche in wenigen Sekunden finden. Setze die Pfeilspitze deshalb dicht an das Ziel und beginne den Pfeil in einer freien Fläche. Zwei Pfeile sind sinnvoll, wenn eine Reihenfolge gezeigt werden muss. Für ein einzelnes Ziel reicht einer.

Prüfe die Grafik in der Breite, in der sie später auf der Website erscheint. Auf dem Smartphone schrumpfen Screenshot und Pfeil gemeinsam. Eine kräftigere Linie und ein ruhiger Hintergrund helfen mehr als ein besonders großer Pfeil.

Der Alt‑Text sollte die Information wiedergeben, die der Pfeil vermittelt. Die W3C-Anleitung für informative Bilder empfiehlt, die Bedeutung statt einer rein wörtlichen Bildbeschreibung zu erfassen. Schreib also eher WordPress-Bildblock mit markierter neoDraw-Schaltfläche als Screenshot mit rotem Pfeil. Weitere Beispiele findest du im Artikel über gute Alt-Texte für Bilder.

Du kannst ein vorhandenes JPG oder PNG aus der WordPress‑Mediathek in neo Draw öffnen. Das Ausgangsbild wird Teil einer neuen SVG‑Zeichnung. Pfeil, Text und weitere Formen liegen darin als separate Elemente über dem Bild.

Das Original bleibt erhalten. Du kannst deshalb dieselbe Aufnahme ohne Markierung an einer anderen Stelle verwenden. Die neue SVG‑Datei lässt sich wie ein normales Bild einfügen. Benötigst du außerhalb von WordPress eine Pixelgrafik, exportierst du das Ergebnis zusätzlich als PNG.

Für ein Foto mit vielen Details ist SVG trotzdem sinnvoll: Das Foto bleibt eingebettet, während der Pfeil als scharfes Zeichnungselement darüberliegt. Beim Skalieren bleibt seine Kontur sauber.

neo Draw integriert sich direkt in Gutenberg, Elementor, Bricks und den Classic Editor. Dort öffnest du die Bildbearbeitung am ausgewählten Bildelement. In anderen Page Buildern wählst du die fertige SVG‑Grafik über die normale WordPress‑Mediathek aus.

Die Zeichnung ist nicht an den Editor gebunden, in dem sie entstanden ist. Ein in Gutenberg markierter Screenshot kann später in Elementor verwendet und wieder über die Mediathek bearbeitet werden.

Für einen einzelnen lokalen Screenshot reichen oft das Windows Snipping Tool oder die Markierungsfunktionen der macOS Vorschau. Canva eignet sich, wenn du außerhalb von WordPress ein komplettes Social‑Media‑Layout baust. GIMP und Photoshop sind passend, wenn du die Pixel des Bildes aufwendig retuschieren möchtest.

neo Draw ist für den Fall gedacht, dass das Bild bereits zu deiner WordPress‑Website gehört. Du öffnest es dort, fügst den Pfeil ein und speicherst die bearbeitbare Fassung wieder in derselben Mediathek. Der Wechsel zwischen Download‑Ordner, Bildprogramm und WordPress entfällt.

Wie füge ich in WordPress einen Pfeil in ein Bild ein?

Installier neo Draw, wähl das Bild in der Mediathek oder im Page Builder aus und öffne den neoDraw‑Editor. Mit dem Pfeil‑Werkzeug ziehst du den Pfeil vom Startpunkt zur gewünschten Stelle und speicherst die Zeichnung anschließend wieder in WordPress.

Kann ich mit neo Draw kostenlos Pfeile auf Bilder zeichnen?

Ja. Pfeile, Linien, Formen, Text und das Malen auf bestehenden Bildern gehören zu neo Draw und können mit der kostenlosen Version genutzt werden. Der Download ist über die neoWP‑Downloadseite verfügbar.

Kann ich einen Pfeil später verschieben oder umfärben?

Ja. neo Draw speichert den Pfeil als eigenes Element in der SVG‑Zeichnung. Du kannst ihn später auswählen, verschieben, skalieren, drehen, umfärben oder seine Linienstärke und Deckkraft ändern.

Bleibt das ursprüngliche JPG‑ oder PNG‑Bild erhalten?

Ja. Beim Öffnen eines vorhandenen JPG‑ oder PNG‑Bildes erstellt neo Draw eine neue SVG‑Zeichnung mit dem eingebetteten Ausgangsbild. Die ursprüngliche Bilddatei bleibt in der WordPress‑Mediathek erhalten.

Kann ich das Bild mit Pfeil als PNG oder SVG exportieren?

Ja. Die Zeichnung lässt sich als SVG oder PNG exportieren. Für die weitere Bearbeitung in neo Draw ist die SVG-Fassung sinnvoll, weil sie die einzelnen Zeichnungselemente und Editor-Daten enthält.

Funktioniert neo Draw mit Gutenberg, Elementor und Bricks?

Ja. neo Draw ist direkt in Gutenberg, Elementor, Bricks und den Classic Editor eingebunden. Du kannst eine Zeichnung außerdem über die normale WordPress-Mediathek auswählen und in weiteren Page Buildern verwenden.

Welche Farbe eignet sich für einen Pfeil im Screenshot?

Die Pfeilfarbe braucht einen deutlichen Kontrast zum Hintergrund. Rot funktioniert auf vielen hellen, grünen oder blauen Flächen. Auf dunklen Bildern sind Gelb oder Weiß oft besser lesbar. Prüfe den Pfeil auch in der späteren Darstellungsgröße.

Was gehört in den Alt-Text eines Bildes mit Pfeil?

Beschreibe die Information, auf die der Pfeil hinweist, statt nur die Farbe oder Form des Pfeils zu nennen. Ein passender Alt-Text wäre zum Beispiel: WordPress-Bildblock mit markierter neoDraw-Schaltfläche.

Für einen Pfeil im Screenshot musst du WordPress nicht verlassen. Wähle das Bild, öffne neo Draw und setze die Pfeilspitze an die Stelle, die Leser finden sollen. Farbe und Linienstärke passt du an die spätere Darstellungsgröße an.

Die neue Fassung landet in der Mediathek und bleibt bearbeitbar. Lade neo Draw kostenlos herunter oder öffne zuerst die Demo mit einem Beispielbild.