Füge HTML, Markdown, CSS und mehr hinzu, um deine Website über die integrierten Funktionen hinaus anzupassen.

Mit Code-Blöcken kannst du benutzerdefinierten Code zu einer Seite, einem Blogeintrag, einer Seitenleiste, einem Footer oder einem sonstigen Inhaltsbereich hinzufügen. Code-Blöcke sind eine gute Option, wenn du Widgets von Drittanbietern einbetten oder eine Seite jenseits der Möglichkeiten anderer Blöcke anpassen möchtest. Du kannst Code-Blöcke auch zum Rendern von HTML und Markdown oder zur Anzeige von Code-Schnipseln verwenden.

Näheres zur Auswahl des besten Blocks für deine benutzerdefinierten Inhalte erfährst du unter Benutzerdefinierten Code zu deiner Seite hinzufügen.

Code-Blöcke unterstützen bei allen Abonnements Klartext, HTML, Markdown und CSS-Code umgeben von <style></style>-Tags.

Das Hinzufügen von JavaScript oder iFrames zu Code-Blöcken ist eine Premium-Funktion, die im Rahmen von Business-, E-Commerce-, Professional- und Premium-Abos verfügbar ist.

Ein Video anschauen

Einen Code-Block hinzufügen

So fügen Sie einen Code-Block hinzu:

1. Bearbeite eine Seite oder einen Beitrag, klicke auf Block hinzufügen oder auf eine Einfügemarke und klicke dann auf Code. Weitere Informationen findest du unter Inhalte mithilfe von Blöcken hinzufügen.
2. Öffne den Block-Editor, indem du auf das Bleistiftsymbol auf dem Block klickst.
3. Füge deinen Code in das Textfeld ein.
4. Wenn du den Code-Block zum Anzeigen von Code-Schnipseln verwendest, aktiviere den Schalter Quellcode anzeigen.

Rabattcode eingeben

Wenn du den Code-Block zum Rendern von Code verwendest, stelle sicher, dass du im Menü Typ die Option HTML oder Markdown auswählst.

Gib oder füg den Code in das Textfeld ein. Um Code einzufügen, kopiere den Code, klicke dann auf das Feld und drücke Strg + V (Windows) oder Command + V (Mac).

Code-Blöcke, die auf CSS oder JavaScript gesetzt sind, zeigen Code standardmäßig als Text an. Wenn du CSS oder JavaScript in Code-Blöcken rendern möchtest, wähle HTML aus dem Drop-down-Menü aus. Umgib den Code für CSS mit <style> </style>-Tags. Gib für JavaScript vor und nach dem Code die Tags <script></script> ein.

Hinweis: Code-Blöcke sind auf 400 KB beschränkt, was etwa 300.000 Zeichen entspricht.

Quelle anzeigen

Wenn du den Code-Block zum Anzeigen von Code-Schnipseln verwendest, aktiviere die Option „Quellcode anzeigen“.

Dies ist insbesondere zur Anzeige von Code-Beispielen nützlich, da Code-Blöcke einzelne Code-Schnipsel automatisch auf Lesbarkeit hin formatieren. Aus diesem Grund stellen sie eine bessere Option als Text-Blöcke dar.

Hinweis: Display Source (Quellcode anzeigen) ist bei den Optionen CSS, JavaScript und Nur-Text standardmäßig aktiviert.

Vorschau von eingebettetem Code

Aus Sicherheitsgründen wird dein Code mitunter nicht angezeigt, wenn du angemeldet bist, auch wenn Besucher den Block sehen können. Wenn du Code, den du in einen Code-Block eingefügt hast, nicht sehen kannst, klicke auf Vorschau im sicheren Modus anzeigen, um das eingebettete Element zu sehen.

Fehlerbeseitigung

Wenn Sie Probleme mit Code-Blöcken haben, bedenken Sie Folgendes:

• Ihr Code könnte deshalb nicht angezeigt werden, weil Sie ihn in eine Seite im Index eingefügt haben. Um dies zu überprüfen, entfernen Sie die Seite über das Seiten-Menü aus dem Index und melden Sie sich von Ihrer Website ab.
• Durch das Laden von Ajax kann es zu Problemen mit dem benutzerdefinierten Code kommen. Deaktiviere Ajax, um zu testen, ob das Problem weiterhin auftritt.

Wenn Probleme mit dem Code-Block dich daran hindern, deine Website zu bearbeiten, kannst du über die Option Skripts in der Vorschau deaktivieren den Code bearbeiten oder entfernen.

Solltest du immer noch Probleme haben, wende dich bitte an den Herausgeber (z. B. an den Service, von dem du den Code für ein Widget erhalten hast), da man sich dort am besten mit dem jeweiligen Code und seiner Funktionsweise auskennt.

Hinweis: Codebasierte Anpassungen fallen nicht in den Rahmen unserer Kundenbetreuung. Dies bedeutet, dass wir leider nicht in der Lage sind, dir bei der Einrichtung oder der Fehlerbeseitigung von benutzerdefiniertem Code zu helfen. Außerdem können wir bei einer codebasierten Lösung die Funktionalität oder vollständige Kompatibilität mit Squarespace nicht garantieren. Dies bezieht sich etwa auf die Funktionalität in Verbindung mit Responsive Design, insbesondere auf das Erscheinungsbild auf Mobilgeräten, und auf die Kompatibilität mit allen Templates. Codebasierte Anpassungen könnten außerdem im Anschluss an zukünftige Updates unserer Plattform zu Darstellungsproblemen führen. Wir können dir in diesem Fall nicht weiterhelfen, allerdings gibt es viele andere Informationsquellen, die dich hier unterstützen können:

• Mach dich mit den bewährten Verfahrensweisen zum Hinzufügen von benutzerdefiniertem Code vertraut.
• Lies unsere allgemeine Anleitung für codebasierte Anpassungen.
• Besuchen Sie das Squarespace-Forum, unser Kunden- und Entwicklerforum.
• Beauftrage einen Squarespace-Experten, um benutzerdefinierten Code für deine Website zu erstellen.