Sprache
Hotspots, Tooltips und shoppbare Lifestyle-Bilder in deine Webflow-Seite — über das Standard-Embed-Element, ohne Custom-Code-Knochenarbeit.
Funktioniert in Designer, Editor, CMS Collections und Webflow E-Commerce.
Foto hochladen, Marker setzen, Tooltips füllen. Alles speichert sich automatisch.
Im picpins-Dashboard die zwei HTML-Zeilen kopieren.
Im Designer ein Embed-Element auf die Seite ziehen, Code reinpacken, „Save & Close", Seite publishen.
Webflow hat ein dediziertes Embed-Element für genau diesen Anwendungsfall. Wichtig zu wissen: Embeds werden im Designer-Modus nicht live gerendert — du siehst sie erst auf der publishten Seite.
Im Designer im Add-Panel (links) nach Embed suchen oder unter Components → Embed finden. Element auf die Seite ziehen, an die gewünschte Stelle.
Es öffnet sich ein Code-Editor-Fenster. Embed-Code aus dem picpins-Dashboard einfügen, auf Save & Close klicken.
Publish oben rechts oder in der Vorschau (Eye-Symbol). Nach dem Publish die Webseite im Browser öffnen — entweder direkt unter [projektname].webflow.io oder, falls Custom Domain verbunden, unter deiner eigenen Domain.
Wenn das Bild nicht erscheint: Browser-Cache leeren (Strg+F5), Embed-Code im Designer doppelt prüfen.
Webflow CMS unterstützt Embed-Felder nicht direkt. Workaround: Einen Plain Text- oder Rich Text-Field nutzen, in dem du die Embed-ID oder den ganzen Code als Text speicherst, und im Template per Conditional Logic ausgeben. Oder einfacher: Auf einzelnen CMS-Detail-Pages das Embed-Element per Hand einbinden.
Für skalierbare Lösungen — viele Bilder mit jeweils eigenen picpins — wäre die Custom-Code-Variante via Page-Settings (siehe nächster Schritt) flexibler.
In den Page-Settings unter Custom Code → Before </body> tag kannst du Skripte zentral einfügen. Wenn du auf einer Seite mehrere picpins-Bilder hast, bring den <script src="...">-Tag hier einmal unter — dann reicht in den einzelnen Embed-Elementen nur noch das <div class="picpins-embed" data-token="..."></div>.
Das spart Skript-Duplikate und macht Performance-Auditing sauberer.
Hero-Bild auf der Startseite, USPs als Marker mit Detail-Tooltip, Buttons direkt zur Conversion.
Projektbild, Marker mit Rolle, Tools, Live-Link. Erzählt mehr als ein statischer Screenshot.
Webflow-E-Commerce-Shop mit Lifestyle-Page, Hotspots auf Outfit-Items mit Buy-Button.
Screenshot deines Tools, Marker auf Features mit Erklärtext und Demo-Link.
Custom Code → Before </body> packen, statt in jedem Embed-Element zu wiederholen.Ja. Das Embed-Element ist im Free-Plan voll nutzbar. Einzige Einschränkung: Im Free-Plan kannst du nur unter der .webflow.io-Subdomain publishen, keine Custom Domain. Der Embed funktioniert dort genauso.
Webflow rendert Embeds aus Sicherheitsgründen nicht live im Designer-Canvas. Du siehst nur einen Platzhalter mit dem Hinweis „Embed". Erst nach dem Publish (oder im Preview-Modus) erscheint das tatsächliche Bild.
Direkt im CMS-Field nicht (Webflow hat keinen dedizierten Embed-Field-Typ). Workaround: Embed-Element manuell auf der Detail-Page der Collection-Items platzieren — eines pro Item. Für skalierbare Setups: Custom Code im Page-Header/-Footer und Token aus dem CMS-Field per Liquid-ähnlicher Logik einsetzen.
Webflow-Embed-Elemente lassen sich beliebig oft auf einer Seite platzieren. Für besseres Performance-Handling kannst du das <script>-Tag einmal in den Page-Footer (Custom Code → Before </body> tag) ziehen und in den einzelnen Embeds nur den <div>-Container belassen.
Webflow-Sites sind generell performant. Das picpins-Skript lädt asynchron und beeinflusst den Lighthouse-Score nur minimal — meist 1–3 Punkte Performance-Differenz, vergleichbar mit einem zusätzlichen Bild.
Nichts ändert sich am Embed. Der Code ist domain-unabhängig — er funktioniert auf webflow.io genauso wie auf deiner Custom Domain. Auch SSL-Zertifikat-Wechsel oder Hosting-Migration ändern nichts am Embed.
Wenn ein Embed-Element im Designer einmal platziert ist, kann ein Content-Editor im Webflow Editor (der eingeschränkte CMS-Editor für nicht-technische Redakteure) den Code-Inhalt nicht selbst ändern. Embed-Code ändern erfordert immer Designer-Zugang.
Ja. Auf Produkt-Detail-Pages, Collection-Pages oder eigenen Lookbook-Pages funktioniert das Embed wie auf jeder anderen Webflow-Seite. Im Cart oder Checkout selbst wird es seltener Sinn ergeben — dort soll der Kunde abschließen, nicht stöbern.
Ein Embed-Element, zwei Zeilen Code, fertiges interaktives Bild. So einfach soll Webflow ja eigentlich sein.