Wende benutzerdefiniertes CSS an, um Schriftarten, Farben und Hintergründe über die integrierten Optionen von Squarespace hinaus zu gestalten.

Wenn du über Programmierkenntnisse verfügst und deine Website über die integrierten Stil-Optionen hinaus anpassen möchtest, kannst du CSS-Code mit dem CSS-Editor hinzufügen.

CSS sollte nur benutzt werden, um Schriftarten, Farben und Hintergründe zu ändern. Andere CSS Änderungen könnten Ihrer Website potenziell schaden.

Ein Video anschauen

Einschränkungen

• Sieh dir unsere Empfehlungen, was du mit CSS ändern solltest und was nicht, in unseren FAQ zu benutzerdefiniertem Code an.
• In Version 7.0 wird benutzerdefiniertes CSS nicht übernommen, wenn du das Template wechselst. Wenn du zu einem vorherigen Template zurückkehrst, ist das CSS, das du hinzugefügt hast, weiterhin vorhanden.
• Das Syntaxüberprüfungssystem des CSS-Editors von Squarespace ist ein Parser, der testet, was in verschiedenen Browsern funktionieren wird. Selbst wenn dein Code auf einem CSS-Validator keinen Fehler anzeigt, wird er vom Parser gemeldet, wenn er annimmt, dass eine Zeile eventuell nicht wie vorgesehen funktioniert. Wenn du einen Syntax-Fehler siehst, überprüfe das CSS, um sicherzustellen, dass es korrekt geschrieben und formatiert ist und nichts fehlt.

Hinweis: Benutzerdefinierter Code, darunter auch CSS, ü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:

• Mach dich mit den bewährten Verfahrensweisen zum Hinzufügen von benutzerdefiniertem Code vertraut.
• Lies unsere allgemeine Anleitung für codebasierte Anpassungen.
• Besuche das Squarespace-Forum, unser Kunden- und Entwicklerforum.
• Beauftrage einen Squarespace-Experten, um benutzerdefinierten Code für deine Website zu erstellen.
• Informiere dich über unsere Premium- und Enterprise-Abonnements, um eine individuellere Lösung für dein Unternehmen zu entwickeln.

CSS-Code hinzufügen

So fügst du CSS-Code hinzu:

1. Öffne das Menü „Benutzerdefiniertes CSS“.
2. Klicke auf In neuem Fenster öffnen, um den Editor in einem erweiterbaren Fenster zu öffnen. Das Fenster wird geschlossen, wenn du das Menü „Benutzerdefiniertes CSS“ verlässt.
3. Fügen Sie Ihren Code hinzu.
4. Wenn du fertig bist, klicke auf Speichern, um deine Änderungen zu veröffentlichen.

Zeilennummern werden auf der linken Seite angezeigt, um Ihnen zu helfen, Teile Ihres Codes zu referenzieren. Syntax-Fehler erscheinen unten in rot.

Dateien hochladen (optional)

Verwenden Sie den Datei-Upload-Bereich, um Assets für benutzerdefinierte Bilder oder Schriftartendateien hochzuladen:

1. Klicke auf Benutzerdefinierte Dateien oder auf Benutzerdefinierte Dateien verwalten unter dem CSS-Editor.
2. Klicken Sie auf Bilder oder Schriftarten hinzufügen oder ziehen Sie Dateien in diesen Bereich, um Ihre Datei hochzuladen.

Tipp: Wenn sich der Datei-Upload-Bereich nicht öffnet, aktivieren Sie Pop-ups in Ihrem Browser.

Akzeptierte Dateitypen

Der Bereich für benutzerdefinierte Dateien ist Bildern und Schriftarten in den folgenden Formaten vorbehalten:

• .jpg
• .png
• .gif
• .ttf
• .otf
• .woff

.svg-Dateien sind in diesem Feld nicht zulässig.

Benutzerdefinierte Dateien verwenden

So verwenden Sie die Dateien:

1. Schreiben Sie Ihren Code bis zu dem Punkt, an dem Sie die Datei-URL zum Verweisen benötigen.
2. Lassen Sie den Cursor an der Stelle, an der Sie die URL im Code platzieren möchten.
3. Klicken Sie auf die Datei.

Der CSS Editor wird dann automatisch die direkte URL der Datei dort einfügen, sodass Sie diese in Ihren Code aufnehmen können.

Benutzerdefinierte Dateien und SSL

Je nachdem, ob SSL aktiviert ist oder nicht, wird die URL der Datei als sicher bzw. unsicher formatiert. Wenn Sie die SSL-Einstellungen Ihrer Website verändern, sollten Sie auch die URL der Datei entsprechend ändern. Bei aktivierter SSL-Option gehen Sie beispielsweise folgendermaßen vor:

1. Öffnen Sie den CSS-Editor.
2. Klicken Sie auf Manage Custom Files (Benutzerdefinierte Dateien verwalten).
3. Klicken Sie auf die Datei.
4. Ändern Sie die URL, sodass sie mit https beginnt.
5.  Klicken Sie auf Save (Speichern).