Squarespace hat gerade die Seitenstruktur geändert.

Falls dein Layout plötzlich verrutscht ist, liegt es daran.

Du hast seit Tagen nichts an deiner Website gemacht und trotzdem sitzt der Abstand zwischen zwei Abschnitten plötzlich falsch, eine Farbfläche ist verschwunden, oder eine Linie taucht doppelt auf? Genau das ist mir gerade bei einer Website passiert, an der ich für einen Kunden arbeite, und habe mich schwer gewundert, wer wohl Änderungen bei dem CSS gemacht hat.

So bin ich dahinter gekommen, dass Squarespace im Hintergrund etwas umgebaut hat und das einige Websites betreffen, die eigenen CSS Code verwenden.

Ich daher habe etwas zusammengestellt woran du es erkennst und was du jetzt am besten tust.

Erst mal: Betrifft dich das überhaupt?

Drei Fragen. Wenn du bei einer davon Nein sagst, kannst du entspannt weiterlesen oder den Artikel einfach zumachen.

1. Nutzt du Squarespace 7.1? Wenn du noch auf 7.0 bist, ist für dich nichts passiert. Die Änderung betrifft nur 7.1.

Nicht sicher, welche Version du hast? Geh in deinen Einstellungen auf „Erweitert" → „Version". Dort steht es.

2. Liegt auf deiner Website eigener Code? Damit meine ich sogenanntes Custom CSS — die Zeilen, die du oder jemand anderes irgendwann mal in die Einstellungen kopiert hat, damit etwas so aussieht, wie es aussehen sollte. Vielleicht aus einem Blogartikel, vielleicht aus einem YouTube-Video, vielleicht von deiner Webdesignerin.

Wenn du dir sicher bist, dass da nichts liegt dann bist Du raus. Deine Seite ist nicht betroffen. Wirklich.

3. Sieht deine Website tatsächlich anders aus als vorher? Und zwar auf den normalen Seiten wie Startseite, Über mich, Leistungen, Kontakt. Nicht auf deinem Blog, im Shop oder im Portfolio. Genau das ist ein starkes Indiz. Dazu gleich mehr.

Dreimal Ja? Dann lies weiter.

Was sich geändert hat, ohne Fachbegriffe

Stell dir deine Seite als Regal vor. Darin stehen deine Abschnitte: die Kopfzeile mit dem großen Bild, der Textblock darunter, die drei Kacheln, das Kontaktformular.

Bisher standen diese Abschnitte direkt im Regal.

Seit Mitte Juli packt Squarespace die Abschnitte zusätzlich in eine Kiste und jetzt steht die Kiste im Regal. Für dich sieht alles gleich aus, da du die Kiste ja nicht siehst.

Der Code sieht die Änderung aber schon, denn viele Code-Anweisungen sagen sinngemäß: „Nimm den Abschnitt, der direkt im Regal steht." und den gibt es jetzt ja nicht mehr. Da steht jetzt eine Kiste davor. Die Anweisung findet nichts und tut nichts.

Deshalb ist deine Gestaltung an dieser Stelle verschwunden.

Welche Seiten betroffen sind: Alle normalen Seiten. Also Startseite, Über mich, Leistungen, Kontakt, Landingpages.

Welche nicht: Blog, Shop, Portfolio und Terminseiten. Die sind anders aufgebaut und bleiben, wie sie sind.

Genau das ist übrigens der beste Hinweis überhaupt: Wenn deine Startseite komisch aussieht, dein Blog aber völlig in Ordnung ist, dann ist es mit ziemlicher Sicherheit diese Änderung.

Wann das passiert: Der Umbau wird seit Mitte Juli nach und nach ausgerollt. Nicht alle Websites bekommen ihn am selben Tag. Wenn bei dir noch alles gut aussieht, heißt das also nicht zwingend, dass du durch bist.

Woran du merkst, dass es dich trifft

Die typischen Symptome:

• Abstände zwischen Abschnitten stimmen nicht mehr, meist sind sie plötzlich größer oder kleiner

• Ein farbiger Hintergrund oder eine Fläche ist verschwunden

• Eine Trennlinie fehlt — oder ist auf einmal doppelt da

• Der erste Abschnitt einer Seite sieht anders aus als geplant, oft mit einem unerwarteten Abstand nach oben

• Irgendein gestalterisches Detail erscheint einmal zu oft

Und immer: auf den normalen Seiten, nicht im Blog.

