Language
Vier Marker-Typen für jede Form, Block-basierter Tooltip-Editor, Live-Vorschau, Embed mit zwei Zeilen Code. Der Image Map Generator, der sich anfühlt wie ein moderner Editor.
Bevor das Bild in den Editor wandert, kannst du es direkt in picpins zurechtmachen — ohne Photoshop, ohne Umweg. Rahmen ziehen, Ausschnitt wählen, fertig. Drei Schieberegler darunter für Helligkeit, Kontrast und Sättigung, jeweils von -100 bis +100, mit Live-Vorschau.
Akzeptierte Formate: JPG, PNG, WebP — bis 10 MB. Alles weitere im Detail in den Hilfe-Anleitungen.
Setze einen klassischen Punkt, ziehe ein Rechteck oder eine Ellipse, oder zeichne ein Polygon um eine ganze Fläche herum. So funktioniert Bildmarkierung heute. Beispiele aus E-Commerce, Immobilien und Bildung findest du auf der Inspirationen-Seite.
Der klassische Punkt. Ein Klick auf das Bild und der Marker sitzt. Ideal für genaue Stellen wie Produkte, Beschriftungen oder Hinweise.
Ziehe ein Rechteck über einen Bereich. Gut für Bildausschnitte, Bauteile oder Produktgruppen, die zusammengehören.
Wenn rund passender ist als eckig. Markiert Personen, Gesichter, Räume in einer Karte oder organische Formen sauber.
Punkt für Punkt eine beliebige Form zeichnen. Für unregelmäßige Bereiche, exakte Umrisse oder wenn du eine ganze Region markieren willst.
Wenn der klassische Pin nicht zur Bildsprache passt, wechselst du auf einen anderen Stil — sieben weitere stehen zur Auswahl:
Jeder Stil außer dem klassischen Pin lässt sich auf Pulsiert stellen, damit der Marker sanft Aufmerksamkeit zieht. Farbe (Color-Picker oder Hex), Größe (16 bis 64 Pixel) und Animation beim Tooltip-Aufgehen (Fade, Pop, Bounce oder keiner) stellst du pro Marker im Reiter Markierung.
Jeder Marker bekommt einen Tooltip, den du wie in einem modernen Editor aufbaust. Block für Block, drag-and-drop, ohne Code.
Pro Marker entscheidest du, wie der Tooltip aussieht und wann er erscheint. Hintergrundfarbe, Transparenz, Position, Animation, Trigger.
Farbe, Größe, Füllung, Rahmenstärke. Jeder Marker einzeln oder alle auf einmal. So sieht das Ergebnis nach dir aus, nicht nach uns.
Alles, was den Workflow im Editor schneller macht.
Es gibt keinen Speichern-Button. Jede Änderung landet sofort in der Datenbank. Ein kleiner Indikator oben in der Leiste zeigt dir den Status.
Ein Klick auf "Vorschau" und du siehst dein Bild genauso, wie es im Embed später aussehen wird. Ohne Bearbeitungs-Toolbars, ohne Hilfslinien.
Schalte das Bild in einen iPhone-Frame um und prüfe, wie das Ganze auf einem Handy aussieht. Marker werden proportional kleiner skaliert, bleiben aber gut tippbar.
Theme-Toggle oben rechts. Die Auswahl wird gespeichert und bleibt bei deinem nächsten Besuch erhalten.
Großes Bild, winziger Marker? Zoome rein, scrolle herum, setze deinen Pin an die exakte Stelle.
Punkt für Punkt eine Form zeichnen, Doppelklick zum Schließen. Auch komplexe Umrisse sind in Sekunden gesetzt.
Wenn dein Bild fertig ist, holst du dir aus dem Editor zwei Zeilen Code und packst sie auf deine Seite. Eine responsive Imagemap, die auf jedem Gerät passt — ohne picpins-Wasserzeichen, nahtlos in deine Webseite integriert. Funktioniert auf WordPress, Shopify, Wix, Webflow, Jimdo und überall sonst, wo du HTML einfügen kannst. Detaillierte Schritt-für-Schritt-Anleitungen findest du auf der Einbetten-Seite.
<div class="picpins-embed"
data-token="abc123..."></div>
<script
src="https://picpins.com/embed.js"
async></script>
picpins bringt eine Auswahl an Schriften mit, direkt im Editor wählbar. Reichen die nicht, kannst du deine eigene Schriftdatei per URL einbinden — auch dein Markenfont funktioniert dann.
Manchmal brauchst du keinen Embed, sondern nur einen Link. Der Share-Link zeigt dein interaktives Bild auf einer eigenen picpins-Seite, fertig zum Teilen per Mail, Slack oder WhatsApp — kostenlos und unbegrenzt. Auch als iframe auf einer fremden Seite einbindbar (zeigt dann eine picpins-Vorschau).
Ein Projekt muss kein Einzelbild sein. Lege beliebig viele Ansichten in einem Projekt an, jede mit eigenem Bild und eigenen Markern. Im fertigen Embed schaltet der Betrachter über Tabs zwischen den Ansichten um.
Tabs lassen sich per Drag-and-Drop sortieren, mit Doppelklick umbenennen. Jede Ansicht behält ihre Marker und Tooltips. Anwendungsbeispiele dazu in der Inspirationen-Galerie.
Wenn du nicht weißt, was du als Tooltip-Text schreiben sollst, hilft dir KI: Klick auf den Zauberstab im Editor, KI liefert dir 3 bis 5 Sätze Beschreibung deines Bildes. Direkt in die Zwischenablage kopieren oder eine Alternative generieren lassen.
Hinweis: OpenAI ist ein US-Anbieter, dein Bild geht für den Moment der Anfrage in die USA. Den API-Key holst du dir kostenlos auf platform.openai.com/api-keys. Schritt-für-Schritt-Anleitung in der Hilfe.
Dein Embed läuft in jedem modernen Browser — auch in den Browsern auf Meta Quest, Apple Vision Pro oder anderen Headsets. Der User öffnet die Webseite mit deinem eingebetteten Bild im VR-Browser (z.B. Meta Quest Browser, Wolvic, Firefox Reality) und kann die Hotspots wie auf jedem anderen Gerät anklicken.
Praktisch für Shops, Galerien oder Lernmaterial, das auch auf Headsets präsentierbar sein soll, ohne extra App.
Hinweis: native 3D-Hotspots im VR-Raum (z.B. Pins, die im 360°-Panorama schweben) sind aktuell nicht Teil von picpins. Auf der Roadmap.
Manche Funktionen merkst du nur, wenn sie fehlen. Diese hier laufen still im Hintergrund:
Mehr Details zu Editor, Markern und Embed-Code findest du in den Hilfe-Anleitungen. Wer eine bestimmte Plattform braucht, schaut direkt in die Plugin-Übersicht.
Editor öffnen, Bild hochladen, ersten Marker setzen. Ein paar Minuten, mehr ist es nicht.
Editor starten