Language
Vom ersten Foto bis zum eingebetteten Endprodukt. Imagemap erstellen, Tooltips bauen, responsive Imagemap einbinden — hier findest du alles, was du wissen musst.
Du brauchst nur ein Bild und einen Browser. PicPins läuft komplett online, du musst nichts installieren. Eine Anmeldung wird erst nötig, wenn du dein Projekt speichern oder einbetten willst.
Lieber zuschauen statt lesen? Diese kurzen Videos zeigen dir die wichtigsten Funktionen in unter 5 Minuten.
Bevor das Bild in den Editor wandert, kannst du es direkt in picpins zurechtmachen — kein Photoshop nötig. Im Upload-Fenster gibt es dafür einen "Bild anpassen"-Button.
Du ziehst den Rahmen mit der Maus auf den gewünschten Ausschnitt. Eckpunkte und Seiten lassen sich anfassen, um den Rahmen zu vergrößern oder zu verkleinern. Wenn du in die Mitte des Rahmens klickst und ziehst, verschiebst du den ganzen Ausschnitt.
Drei Schieberegler unter dem Bild ändern die Bildwirkung in Echtzeit. Werte gehen jeweils von -100 (weniger) bis +100 (mehr). Mit "Zurücksetzen" stellst du alles wieder auf den Originalwert.
Wenn du fertig bist, klickst du auf "Anwenden" — dein Bild wird mit den Änderungen in den Upload übernommen. Der Vorgang lässt sich beliebig oft wiederholen, falls du noch nachjustieren willst.
JPG, PNG und WebP, bis maximal 10 MB. Beim Upload wird das Bild automatisch fürs Web optimiert — größere Bilder kommen auf 1920 px Kantenlänge runter, die Dateigröße wird reduziert. Du musst dich also nicht selbst um die Optimierung kümmern.
Der Editor ist die Hauptbühne von PicPins. Oben siehst du eine Leiste mit Projekt-Titel, Save-Status, Vorschau-Button und Theme-Toggle. Links liegen die Marker-Werkzeuge, in der Mitte dein Bild, rechts die Einstellungen für den ausgewählten Marker.
| Symbol | Werkzeug | Was es tut |
|---|---|---|
| ● | Spot | Setzt einen klassischen Punkt-Marker per Klick |
| ▭ | Rechteck | Ziehe mit der Maus ein Rechteck auf |
| ◯ | Ellipse | Ziehe eine Ellipse oder einen Kreis |
| ⬡ | Polygon | Setze Punkt für Punkt eine freie Form, Doppelklick zum Schließen |
| ✋ | Hand | Verschiebt das Bild im Canvas, ohne neue Marker zu setzen |
In der oberen Leiste hast du:
Du musst nichts speichern. Sobald du einen Marker setzt, einen Block änderst oder eine Farbe anpasst, wird die Änderung automatisch übernommen. Der Save-Status oben in der Leiste zeigt dir an, wann die Änderung durch ist. Wenn du den Browser schließt während "Speichern…" steht, kann die letzte Änderung verloren gehen, also kurz auf "Gespeichert" warten.
Marker sind die klickbaren Stellen auf deinem Bild. Es gibt vier Typen, jeder hat seinen Anwendungsfall.
Klicke links auf das Spot-Werkzeug, dann auf eine beliebige Stelle im Bild. Der Marker erscheint als runder Punkt mit weißem Rand. Anschließend zeigt die rechte Seitenleiste die Style-Optionen.
Werkzeug auswählen, im Bild Maustaste gedrückt halten und ziehen. Beim Loslassen ist die Form gesetzt. Halte beim Ziehen Shift, um ein Quadrat oder einen exakten Kreis zu bekommen.
Klick für Klick setzt du einzelne Eckpunkte. Ein Doppelklick auf den letzten Punkt schließt die Form. Mit Esc brichst du den Vorgang ab. Die Punkte werden alle zwischen Start und Ende verbunden, du musst keine Reihenfolge planen.
Klicke auf einen vorhandenen Marker, um ihn auszuwählen. Du kannst ihn dann mit der Maus verschieben oder die Größen-Anfasser ziehen. Bei Polygonen lässt sich jeder Eckpunkt einzeln greifen.
Marker auswählen, dann Entf oder Backspace drücken. Oder rechts in der Seitenleiste auf das Mülleimer-Symbol. Wenn du dabei Bilder im Tooltip hattest, werden die zugehörigen Bild-Dateien automatisch mit aufgeräumt.
Wenn du das Spot-Werkzeug aktivierst, klappt rechts daneben eine zweite Werkzeug-Leiste mit acht Marker-Varianten auf. Wähle den Stil, der zur Bildsprache passt:
| Stil | Wofür gut geeignet |
|---|---|
| Klassisch | Runder Pin mit fortlaufender Nummer — der Standard für nummerierte Schritte oder Listen |
| Tag | Etiketten-Symbol, wirkt wie ein Preisschild — passt zu Produktmarkierungen |
| Kreis | Minimalistischer Ring — wenn der Marker nicht ablenken soll |
| Pin | Klassische Karten-Stecknadel — passt zu Karten und Reise-Inhalten |
| Finger | Hand-Symbol als Hinweis — gut für Tutorials, die auf etwas zeigen |
| Smiley | Freundliches Gesicht — Tutorials für Kinder oder lockere Inhalte |
| Warenkorb | Einkaufs-Symbol — Shop-the-Look und Lifestyle-Bilder |
| Pfeil | Richtungsanzeiger — Vorgangs-Beschreibungen, Reihenfolgen |
Marker mit SVG-Icon (alle außer dem klassischen Pin) lassen sich auf Pulsiert stellen. Der Marker pulsiert dann sanft, um Aufmerksamkeit zu erzeugen. Praktisch, wenn ein einzelner Marker auf einem ruhigen Bild auffallen soll.
Im selben Reiter (Markierung) findest du die Animation, mit der der Tooltip aufgeht: Keiner, Fade (sanftes Einblenden), Pop (kurzer Hopser) oder Bounce (federnder Effekt). Eine Übersicht aller Marker-Eigenschaften gibt es im Abschnitt Marker- und Tooltip-Stil.
Hinter jedem Marker liegt ein Tooltip, der erscheint sobald jemand auf den Marker klickt oder darüber fährt. Den Inhalt baust du im Block-Editor zusammen.
Klicke auf einen Marker. Der Tooltip öffnet sich neben dem Marker im Bearbeitungs-Modus. Wenn der Marker noch leer ist, siehst du nur einen Platzhalter und ein "+"-Symbol zum Hinzufügen des ersten Blocks.
Mit dem "+"-Button am unteren Rand des Tooltips öffnet sich ein Menü mit allen Block-Typen. Klick auf einen Typ und der Block wird angehängt.
Klicke einen Block an. Über dem Block erscheint eine kleine Toolbar. Dort findest du Pfeile zum Verschieben nach oben oder unten und ein Drag-Handle zum freien Ziehen.
Block auswählen, dann in der Toolbar auf das Mülleimer-Symbol klicken.
Oben rechts am Tooltip ist ein Schieberegler-Symbol. Klick darauf und du kannst:
Das Einstellungs-Fenster lässt sich übrigens am Drag-Griff verschieben, falls es im Weg steht.
Sechs Block-Typen stehen dir zur Verfügung. Jeder lässt sich einzeln formatieren.
Drei Größen: H1 (groß), H2 (mittel), H3 (klein). Ausrichtung links, mittig oder rechts. Eigene Schriftart pro Überschrift möglich.
Fließtext mit eingeschränktem HTML. Erlaubt sind Fett, Kursiv, Unterstrichen, Links und Zeilenumbrüche. Skripte und andere Tags werden vom Sanitizer entfernt, das passiert sowohl im Browser als auch nochmal serverseitig.
Beschriftung, Ziel-URL (http, https oder mailto), Hintergrundfarbe, Textfarbe, Form (Pille, abgerundet, eckig). Buttons öffnen ihr Ziel beim Klick im selben Tab.
Klicke "Bild hochladen" im Block, wähle eine Datei. Dateinamen werden auf eine sichere Whitelist geprüft (Buchstaben, Zahlen, Punkt, Unterstrich, Bindestrich, maximal 64 Zeichen). Der Block speichert nur den Dateinamen, das Bild liegt sicher im Upload-Verzeichnis. Alt-Text für Barrierefreiheit kannst du eintragen.
Füge die Video-ID oder die ganze YouTube-URL ein. PicPins extrahiert die ID automatisch und bettet das Video als iframe ein. IDs werden gegen ein striktes Muster geprüft, damit nur echte YouTube-IDs durchkommen.
Direkter Link zu einer Video-Datei (mp4, webm). Wird als natives HTML5-Video-Element eingebettet, mit Standard-Browser-Controls.
Aktueller Preis als Pflichtfeld, alter Preis optional (wird durchgestrichen dargestellt). Währung wählbar zwischen EUR, USD, GBP, CHF, SEK oder leer für reine Zahlen. Position der Währung vor oder nach dem Betrag. Optional ein Rabatt-Badge mit eigenem Text und eigenen Farben.
Marker auswählen, rechts in der Seitenleiste findest du:
Über das Schieberegler-Symbol am Tooltip:
Ein Projekt kann mehrere Bilder als verschiedene Ansichten enthalten — praktisch für mehrere Stockwerke, Produktvarianten oder verschiedene Tage einer Reise. Im fertigen Embed schaltet der Betrachter über Tabs zwischen den Ansichten um.
Rechts neben dem Bild siehst du eine Leiste mit deinen Ansichten. Klick auf das Plus-Symbol legt eine neue Ansicht an. Du lädst dazu ein weiteres Bild hoch und vergibst einen Namen.
Klick einfach in der Ansichten-Leiste auf den gewünschten Tab. Jede Ansicht hat ihre eigenen Marker und Tooltips, sie beeinflussen sich nicht gegenseitig.
Drück und zieh einen Tab, um die Reihenfolge zu ändern. Doppelklick öffnet die Umbenennung.
Beispiele dazu in der Inspirationen-Galerie.
Wenn du nicht weißt, was du als Tooltip-Text schreiben sollst, hilft dir KI: Klick auf den Zauberstab-Button im Editor, KI liefert dir 3 bis 5 Sätze Beschreibung deines Bildes — als Inspiration und Ausgangspunkt.
Einen eigenen OpenAI-API-Key. Den bekommst du auf platform.openai.com/api-keys. Dort musst du dich kostenlos registrieren und ein paar Cent Guthaben einzahlen. Eine Beschreibung kostet typisch unter einem halben Cent — du zahlst direkt an OpenAI, picpins verlangt dafür nichts.
Dein API-Key wird ausschließlich in deinem Browser gespeichert — nie auf unserem Server. Die Anfrage an die KI geht direkt von deinem Browser an OpenAI; wir sehen weder deinen Key noch deine Anfrage.
OpenAI ist ein US-Anbieter, dein Bild geht für den Moment der Anfrage in die USA. Wenn das für dich oder deine Kunden ein Thema ist, schreib die Texte lieber selbst oder nutze die KI nur für Bilder ohne sensible Inhalte.
Über den "Vorschau"-Button schaltest du in den Live-Modus. Du siehst dein Bild dann genau so, wie es im Embed später aussieht: ohne Bearbeitungs-Toolbars, ohne Hilfslinien, mit den Animationen und Triggern, die du eingestellt hast.
Klicke nochmal auf "Vorschau", um zurück in den Bearbeiten-Modus zu kommen.
Schaltest du den Mobile-Toggle ein, wird dein Bild in einem iPhone-Frame angezeigt (390×847 Pixel Viewport). Marker werden proportional kleiner skaliert, allerdings mit einem harten Mindestwert, damit sie auf dem Touchscreen treffbar bleiben.
Wichtig: die Marker-Position ist prozentual, also gleich auf Desktop und Mobile. Wenn du für Mobile andere Positionen brauchst, ist das aktuell nicht möglich, aber auf der Roadmap.
Im Dashboard siehst du alle deine Projekte als Kachel-Übersicht. Pro Projekt:
Damit jemand dein Bild über einen Share-Link oder Embed sehen kann, muss es veröffentlicht sein. Im Dashboard schaltest du den Public-Toggle um, oder direkt im Editor über das Embed-Modal.
Beim Löschen werden Bild, alle Marker und alle hochgeladenen Tooltip-Bilder mit gelöscht. Eine Wiederherstellung gibt es nicht, also gut überlegen.
Im Dashboard oder im Editor findest du den Share-Link. Er hat die Form https://picpins.com/p/<Token>. Jeder mit dem Link kann das interaktive Bild ansehen, kein Login nötig.
Im Embed-Modal bekommst du zwei Zeilen Code:
<div class="picpins-embed" data-token="dein-token-hier"></div>
<script src="https://picpins.com/embed.js" async></script>Kopiere beide Zeilen und füge sie an der Stelle deiner Webseite ein, wo das Bild erscheinen soll. Das Script kannst du auch ans Ende der Seite packen, der Marker-Container wird trotzdem erkannt.
Funktioniert. Jeder Embed-Container braucht ein eigenes Token. Das Script findet alle Container automatisch und initialisiert sie einzeln.
Detaillierte Schritt-für-Schritt-Anleitungen für jede Plattform samt Stolperfallen findest du auf der Seite PicPins einbetten oder in der Plugin-Übersicht.
PicPins kapselt seine Styles über einen pp--Klassen-Präfix, damit das Embed nicht von Host-CSS verbogen wird. Trotzdem kann es bei sehr aggressiven globalen Styles (z.B. * { box-sizing: border-box } mit hoher Spezifität) zu kleinen Layout-Änderungen kommen. Wenn dein Embed merkwürdig aussieht, schau in die Fehlerbehebung weiter unten.
Browser cachen das Embed-Script aggressiv. Wenn du eine neue Version brauchst, hänge an die Script-URL einen Cache-Buster an: <script src="https://picpins.com/embed.js?v=2" async></script>. Bei jedem Update den Wert hochzählen.
PicPins bringt eine Auswahl an Schriften mit, die du im Tooltip-Stil oder pro Block auswählen kannst. Welche genau verfügbar sind, siehst du im Schriftarten-Dropdown im Editor. Eine Übersicht aller Editor-Möglichkeiten findest du in der Funktions-Übersicht.
Wenn du eine Schriftart nutzen willst, die nicht in der Liste steht, kannst du eine eigene Schriftdatei einbinden. Dafür hostest du die Datei selbst (zum Beispiel auf deiner eigenen Webseite) und gibst die URL im Editor ein.
.woff2-Schriftdatei auf deinen eigenen Webspace hoch, zum Beispiel unter https://deine-webseite.de/fonts/Inter-Regular.woff2.https:// beginnen, sonst blockieren Browser das Laden.Access-Control-Allow-Origin: * ausliefern, sonst lädt der Browser sie nicht. Bei den meisten Webhostern ist das Standard, bei eigenen Servern eventuell in der Konfiguration nachjustieren.data-token korrekt??v=2 setzen.Wahrscheinlich überschreibt CSS auf der Host-Seite die PicPins-Styles. Suche nach globalen Selektoren wie * { ... } oder div { ... } mit höherer Spezifität. Im Zweifel den Embed in einen Container mit eigenem Klassen-Namen packen und dort die Host-Styles ausnehmen.
Marker werden auf Mobile proportional kleiner. Wenn dein Bild sehr klein dargestellt wird, kann das hart an die Grenze kommen. Prüfe ob das Bild ausreichend Breite hat und der Embed-Container nicht von Host-CSS auf 200 Pixel gestaucht wird.
Auto-Save braucht ein paar Sekunden. Wenn du den Browser direkt nach einer Änderung schließt, kann die letzte Änderung verloren gehen. Warte bis "Gespeichert" oben in der Filebar steht.
Probiere im Tooltip-Stil eine andere Position aus. "Über dem Marker" gibt mehr Platz auf kleinen Screens als "rechts" oder "links".
Wenn dein Browser CORS-Fehler meldet, liegt das meistens am Ziel-Server (z.B. wenn du eigene Schriftarten von einer fremden Domain einbindest). Stelle sicher, dass die eingebundene Datei mit passenden CORS-Headern ausgeliefert wird, oder lade sie auf den gleichen Webspace wie deine Webseite.
Aktuelles Limit: 10 MB pro Bild. Wenn deine Datei größer ist, hilft ein Tool wie TinyPNG oder Squoosh zum Komprimieren. Beim Upload wird das Bild ohnehin auf 1920 px Kantenlänge optimiert.
Zum Ausprobieren nicht. Wenn du ein Projekt speichern, später wieder bearbeiten oder einbetten willst, brauchst du einen kostenlosen Account.
Ja. Jeder Embed bekommt ein eigenes Token, das Script erkennt alle Container und initialisiert sie unabhängig. Du musst das Script nur einmal pro Seite einbinden.
Maximal 10 MB pro Datei. Akzeptierte Formate: JPG, PNG, WebP. Beim Upload wird das Bild automatisch fürs Web optimiert — größere Bilder kommen auf 1920 px Kantenlänge runter, die Dateigröße wird reduziert. Du musst dich also nicht selbst um die Optimierung kümmern.
Aktuell nicht. Pro Marker ein Tooltip in einer Sprache. Mehrsprachigkeit ist auf der Roadmap, aber noch nicht implementiert.
Ja, in den meisten Themes. Füge HTML-Embed und Script-Tag in einem "HTML"-Block oder Custom HTML Widget ein. Bei aggressiven Cache-Plugins kann es helfen, den Cache-Buster ?v=N ans Script zu hängen.
Aktuell nein. Marker-Positionen sind prozentual und damit auf beiden Geräten identisch. Mobile-spezifische Positionen stehen auf der Wunschliste.
Der Marker bleibt klickbar, der Tooltip zeigt im Bearbeitungs-Modus einen Platzhalter und im Live-Modus nichts oder einen leeren Rahmen. Marker ohne Inhalt sind also ungefährlich, aber wenig nützlich.
Aktuell nicht. Eine gelöschte Marker oder ein gelöschter Block ist weg. Wenn du häufig experimentierst, hilft es, das Projekt vor größeren Umbauten im Dashboard zu duplizieren.
Bilder werden so abgelegt, wie du sie hochlädst. Sensible Metadaten (Standort, Kamera) bleiben also drin, falls deine Datei welche enthält. Wenn das ein Problem ist, vor dem Upload bereinigen.
PicPins speichert Daten so sparsam wie möglich. Welche Daten erhoben werden und wozu, steht in der Datenschutzerklärung. Konkrete Aussagen zur Konformität in deinem Anwendungsfall sind keine Rechtsberatung, da sollte im Zweifel ein Anwalt drauf schauen.
Schreib uns. Wir antworten meistens innerhalb eines Werktags.
Zum Kontaktformular