Benutzerdefinierten Code zu deiner Website hinzufügen

Verbessere den Stil und das Erscheinungsbild deiner Website mit fortgeschrittenen Programmierkenntnissen.

Zuletzt aktualisiert: 3. Januar 2025

Auf Squarespace kannst du ohne Programmier- oder Designkenntnisse eine Website erstellen. Wenn du einen Block hinzufügst, fügst du HTML zu deiner Website hinzu, ohne den Code selbst zu schreiben. In gleicher Weise wird das CSS deiner Website geändert, wenn du Stil-Änderungen vornimmst. Die Squarespace-Plattform ist leistungsstark und flexibel, und du kannst den Großteil der Design-Herausforderungen mithilfe von integrierten Stil-Optionen bewältigen.

Um deine Website weiter anzupassen, kannst du benutzerdefinierten Code verwenden. Wir empfehlen dir dringend, nur dann benutzerdefinierte Codes hinzuzufügen, wenn du über Programmierkenntnisse verfügst. Einige Änderungen am Code können zu Konflikten mit dem zugrunde liegenden Code deiner Website führen, weshalb es schwierig sein kann, diese Änderungen zu gestalten.

Das Hinzufügen von Code zu deiner Website ist eine erweiterte Änderung, die nicht in den Zuständigkeitsbereich des Squarespace-Supports fällt. Wenn du über Programmierkenntnisse verfügst und weitere Hilfe benötigst, besuche das Squarespace Forum. Wenn du drei aktive Websites erstellt hast, kannst du auch Squarespace Circle beitreten, einer Community von Kreativprofis, die möglicherweise in der Lage sind, technische Fragen zu beantworten. Wenn du keine Programmierkenntnisse hast, aber benutzerdefinierten Code zu deiner Website hinzufügen möchtest, solltest du einen Squarespace Expert beauftragen.

Video ansehen

Möglichkeiten zum Hinzufügen von benutzerdefiniertem Code

Squarespace unterstützt das Hinzufügen von clientseitigem Code zu deiner Website. Die Optionen hängen von deinem Abonnement ab. Alle Optionen sind während der Probephase verfügbar:

Option Tarif Unterstützter Code Über uns
Code-Block (Basis) Alle Abos

CSS
HTML
Markdown

Füge Code zu einer bestimmten Seite hinzu, um das Layout oder Design zu ändern.
Code-Block (Erweitert) Business- und E-Commerce-Abos

CSS
HTML
iFrames
JavaScript
Markdown

Füge Code zu einer bestimmten Seite hinzu, um das Layout oder Design zu ändern.
Code-Injektion Business- und E-Commerce-Abos

HTML
JavaScript

Füge Code hinzu, der sich auf deine gesamte Website oder eine einzige Seite auswirkt, z. B. das Facebook-Pixel oder Live-Chat-Dienste.
CSS-Editor Alle Abos

CSS

Ändere Schriftarten, Farben und Hintergründe.
Einbettungs-Block Alle Abos

HTML
JavaScript

Bette Inhalte von externen Websites ein, die den oEmbed-Standard verwenden.
Squarespace-Entwicklerplattform nur Version 7.0 für Business- und E-Commerce-Abos

CSS
HTML
JavaScript
Markdown

Greife auf den gesamten zugrunde liegenden Code deines Version 7.0-Templates zu, erstelle benutzerdefinierte Templates und deaktiviere die Template-Updates von Squarespace.

Squarespace unterstützt keinen serverseitigen Code, einschließlich PHP, Ruby, Ruby on Rails und SQL.

Code-Blöcke im Vergleich zu Einbettungs-Blöcken

Der Einbettungs-Block ruft Inhalte von externen Websites und Diensten ab, die den oEmbed-Standard verwenden. Du kannst den Einbettungs-Block verwenden, um grundlegende Inhalte von Drittanbietern auf deiner Website anzuzeigen, z. B. einen Facebook-Beitrag oder ein Video von einem Host, der nicht von Squarespace unterstützt wird.

Wenn du fortgeschritteneren und anpassbaren Code hast, ist der Code-Block die beste Wahl. Er ist vielseitig und kann Code in HTML und Markdown darstellen. Du kannst ihn auch verwenden, um Code-Schnipsel anzuzeigen. Es ist üblich, Code-Blöcke für code-basierte Anpassungen zu verwenden, wie:

  • Einbetten von Dokumenten über einen Dienst wie Issuu
  • Hinzufügen einer MLS-Suche

HTML, JavaScript und CSS

Hier erfährst du mehr über diese gängigen Arten von benutzerdefiniertem Code, den du zu deiner Website hinzufügen kannst.

HTML

Der Code, mit dem Inhalte zu einer Webseite hinzugefügt werden. Wenn du einen Block hinzufügst, fügst du HTML zu deiner Website hinzu.

JavaScript

