Squarespace und interaktive Bilder: Code-Block, Image-Block und Embed im Vergleich

Squarespace und der Hotspot

Squarespace ist auf saubere Templates und visuelle Konsistenz ausgelegt. Hotspots oder Imagemaps gehören nicht zum Standardrepertoire des Editors — über den Code-Block bekommst du sie trotzdem auf die Seite.

Voraussetzung: Welcher Plan, welche Version?

Squarespace gibt es in zwei Versionen: 7.0 und 7.1. In 7.1 ist der Code-Block in allen Plänen verfügbar. In 7.0 brauchst du mindestens den Business-Plan, damit Code-Embedding funktioniert. Der Personal-Plan in 7.0 erlaubt nur eingeschränkten HTML-Code. Wenn du nicht sicher bist, welche Version du nutzt: Im Editor unten rechts steht es im Hilfemenü.

Methode 1: Code-Block mit HTML-Imagemap

Im Editor an der gewünschten Stelle auf "+ Add Block" klicken, "Code" wählen — der Block landet auf der Seite. Doppelklick öffnet das Bearbeitungsfenster, Mode auf HTML stellen, Display Source deaktiviert lassen, Imagemap-Code einfügen. Block speichern, Seite veröffentlichen. Die Imagemap funktioniert sofort — bekanntes Problem auch hier: nicht responsive.

Methode 2: Image-Block mit einfachem Link

Wenn das Bild nur einen einzigen klickbaren Bereich braucht (also einen Link auf das ganze Bild), reicht der normale Image-Block. Im Block-Menü unter "Design" kannst du eine Click-Through-URL eintragen. Keine Imagemap nötig, voll responsive, kein Code. Für mehrere Hotspots reicht das natürlich nicht.

Methode 3: Embed-Block für externe Tools

Squarespace hat zusätzlich zum Code-Block einen reinen Embed-Block. Der ist gedacht für YouTube, Vimeo, Soundcloud — er akzeptiert aber auch eigene Embed-URLs. Für Hotspot-Tools wie picpins ist der Code-Block trotzdem die bessere Wahl, weil er beliebigen HTML- und Skriptcode zulässt.

Vorgehen mit picpins für Squarespace: Bild auf picpins.com anlegen, Marker und Tooltips bauen, Embed-Code kopieren. In Squarespace einen Code-Block einfügen, HTML-Modus, Code reinsetzen. Block speichern, Seite veröffentlichen. Das eingebettete Bild ist responsive, Tooltips funktionieren auf Touch-Geräten und du kannst das Projekt später ändern, ohne den Squarespace-Editor wieder zu öffnen.

Methode 4: Site-Wide Custom Code

Im Squarespace-Backend findest du unter Settings → Advanced → Code Injection die Möglichkeit, JavaScript einmalig für die ganze Seite zu laden. Das ist nützlich, wenn du ein Hotspot-Tool nutzt, dessen Skript du nicht in jedem einzelnen Code-Block neu laden willst. picpins braucht das nicht — der Embed-Code lädt das Skript selbst.

Stolperfallen bei Squarespace

Squarespace cached aggressiv über sein CDN. Wenn dein Code-Block nach dem Speichern leer wirkt, einmal Browser-Cache leeren oder die Vorschau in einem Inkognito-Fenster öffnen. Außerdem: Manche Squarespace-Templates fügen automatisch einen Padding-Container um Code-Blocks ein. Wenn dein interaktives Bild dadurch unerwünscht eingerahmt aussieht, kannst du im Site-Wide-CSS den Container überschreiben — meistens nicht nötig.

Was wir empfehlen

Für ein einziges Bild mit zwei oder drei Links: HTML-Imagemap im Code-Block. Für ernsthafte Anwendungen mit Tooltips, Bildern und mehrsprachigen Inhalten: externes Tool per Embed. Squarespace stellt die Plattform — die Hotspot-Logik selbst kommt von außen.