In WordPress einen roten Rahmen in ein Bild einfügen
Du möchtest in einem WordPress-Screenshot einen Button rot einrahmen oder auf einem Bild ein bestimmtes Detail hervorheben? Mit neo Draw kannst du ein Bild mit einem roten Rahmen markieren, ohne WordPress zu verlassen. Kreise, Pfeile, Text und Freihand-Zeichnungen funktionieren genauso.
Die Markierungen bleiben einzeln auswählbar. Dadurch kannst du einen Rahmen später verschieben, vergrößern, umfärben oder wieder entfernen. Das eignet sich für Anleitungen, Support-Screenshots, Beitragsbilder und Grafiken im Stil eines YouTube-Thumbnails.
Kurz erklärt
- neo Draw installieren und in WordPress aktivieren.
- Ein vorhandenes Bild in Gutenberg, Bricks, Elementor oder der Mediathek auswählen.
- Die neoDraw-Bildbearbeitung öffnen.
- Rechteck, Kreis, Pfeil oder Freihand-Stift auswählen.
- Farbe, Linienstärke und Position festlegen.
- Die bearbeitbare Fassung in der Mediathek speichern.
neo Draw installieren und in WordPress aktivieren
Lade neo Draw zunächst über die neoDraw-Pluginseite herunter. Öffne danach im WordPress-Backend Plugins > Plugin hinzufügen > Plugin hochladen, wähle die ZIP-Datei aus und aktiviere das Plugin. Alternativ findest du neo Draw auch im WordPress Plugin-Verzeichnis.
Nach der Aktivierung erscheint die Bildbearbeitung an unterstützten Bildelementen und in der WordPress-Mediathek. Für einen unverbindlichen Blick in den Editor kannst du außerdem die neoDraw-Demo direkt im Browser öffnen.
Bild mit rotem Rahmen markieren: direkt in WordPress
Im folgenden Video wird ein vorhandenes Gruppenfoto im Gutenberg-Editor ausgewählt. neo Draw öffnet das Bild, zieht einen roten Rahmen um Archie auf der rechten Seite und speichert die markierte Fassung. Der Ablauf dauert nur wenige Sekunden.
Für einen Screenshot funktioniert es genauso: Statt einer Person oder eines Tieres rahmst du zum Beispiel eine Schaltfläche, ein Eingabefeld oder eine Fehlermeldung ein.
neo Draw öffnet ein vorhandenes Bild in WordPress und markiert Archie rechts mit einem roten Rahmen.
So markierst du einen Bereich im Bild
1. Bild in WordPress auswählen
Öffne den Beitrag oder die Seite mit dem gewünschten Bild. Klicke in Gutenberg auf den Bildblock oder wähle in Bricks beziehungsweise Elementor das Bildelement aus. Du kannst auch direkt in der WordPress-Mediathek beginnen.
Verwende für Screenshots möglichst eine ausreichend große Ausgangsdatei. Eine Markierung bleibt besser lesbar, wenn der Screenshot nicht schon vor der Bearbeitung stark verkleinert wurde.
2. Bildeditor öffnen
Öffne neo Draw über die Schaltfläche am ausgewählten Bild. Beim Import eines bestehenden JPG- oder PNG-Bildes entsteht eine neue SVG-Zeichnung. Das ursprüngliche Bild bleibt in der Mediathek erhalten.
Die neue Fassung enthält das Ausgangsbild und alle hinzugefügten Elemente. Dadurch lassen sich Rahmen und Pfeile später unabhängig vom Foto bearbeiten.
3. Roten Rahmen in das Bild einfügen
Wähle das Rechteck-Werkzeug und ziehe den Rahmen von einer Ecke des gewünschten Bereichs zur gegenüberliegenden Ecke. Stelle die Hintergrundfarbe auf transparent und wähle Rot für die Kontur. Im Archie-Beispiel ist die Linie acht Pixel breit, weil sie auf dem großen Foto auch in einer kleineren Vorschau sichtbar bleiben soll.
Der Rahmen sollte das Motiv nicht berühren. Ein wenig Abstand macht klarer, welches Objekt gemeint ist, und verdeckt keine wichtigen Details.
4. Pfeil, Kreis oder Freihand-Markierung ergänzen
Nicht jeder Bildbereich passt in ein Rechteck. Mit einem Kreis kannst du ein kleines Detail hervorheben, ein Pfeil lenkt den Blick auf eine genaue Stelle und der Freihand-Stift eignet sich für eine kurze Unterstreichung oder eine handgezeichnete Kontur. Text lässt sich ebenfalls direkt auf der Grafik platzieren.
Jedes Element kann eine eigene Farbe, Deckkraft und Linienstärke erhalten. Nutze trotzdem lieber ein oder zwei einheitliche Signalfarben. Zu viele verschiedene Markierungen konkurrieren miteinander.
5. Markierung anpassen und Bild speichern
Kontrolliere das Ergebnis bei einer kleineren Zoomstufe. Der Rahmen muss weiterhin erkennbar sein, darf aber das Motiv nicht überdecken. Verschiebe oder skaliere ihn bei Bedarf.
Speichere die Zeichnung anschließend in der WordPress-Mediathek. Sie lässt sich wie ein normales Bild in Beiträge und Page Builder einfügen. Wenn sich der Screenshot später ändert, öffnest du die SVG-Zeichnung erneut und passt die Markierung an.
Rote Rahmen später verschieben und bearbeiten
Ein fertig bemaltes PNG enthält nur noch eine flache Pixelgrafik. Ein verschobener Button oder eine geänderte Beschriftung bedeutet dann oft, dass du den Screenshot neu aufbauen musst.
In einer neoDraw-Zeichnung bleibt der rote Rahmen ein eigenes Element. Du kannst ihn auswählen, verschieben, drehen, skalieren oder umfärben. Dasselbe gilt für Kreise, Pfeile, Linien und Texte. Diese Bearbeitbarkeit ist besonders praktisch bei WordPress-Anleitungen, die nach einem Update angepasst werden müssen.
Rote Rahmen, Pfeile, Kreise und Handzeichnungen
Ein rotes Rechteck ist nur eine Möglichkeit. Für einen kleinen Schalter passt häufig ein Kreis besser. Ein Pfeil zeigt auf eine genaue Position, ohne das Element komplett einzurahmen. Mit dem Stift kannst du einen Begriff unterstreichen oder eine unregelmäßige Form nachzeichnen.
Auch Beschriftungen sind möglich. Halte sie kurz und setze sie neben das markierte Objekt. So bleibt der Screenshot verständlich, selbst wenn er in einer schmalen Spalte oder auf einem Smartphone erscheint.
Ein Bild wie ein YouTube-Thumbnail markieren
Auf einem Thumbnail muss die Markierung auch in sehr kleiner Darstellung funktionieren. Ziehe den Rahmen deshalb nicht zu dünn und konzentriere dich auf ein einziges Hauptmotiv. Im Beispiel stehen drei Hunde am See. Der roten Rahmen um Archie rechts beantwortet sofort die Frage, welcher Hund gemeint ist.
Ein zusätzlicher Pfeil oder ein kurzer Text kann helfen. Mehrere Rahmen, drei Pfeile und lange Beschriftungen machen das Vorschaubild dagegen schwerer lesbar. Prüfe das Ergebnis bei ungefähr 320 Pixel Breite, bevor du es veröffentlichst.
Roter Rahmen um das ganze Bild oder Markierung im Bild?
Ein Rahmen um das komplette WordPress-Bild und eine Markierung innerhalb des Bildes lösen unterschiedliche Aufgaben.
| Lösung | Geeignet für | Bleibt Teil der Bilddatei? |
|---|---|---|
| CSS-Rahmen | Galerien, Karten und einheitliche Layouts | Nein, der Rahmen gehört zur Website |
| Markierung mit neo Draw | Screenshots, Anleitungen und Thumbnail-Grafiken | Ja, die Markierung wird mit der SVG-Zeichnung gespeichert |
Wenn nur ein sauberer Rand außen um das Bild benötigt wird, reicht meist die Rahmen-Einstellung des Page Builders oder eine CSS-Regel. Möchtest du einen bestimmten Bereich im Bild markieren, brauchst du eine eingezeichnete Form.
Bildmarkierungen in Bricks, Gutenberg und Elementor
neo Draw integriert sich direkt in Bricks, Gutenberg, Elementor und den Classic Editor. Dort öffnest du die Bildbearbeitung am jeweiligen Bildelement. In anderen Page Buildern kannst du die markierte SVG-Grafik über die normale WordPress-Mediathek auswählen.
Die Bearbeitung ist nicht an den Page Builder gebunden. Ein in Gutenberg markiertes Bild kann später auch in Bricks verwendet und erneut über die Mediathek geöffnet werden.
Welche Farbe und Linienstärke passt?
- Rot: fällt auf hellen, grünen und blauen Flächen schnell auf.
- Gelb oder Weiß: kann auf dunklen Screenshots besser lesbar sein.
- Dunkelblau oder Schwarz: eignet sich für sehr helle Motive mit roten Bedienelementen.
- Linienstärke: muss zur späteren Darstellungsgröße passen. Prüfe nicht nur die große Editoransicht.
- Abstand: lasse zwischen Kontur und markiertem Objekt etwas Luft.
Ein roter Rahmen auf einem roten Button hat kaum Kontrast. Wähle in diesem Fall eine andere Signalfarbe, statt Rot nur wegen des typischen Thumbnail-Looks zu erzwingen.
Häufige Fragen zum Markieren von Bildern in WordPress
Warum neo WP?
Warum sollte ich mich für neo WP entscheiden?Du bekommst ein ganzes Universum aus spezialisierten Media-Plugins für die moderne Medienverwaltung in WordPress. Darin enthalten sind perfekt aufeinander abgestimmte Werkzeuge zum Umbenennen, Ersetzen, Optimieren, Zeichnen, Animieren und Verwalten von Medien. Jedes Plugin ist darauf ausgelegt, dein SEO-Ranking zu verbessern, die Performance deiner Seite zu steigern und dir wertvolle Zeit bei der Content-Erstellung zu sparen.
Mit der Pro-Version erhältst du alle Features in einem einzigen Plugin. Eine ZIP-Datei, eine Einstellungsseite, ein Update und die volle Kontrolle. In den neoPlugin-Einstellungen aktivierst du genau die Features, die du brauchst.
Hinter neo WP steht ein engagiertes Team von erfahrenen Webentwicklern. Mit viel Liebe zum Detail und hohem Anspruch an Codequalität entwickeln wir das neoUniversum kontinuierlich weiter.
neo Plugins Free vs. Pro
Was ist der Unterschied zwischen Free und Pro?Mit der Free-Version erhältst du alle neo Plugins mit ihren Basisfunktionen. Auf der Download-Seite kannst du die Plugins einzeln herunterladen oder direkt mit dem neoPlugins-ZIP installieren. Nach der Installation erscheinen die neo Plugins als einzelne Einträge im WordPress-Backend und müssen separat verwaltet und aktualisiert werden. Support erhältst du über das öffentliche WordPress-Forum.
Mit der Pro-Version bekommst du alle neo Plugins inklusive aller Pro-Features in einer einzigen ZIP-Datei. Du lädst nur diese eine Datei hoch und findest anschließend alle Features als einen Plugin-Eintrag in deinem Dashboard. Über die Plugin-Übersicht in den Einstellungen aktivierst du per Schalter genau die Module, die du benötigst. Alle Pro-Features mit dem Krönchen-Icon 👑 stehen dir sofort zur Verfügung. Dazu gehören zum Beispiel das Anzeigen aller Beiträge, die ein bestimmtes Bild verwenden, Bulk-Aktionen im neoRenamer, ein erweiterter Animationseditor für Zeichnungen und vieles mehr. Dank automatischer Sicherheits- und Funktionsupdates bleibst du immer auf dem neuesten Stand. Neu veröffentlichte Media-Plugins und Tools erhältst du in Zukunft ohne Aufpreis dazu. Mit der Pro-Version genießt du außerdem priorisierten Premium-Support direkt vom Entwicklerteam.
Wenn du also Zeit sparen, flexibel bleiben und alle Profi-Funktionen sofort nutzen möchtest, ist die Pro-Version genau das Richtige für dich.
Sicherheit & Datenschutz?
Wie sicher ist das Plugin?Alle neo Plugins werden regelmäßig aktualisiert, auf deutschen Servern betrieben und erfüllen vollständig die europäischen Datenschutzrichtlinien (GDPR/DSGVO). Darüber hinaus werden sämtliche Updates vor der Veröffentlichung von erfahrenen WordPress-Profis intensiv getestet.
Demo- und Testversion
Gibt es eine Demo-Version?Ja! Du kannst alle neo Plugins direkt in der Online-Sandbox ohne Installation testen. Außerdem hast du die Möglichkeit, alle neoPro-Features auf deiner eigenen WordPress-Seite 14 Tage lang kostenlos zu testen. Diesen Testzeitraum kannst du im WordPress-Backend unter den neoWP-Einstellungen aktivieren. So kannst du in Ruhe herausfinden, ob neo WP das Richtige für dich ist.
Neon-Farben ändern
Warum sind die Farben so grell?Oft werden wir gefragt: Warum Pink und Grün? Was ist mit den Farben los? Warum sehe ich das Plugin noch, wenn ich die Augen zu mache? Wir wollten auffallen. Falls du deinem Sehnerv eine Pause gönnen willst: In der Pro-Version bekommst du automatisch ein ruhigeres Farbschema in Dunkelblau und Gold. Viele Nutzer haben sich in die Neon-Farben verliebt. Daher gibt es in den Pro-Einstellungen einen Schalter fürs Farbschema.
Feature-Wunsch?
Kann ich Feature-Wünsche einreichen?Ja! Das Team von neo WP freut sich über Feedback, Ideen und Vorschläge. Alles was in unserer Wunschbox landet, werden wir im Team besprechen. Wir antworten auf jedes Feedback.
Mehrsprachig?
Ist das Plugin mehrsprachig?Ja, alle neo Plugins unterstützen mehrere Sprachen, unter anderem Englisch und Deutsch. Ist eine Sprache noch nicht verfügbar, wird automatisch die englische Version angezeigt.
Nach dem Kauf
Was passiert nach dem Kauf?Nach dem Kauf erhältst du zwei E-Mails mit deiner Rechnung, dem Download-Link und deinem persönlichen Lizenzschlüssel. Falls die Mails nicht im Posteingang auftauchen, lohnt sich ein Blick in den Spam-Ordner. Alternativ findest du alle Infos auch in deinem Konto. Das Plugin kannst du anschließend ganz einfach in deinem WordPress-Dashboard als ZIP-Datei über „Plugins > Plugin hinzufügen > Plugin hochladen“ installieren und den Lizenzschlüssel eingeben. Die kostenfreien neo Plugins kannst du dann löschen, sie werden nicht mehr benötigt. Bestehende Einstellungen und Inhalte bleiben beim Wechsel von Free zu Pro selbstverständlich erhalten.
Mehrere Websites
Welche Lizenz benötige ich für mehrere Websites?Es gibt Lizenzen für 1, 5 oder 25 Websites. Jede produktive Website belegt einen Platz innerhalb der Lizenz - auch innerhalb einer WordPress-Multisite-Installation. Entwicklungs-, Test-, Staging- oder lokale Umgebungen sind kostenfrei und benötigen keine eigene Lizenz, sofern sie einer lizenzierten Produktivseite zugeordnet sind. Vergünstigte Lizenzpakete für 5 oder 25 Websites können direkt über die Preistabelle oder im Checkout ausgewählt werden. Wenn du mehr als 25 Lizenzen benötigst, kontaktiere uns bitte per E-Mail.
Lizenz umziehen
Kann ich eine Lizenz auf eine andere Domain umziehen?Ja! Ein Domainwechsel ist problemlos möglich. Du kannst die Lizenz auf der alten Domain deaktivieren und anschließend auf der neuen Domain wieder aktivieren. Die Zuordnung der Lizenzen zu den Domains kann alternativ im Konto eingesehen und jederzeit angepasst werden. Beim Kauf der Lizenz wurden dir die Zugangsdaten per E-Mail von neo-wp.com zugesendet. Bei Fragen oder Problemen helfen wir dir gerne weiter.
Bild markieren, speichern und später weiterbearbeiten
Für einen roten Rahmen brauchst du WordPress nicht zu verlassen. Installiere neo Draw, öffne das gewünschte Bild und ziehe die passende Markierung über dem relevanten Bereich auf. Die neue Fassung landet in der Mediathek und kann sofort in deinem Beitrag verwendet werden.
Wenn sich das Motiv oder die WordPress-Oberfläche später ändert, passt du Rahmen, Pfeil oder Beschriftung erneut an. Das ursprüngliche Bild bleibt erhalten.