Der Code, mit dem Websites interaktiv werden. JavaScript arbeitet im Verborgenen, um den Einsatz von Slideshows, Schiebereglern und Lightboxen zu ermöglichen.

CSS

CSS ist die Programmiersprache, um den Stil und das Design einer in HTML geschriebenen Webseite zu gestalten. Alle Squarespace-Templates verfügen über integriertes CSS und für jedes Template stehen verschiedene Anpassungen und Stil-Optionen zur Verfügung. Wenn du Änderungen an Website-Stilen vornimmst, änderst du das CSS deiner Website. Wenn du dich entscheidest, benutzerdefiniertes CSS für deine Website anzuwenden, verwende es sparsam.

Du kannst den CSS-Editor verwenden, um Folgendes anzupassen:

  • Schriftarten
  • Farben
  • Hintergründe

CSS sollte für Folgendes nicht verwendet werden:

  • Padding
  • Außenabstand (Margins)
  • Floats
  • Größen (Blöcke, Bilder oder Banner)
  • Positionierung

Benutzerdefiniertes CSS hat ein Limit von 128.000 Zeichen.

Die Squarespace-Entwicklerplattform (nur Version 7.0)

Wenn du ein fortgeschrittener Benutzer bist und die Version 7.0 verwendest, kannst du die Squarespace-Entwicklerplattform verwenden, um auf den zugrunde liegenden Code deines Website-Templates zuzugreifen. Diese Plattform ist für Entwickler und Design-Agenturen gedacht, damit sie unsere bestehenden Templates modifizieren und von Grund auf völlig neue Templates erstellen können.

Einfügen von benutzerdefiniertem Code ist nicht möglich

Wenn du beim Einfügen deines Codes Probleme hast, empfehlen wir dir, Tastaturkürzel zu verwenden. Klicke dafür in den Bereich, in den du etwas einfügen möchtest, und drücke dann:

PC Mac
Strg + V Befehlstaste + V

Der benutzerdefinierte Code wird nicht angezeigt

Wenn dein benutzerdefinierter Code nicht angezeigt wird, aktualisiere deinen Browser. Wenn das nicht hilft, kann es an folgenden Gründen liegen:

  • Du bist angemeldet – Code in einem Code-Block wird aus Sicherheitsgründen mitunter nicht angezeigt, wenn du angemeldet bist, selbst wenn Besucher ihn sehen können. Das passiert, wenn du versuchst, eingebettetes JavaScript über eine sichere Verbindung (https://) anzuzeigen. Um dies zu testen, besuche deine Website in einem Inkognito-Browser.
  • Der Code befindet sich auf einer Index-Seite – Dein Code wird möglicherweise nicht angezeigt, wenn du ihn zu einer Seite innerhalb eines Index hinzugefügt hast. Um dies zu testen, entferne im Seiten-Menü die Seite aus dem Index und besuche deine Website dann in einem Inkognito-Browser.
  • Du hast Ajax Loading aktiviert – Gelegentlich kann es zu Konflikten zwischen Ajax und eingebettetem benutzerdefiniertem Code, codebasierten Anpassungen, Anker-Links und URL-Umleitungen kommen. Um das Problem zu beheben, versuche, Ajax Loading zu deaktivieren.

Wenn der Code immer noch nicht funktioniert, wende dich an die Quelle des Codes, da sie mit dem Code und der Funktionsweise am besten vertraut ist. Codes von Drittanbietern fallen nicht in den Bereich des Squarespace-Supports, daher können wir dir bei keiner zusätzlichen Fehlerbehebung helfen.

Wenn du einen CORS-Fehler siehst

Du erhältst eine CORS (Cross Origin Resource Sharing)-Fehlermeldung, wenn du JavaScript verwendest, um Anfragen an einen Browser zu stellen. Alle Anfragen müssen von einer serverseitigen Anwendung stammen. Wir unterstützen keine CORS-Anfragen.

Programmierressourcen

Im Folgenden werden einige beliebte und zuverlässige Websites aufgelistet, die wir als Quelle für Tutorials, Fehlerbeseitigungen und Anleitungen empfehlen:

Hinweis

Benutzerdefinierter Code übersteigt den Rahmen unserer Kundenbetreuung. Das bedeutet, dass wir keine weitere Unterstützung bei der Einrichtung oder Fehlerbehebung bieten können. 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. CSS-Anpassungen könnten auch zu Problemen mit der Anzeige im Zusammenhang mit zukünftigen Updates unserer Plattform führen. Wir können dir in diesem Fall nicht weiterhelfen, allerdings gibt es viele andere Informationsquellen, die dich hier unterstützen können:

Footer Image
  • Hol dir Hilfe von der Community

  • Hol dir Hilfe von unserer Community zu erweiterten individuellen Anpassungen.

  • Beauftrage einen Squarespace-Experten

  • Hebe dich online von der Masse ab, indem du dir von einem erfahrenen Webdesigner oder Entwickler helfen lässt.

Benutzerdefinierten Code zu deiner Website hinzufügen