Sprache
Hotspots, Tooltips und shoppbare Produktfotos direkt in deine WordPress-Seite, ohne Plugin-Zoo. Funktioniert im Gutenberg-Editor, im Klassik-Editor und in jedem gängigen Page Builder.
Auch kompatibel mit WooCommerce, Elementor, Divi und Beaver Builder.
Foto bei picpins hochladen, Marker setzen, Tooltips füllen. Speichern erfolgt automatisch.
Im picpins-Dashboard auf „Einbetten" klicken. Du bekommst zwei Zeilen HTML.
Im Beitrag oder auf der Seite einen Custom-HTML-Block hinzufügen, Code reinpacken, veröffentlichen.
WordPress unterscheidet zwischen Gutenberg (Block-Editor seit 5.0) und dem Klassik-Editor. Der Embed funktioniert in beiden. Wenn du einen Page Builder wie Elementor, Divi oder Beaver Builder nutzt, hat der ein eigenes HTML-Widget — der Code geht dort genauso rein.
Öffne den Beitrag oder die Seite, an der dein interaktives Bild erscheinen soll. Klick auf das Plus-Symbol, um einen neuen Block hinzuzufügen, und such nach Custom HTML (auf Deutsch: „Benutzerdefiniertes HTML"). Das ist der Block, in den du HTML- und JavaScript-Code direkt einfügen kannst.
Füge die zwei Zeilen Embed-Code ein, die du aus deinem picpins-Dashboard kopiert hast. Klicke auf „Vorschau" rechts oben am Block, um das Bild bereits im Editor zu sehen.
Der klassische TinyMCE-Editor hat zwei Tabs: „Visuell" und „Text". Wechsel auf Text. Dort siehst du den HTML-Quellcode deines Beitrags. Füge an der gewünschten Stelle den Embed-Code ein und wechsel zurück auf „Visuell" oder veröffentliche direkt.
Wichtig: Wenn du im Visuell-Modus eine Änderung machst, kann WordPress den eingefügten Code unter Umständen umformatieren. Sicherer ist, den Beitrag direkt aus dem Text-Modus zu speichern.
Alle gängigen Page Builder haben ein HTML- oder Code-Element. Bei Elementor heißt es „HTML", bei Divi „Code-Modul", bei Beaver Builder „HTML". Zieh das Element an die gewünschte Stelle, öffne die Einstellungen und füge den Embed-Code ins Code-Feld ein.
Speichern, Vorschau prüfen, veröffentlichen.
Auf einer WooCommerce-Produktseite kannst du den Embed-Code in die Produktbeschreibung einfügen — das ist im Hintergrund derselbe Editor wie für normale Beiträge, also Gutenberg oder klassisch. Damit lassen sich Variationen, Größen oder Produktdetails direkt am Foto markieren.
Für die Kurzbeschreibung über dem Warenkorb-Button funktioniert das genauso, allerdings ist da meist weniger Platz und das Embed wirkt schnell zu groß. Empfehlung: ausführliche Beschreibung unten nutzen.
Markiere Produkte direkt im Beitragsbild, verlinke zur Affiliate-Page oder zum eigenen Shop. Tooltip mit Bild, Preis und Button.
Bauteile, Materialien oder Größenangaben direkt am Produktfoto. Spart endlose Tabellen unter dem Bild.
Werkzeug- oder Software-Screenshots mit nummerierten Markern. Tooltip-Texte mit Schritt-Erklärung und Video-Embed.
Foto vom Apartment, jeder Raum als Hotspot mit Größe, Ausstattung und Bildergalerie.
.picpins-embed direkt in deinem Theme-CSS ansprechen.Nein. Der Embed ist ganz normales HTML mit einem kleinen Script-Tag. Solange dein Theme oder Hoster JavaScript-Embeds nicht blockiert, funktioniert es out of the box. Für 99 % aller WordPress-Installationen reicht der Custom-HTML-Block.
Ja, in beiden. Im Gutenberg nutzt du den „Custom HTML"-Block. Im Klassik-Editor wechselst du auf den „Text"-Tab und fügst den Code direkt im Quelltext ein.
Funktioniert genauso. Jeder Page Builder hat ein HTML- oder Code-Modul. Code dort einfügen, speichern, fertig. Bei Elementor liegt das Modul unter „Allgemein → HTML", bei Divi unter „Code-Modul", bei Beaver Builder unter „HTML".
Aggressive Cache-Plugins wie WP Rocket, W3 Total Cache oder LiteSpeed Cache speichern manchmal alte Versionen der Seite zwischen, ohne den neuen Embed mitzunehmen. Lösung: Nach dem Einfügen einmal den kompletten Cache leeren. Bei WP Rocket reicht meist „Cache leeren" im Admin-Header.
Falls Skripte minifiziert oder zusammengefasst werden, das picpins-Skript von der Kombinierung ausschließen — die meisten Plugins haben dafür eine Ausnahme-Liste.
Ja. Der Embed-Code geht in die Produktbeschreibung, nicht in das Produktbild-Feld direkt — WooCommerce will dort echte Image-URLs. Aber unter dem Produktbild im Beschreibungs-Editor kannst du beliebig viele picpins-Embeds platzieren.
AMP (Accelerated Mobile Pages) erlaubt nur eine sehr eingeschränkte Liste an externen Skripten. picpins-Embeds funktionieren nicht in der AMP-Variante deiner Seite. In der Standard-Version (Desktop und mobile ohne AMP) läuft alles normal.
Wenn du AMP brauchst, kannst du auf der AMP-Variante stattdessen einen statischen Screenshot oder den picpins-Share-Link einbinden.
Ja, beliebig viele. Das embed.js-Script wird nur einmal geladen, danach werden alle .picpins-embed-Container automatisch initialisiert. Performance bleibt sauber, weil das Script asynchron lädt.
Der Embed ist Teil des Beitrags-Inhalts, nicht des Themes. Themewechsel ändert nur Layout, Schriften und Farben drumherum — das eingebettete Bild bleibt stabil und funktioniert weiter. Solange das neue Theme JavaScript erlaubt (was 99 % aller Themes tun), läuft alles weiter.
Account in 30 Sekunden, Bild hochladen, Marker setzen, Embed-Code kopieren — fertig. Keine Kreditkarte nötig.