Was nicht passiert: Deine Inhalte gehen nicht verloren, deine Formulare funktionieren weiter und deine Seite bleibt online und erreichbar. Es ist also ein optisches Problem, kein technischer Ausfall.

Wo du nachschaust, ob überhaupt eigener Code auf deiner Seite liegt

Es gibt drei Stellen, an denen Code auf einer Squarespace-Website liegen kann. Schau an allen dreien nach, dann weißt du, woran du bist:

1. Für die ganze Website Im Editor die Taste „/" drücken, „Custom CSS" eintippen und auswählen. Alternativ über die Einstellungen → Website → Website-Tools → Benutzerdefiniertes CSS.

2. Für eine einzelne Seite In der Seitenübersicht auf das Zahnrad neben der Seite → Erweitert → Code-Injektion.

3. Direkt im Inhalt Ein Code-Block mitten auf der Seite. Den siehst du im Editor als grauen Kasten mit dem Hinweis, dass das Skript deaktiviert ist.

Wenn alle drei Stellen leer sind: Herzlichen Glückwunsch, du bist fein raus.

Was du jetzt tun solltest

1. Nichts löschen. Der erste Impuls ist oft, den Code einfach rauszuwerfen, damit „Ruhe ist". Mach das nicht. Ein Teil davon funktioniert wahrscheinlich noch tadellos und hält Dinge zusammen, die du gerade gar nicht auf dem Schirm hast. Wenn du alles löschst, tauschst du ein kleines Problem gegen ein größeres.

2. Sichere den Code. Markiere den kompletten Inhalt deines CSS-Felds, kopiere ihn und speichere ihn in einer Textdatei auf deinem Rechner. Das dauert 20 Sekunden und erspart dir im Zweifel einen sehr unangenehmen Nachmittag.

3. Mach Screenshots. Von jeder Stelle, die jetzt falsch aussieht. Und falls du irgendwo noch ein Bild von „vorher" hast — Angebotsunterlagen, alte Social-Posts, was auch immer — leg es daneben. Das spart demjenigen, der es repariert, sehr viel Sucherei.

4. Lass jemanden draufschauen und zwar in Ruhe. Nichts eskaliert, nichts läuft ab, niemand mahnt dich ab. Deine Seite sieht ein paar Tage lang nicht perfekt aus. Das ist unschön, aber es ist alles.

Und was du nicht tun solltest: aus Schreck über die kaputte Startseite einen kompletten Relaunch beauftragen oder das Template wechseln. Das ist so, als würdest du wegen einer klemmenden Tür umziehen.

Wie aufwendig ist die Reparatur?

In den allermeisten Fällen ist es überschaubar. Es geht darum, einzelne Stellen im vorhandenen Code anders zu formulieren und nicht darum, deine Website neu zu gestalten. Wer weiß, wonach er sucht, findet die betroffenen Stellen ziemlich schnell.

Aufwendiger wird es, wenn über die Jahre viel Code dazugekommen ist, von verschiedenen Leuten, ohne dass jemand aufgeräumt hat. Dann ist der Umbau ein guter Anlass, das mit zu machen.

Der Punkt, um den es eigentlich geht

Squarespace sagt selbst ziemlich deutlich, daß nur Code, der sich an die offiziellen Vorgaben hält, ist vor solchen Umbauten geschützt. Alles andere funktioniert, bis es eben nicht mehr funktioniert.

Das ist kein Vorwurf an irgendwen. Die meisten Websites haben irgendwann Code bekommen, weil es damals schlicht nicht anders ging. Ich habe selbst jahrelang Dinge über Code gelöst, für die es keine Einstellung gab.

Aber genau deshalb ist so ein Update ein guter Anlass, mal aufzuräumen. Denn ziemlich viel von dem, wofür man vor zwei Jahren Code brauchte, geht heute direkt in den Einstellungen, wie Abstände, Animationen, die mobile Ansicht getrennt gestalten, eigene Schriften hochladen. Squarespace hat dafür im April ein ganzes Paket an neuen Werkzeugen ausgerollt.

Jede Zeile Code, die du löschen kannst, ist eine Zeile weniger, die beim nächsten Update kaputtgehen kann. Das ist der ganze Trick an Websites, die lange halten: nicht möglichst clever gebaut, sondern möglichst wenig auf Kante.

Du weißt nicht, ob auf deiner Website eigener Code liegt — oder ob er betroffen ist? Schicke mir eine Email oder buche dir einen Termin und wir gucken uns das gemeinsam bei einem kurzen Zoom Meeting an.