Sprache
Hotspot-Bilder in deinen Framer-Sites — über das eingebaute Embed-Element oder eine Code-Component. Funktioniert auf Free- und Paid-Plänen.
Geeignet für Designer-Portfolios, Startup-Landing-Pages und Marketing-Sites.
Foto hochladen, Marker setzen, Tooltips füllen. Auto-Save aktiv.
Im picpins-Dashboard die zwei Zeilen HTML kopieren.
Im Designer ein Embed-Element auf den Canvas ziehen, Code einfügen, publishen.
Framer hat ein dediziertes Embed-Element für HTML+Skript-Einbettung. Wichtig: Wie bei Webflow rendert Framer Embeds im Designer-Modus nicht live — du siehst sie erst nach dem Publish.
Im Framer-Designer im Insert-Menü (links oben) nach Embed suchen. Element auf den Canvas ziehen, an die gewünschte Stelle.
Im Inspector rechts erscheint ein Code-Feld. Dort den Embed-Code aus dem picpins-Dashboard einfügen. Speichern erfolgt automatisch.
Mit Cmd+P (Mac) oder über den „Preview"-Button öffnest du eine Vorschau-Seite, in der das Embed wirklich gerendert wird. Erst hier siehst du, ob das Bild und die Marker funktionieren.
Wenn alles passt, oben rechts auf Publish klicken. Framer deployt deine Seite auf der eigenen Domain (oder Custom Domain, je nach Plan).
Wenn du Embeds an mehreren Stellen brauchst und nicht jedes Mal den Code kopieren willst: Im Insert-Menü Code Component erstellen. In der React-Component-Definition den Embed-Code als JSX einbauen.
Beispiel:
export default function picpinsEmbed(props) {
return (
<div>
<div className="picpins-embed" data-token={props.token} />
<script src="https://picpins.com/embed.js" async />
</div>
);
}Token als Prop ausspielen, Component beliebig oft platzieren mit unterschiedlichen Tokens.
Framer-CMS unterstützt Embed-Felder noch nicht direkt. Workaround: Das Embed-Element manuell in jeder Collection-Detail-Page platzieren, oder eine Code-Component nutzen, die einen token-Wert aus dem CMS-Field liest.
Project-Hero, Marker mit Rolle, Tools, Live-Link, Awards. Mehr Story als ein statischer Screenshot.
Hero-Visual mit USPs als Hotspots, Tooltip mit kurzer Erklärung und CTA.
App-Screenshot mit Markern auf Features, Tooltip mit Beschreibung und Demo-Video.
Foto vom Projektort oder Endprodukt, Hotspots mit Beteiligten, Phasen, Resultaten.
Ja, das Embed-Element ist im Free-Plan voll nutzbar. Einschränkung wie bei Webflow: Im Free-Plan kannst du nur unter der .framer.app- oder .framer.website-Subdomain publishen, keine Custom Domain.
Framer rendert Embeds aus Performance- und Sicherheitsgründen nicht live im Canvas. Du siehst einen Platzhalter mit „Embed". Erst der Preview-Modus (Cmd+P) oder die publishte Seite zeigt das echte Bild.
Ja. Framer hat im Inspector Properties für Width und Height des Embed-Elements. Setze beide auf „Fill" oder konkrete Pixelwerte pro Breakpoint (Desktop, Tablet, Mobile). Der Embed-Container passt sich an.
Framer-CMS hat noch keinen dedizierten Embed-Field-Typ. Praktisch: Embed manuell in jeder Detail-Page der Collection platzieren, oder eine Code-Component bauen, die einen Text-CMS-Field als Token nutzt.
Ja, beliebig viele. Skript wird einmal geladen, alle .picpins-embed-Container werden automatisch initialisiert. Bei vielen Embeds: Skript-Tag in eine Code-Component oder im Page-Custom-Code zentral laden.
Framer baut performante Sites — der zusätzliche Embed lädt asynchron. Lighthouse-Score wird minimal beeinflusst, vergleichbar mit einem zusätzlichen Bild auf der Seite.
Das Embed-Element selbst lässt sich in Framer animieren — Position, Opacity, Scale beim Scroll oder Hover. Die Hotspot-Interaktivität innerhalb des Embeds bleibt unabhängig davon und reagiert auf Klicks/Hover wie gewohnt.
Embeds sind domain-unabhängig. Wechsel von Framer-Subdomain zur Custom Domain ändert am Code nichts. Auch SSL-Wechsel oder Hosting-Migration sind irrelevant.
Embed-Element drauf, publishen, fertig. Bonus für Power-User: Code-Component für saubere Wiederverwendung.