Victoria Weber | Alles zu Squarespace & Online-Branding

View Original

Logo ändern auf einzelnen Seiten bei Squarespace: So geht's

Victoria Weber & Team

Manchmal kann es nötig sein, dass du dein Logo auf nur einer einzigen Unterseite änderst. Sonst aber nirgends.

Das kann vor allem dann interessant sein, wenn du mit Squarespace 7.1 arbeitest und im Header-Bereich die transparente Option (also beim Hauptmenü) gewählt hast.

Wenn du also zum Beispiel ein dunkles Logo hast und der Hintergrund ist auch dunkel, ist der Kontrast zu klein. Da kann es sich lohnen, mit einem anderen Logo zu arbeiten. 

Aber auch aus anderen Gründen kann es spannend sein, das Logo auf einzelnen Seiten auszutauschen.



Diese zwei Artikel könnten auch interessant für dich sein:



Es ist wichtig zu wissen, dass eine der beiden Anleitungen, die ich dir hier zeige, nur funktioniert, wenn du mindestens das Business-Paket bei Squarespace hast. Du musst nämlich ein paar kleine Code-Schnipsel verwenden. Aber keine Angst, ist überhaupt nicht schwierig.

Die zweite Version (nämlich per seitenweitem CSS) kannst du auch nehmen, wenn du nur das kleinste Paket bei Squarespace hast.

Legen wir los!

See this content in the original post

👉 Ständig frische Tipps für deine Squarespace-Website? Abonniere jetzt meinen Youtube-Kanal mit laufend neuen Tutorials! 🎥



Logo-Datei bei Squarespace hochladen & vorbereiten

Egal, ob du mit Squarespace 7.0 oder 7.1 arbeitest: Zunächst musst du dein alternatives Logo hochladen, also irgendwo verwenden. 

  • Setz das Bild auf irgendeiner Testseite ein und speichere sie.

  • Als Nächstes musst du die Bilder-URL herausfinden. Das machst du, indem du mit einem Rechtsklick auf das Bild klickst und “In neuem Tab öffnen” wählst.

  • Im Browser kannst du nun die URL des Bildes sehen. Sie kann in vier Varianten erscheinen und fängt zum Beipsiel mit images.squarespace-cdn.com, static.squarespace.com oder static1.squarespace.com an. Kopier auf jeden Fall die komplette URL, auch wenn sie dir super lang erscheint.

  • Wichtig: Damit du den Link herausfindest, kann es sein, dass du deine Website kurz von Privat auf “Veröffentlicht” (mit oder ohne Passwort) setzen musst, damit du den korrekten Link herausfindest. Die Bild-URL muss auf jeden Fall mit einer der Optionen aus dem vorherigen Punkt anfagen.

Für den nächsten Schritt ist es wichtig zu wissen, mit welcher Version von Squarespace deine Website aufgebaut ist.

Artikeltipp: Woher weiß ich, ob ich mit Squarespace 7.0 oder 7.1 arbeite?



Logo ändern: Anleitung für 7.0-Templates bei Squarespace

Der Code ist für die Brine-Template-Familie getestet, das heißt, bei anderen 7.0-Templates musst du ausprobieren, ob das für dich funktioniert.

Zunächst musst du das Logo, das du gerne als Alternative hättest, wie oben beschrieben als Bild hochladen und die URL herausfinden. 



Wenn du mindestens das Business-Paket hast

Dann gehst du auf der Seite, auf der das Logo geändert werden soll, in die Seiteneinstellungen. Diese findest du zum Beispiel links bei den Seiten in der Seitenübersicht, dort, wo die kleinen Pünktchen bzw. das Rädchen zu sehen ist.

Jetzt wählst du bei den Reitern das Folgende aus:



Hier kopierst du das Folgende hinein: 

<style>

.Header-branding {    

display: block;    

max-width: 100%;    

max-height: 80px;    

content: url("XXXX") !important;

    margin-left: auto;    

    margin-right: auto;

  }

</style>


Änderungen und Anpassungen für dich: 

  • Du musst XXXX mit der URL deines Logo-Bildes ersetzen, damit das Ganze funktioniert

  • Die beiden Zeilen mit “margin…” sorgen dafür, dass das Logo zentriert wird. Wenn du das nicht willst, lösch diese Zeilen

  • Du kannst unter max-width auch kleinere Werte als 100% auswählen, dort kannst du herumprobieren

  • Mit max-height stellst du die Größe ein. Hier habe ich 80 Pixel eingesetzt, du kannst aber auch jede andere Größe nehmen.

Denk daran, dass du das Logo-Austasuchen auch für mobile Ansichten machen kannst - das ist nicht automatisch mit eingestellt. Die Anleitung dazu findest du hier.


Anleitung für 7.1-Templates bei Squarespace

Der Code, den ich dir hier zeige, ist nur für die neuen 7.1-Templates geeignet. 

Du folgst dabei denselben Schritten wie oben bei 7.0 beschrieben, allerdings setzt du einen anderen Code ein:

<style> 

div.header-title-logo a {

content:url("XXXXX") !important;     

max-width: 100px;

margin-left: auto;

margin-right: auto;

}

</style>

Hier gelten die gleichen Änderungen und Einstellungen wie oben in der Anleitung für 7.0. Auch dies funktioniert nur ab dem Business-Paket von Squarespace.


Anleitung, wenn du nur das “Persönlich”-Paket bei Squarespace hast (7.0 oder 7.1)

Statt auf Seitenebene mit Code zu arbeiten, geben wir die Codeschnipsel in unsere CSS-Einstellungen auf Gesamtebene. 

Dafür folgst du diesen Schritten:

  • Finde die Collection-ID der Seite heraus, auf der du das Logo ändern möchtest. Wie du das machst, kannst du hier lesen.

  • Such dir den Code von oben heraus, je nachdem ob du Squarespace 7.0 oder 7.1 hast

  • Nimm am Anfang und am Ende <style> und </style> aus dem Code weg

  • Füge stattdessen vorne die Collection ID ein. Beim Code für 7.1. Musst du zusätzlich noch { vor den Code (aber nach der Collection ID) und } nach den Code setzen.

Schon fertig!

👉 Du startest gerade erst? Teste Squarespace hier 14 Tage lang gratis & hol dir mit dem Code VICTORIA10 10% Rabatt auf dein erstes Jahr (Das ist natürlich Werbung für meinen Liebling Squarespace)

Tipp: Ganz neu richten wir für dich als Blogleser alternativ sogar einen special 20%-Rabatt ein. → Bekommst du hier.

Falls du Fragen zur Logoänderung bei Squarespace hast, schreib sie einfach in die Kommentare!


Diese Squarespace-Tipps könnten auch interessant für dich sein:


See this content in the original post