So änderst du bei Squarespace dein Logo für mobile Geräte
Findest du, dass dein Website-Logo auf dem Smartphone nicht besonders viel hermacht? Ist es zu groß oder zu klein? Oder hättest du am liebsten ein ganz anderes Logo auf deinen mobilen Seiten?
In diesem Artikel zeige ich dir, wie du dein mobiles Logo ganz einfach optimieren kannst. Und zwar entweder:
ein ganz anderes Logo für mobile Geräte verwenden (z.B. kleines Symbol statt volles Logo), oder aber
einfach die Größe deines Logos für deine mobile Seite anpassen.
Und zwar findest du hier sowohl eine Anleitung für Squarespace 7.0 als auch für Squarespace 7.1.
Los geht’s!
👉 Ständig frische Tipps für deine Squarespace-Website? Abonniere jetzt meinen Youtube-Kanal mit laufend neuen Tutorials! 🎥
Warum du dein Logo für deine mobile Squarespace-Website optimieren solltest
Nur die allerwenigsten Desktop-Logos sehen in genau der gleichen Größe genau gleich gut auf Smartphones aus. Oder auf Tablets, wenn man es so will.
Deswegen ist es eine gute Idee, dein Logo für die verschiedenen Geräte zu optimieren.
Bei Squarespace kannst du das aktuell ziemlich einfach per CSS lösen (Squarespace 7.0) oder direkt in den Einstellungen (Squarespace 7.1).
Artikeltipp: So stylst du deine Navigation bei Squarespace
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.
Anderes Logo für mobile Ansichten verwenden (Squarespace 7.1)
Im Vergleich zur alten Version ist es hier deutlich einfacher, ein eigenes Logo zu verwenden. Und zwar geht das so: Du gehst oben auf den Header-Bereich und wählst da die Einstellungen.
Dann gehst du rechts beim Fenster, das sich öffnet, auf diesen Bereich:
Oben siehst du drei Symbole - klick auf das Rechte davon, dass für Smartphones und mobile Geräte steht.
Mobiles Logo bei Squarespace 7.1 ändern
Wenn du in diesem Bereich bist, kannst du das Menü ändern - aber auch ein alternatives Logo nur für mobile Ansichten hochladen. Dies geht wiederum, wenn du nach Links (zum Globus) zu den globalen Einstellungen gehst.
Und schon bist du fertig!
Option 2: Die Lösung für Squarespace 7.0
Hier zeige ich dir eine Lösung, die für alle Brine-Templates von Squarespace getestet ist. Das geht nicht ganz so leicht wie bei Squarespace 7.1, ist aber auch kein Problem.
So zeigst du dasselbe Logo in kleiner (oder größer!) an
Bei meiner eigenen Website war es so, dass das orginal Logo auf dem Desktop eine - wie ich fand - ganz gute Größe hatte.
Die Logogröße der Desktopversion kannst du in den Stil-Einstellungen unter Design > Website-Stil bei Squarespace einstellen. Dort ist aktuell allerdings nur eine Maximaleinstellung von 320 Pixeln möglich.
Es gibt aber auch Logos, die einfach größer sein müssen, um richtig zur Geltung zu kommen. Wenn du willst, dass dein Logo größer als 320 Pixel breit dargestellt wird, brauchst du dafür einen kleinen Trick.
Geh im Hauptmenü bei Squarespace zu Design > Benutzerdefiniertes CSS und copy-paste den folgenden Schnipsel:
//Logogröße .Header-branding-logo { max-width: 380px !important; }
Zack, fertig! Jetzt musst du nur noch gucken, welche Größe du möchtest. 380 Pixel ist hier voreingestellt, du kannst die Zahl aber zu dem Wert ändern, der gut aussieht.
Probier am besten ein bisschen herum und ändere die Zahl vor “px” (steht für Pixel) so sehr, bis sie perfekt passt.
Anleitung für dein mobiles Logo (Squarespace 7.0)
So viel also zur Desktop-Version des Logos auf meiner Website. Damit war ich zufrieden. Aber die mobile Version - also das, was standardmäßig für die mobile Version herauskam - war mir einfach zu klein.
Um das zu ändern, genügt es, dass du bei Squarespace im Hauptmenü unter Design > Benutzerdefiniertes CSS den folgenden Code eingibst:
//Logogröße für mobile Geräte
.Mobile-bar-branding-logo {
max-height: 20px;
min-height: 20px;
width:auto !important;
}
Die Größe - also in diesem Fall 20 Pixel - kannst du dann frei wählen und gucken, was dir am besten passt. Du kannst auch zwei unterschiedliche Werte eingeben, also das Minimum und das Maximum.
Für meine Seite sah das so aus:
So sah es vorher per Standard aus. Das Logo wirkte irgendwie zu klein und war an manchen Handy-Bildschirmen zu schwer zu entziffern.
Schon besser! Obwohl ich die Größe nur minimal geändert habe, finde ich, dass mein Name plötzlich deutlich besser lesbar ist.
So verwendest du ein komplett anderes Logo für mobile Geräte
Willst du, dass auf dem Handy ein ganz anderes Logo als an Desktop-Bildschirmen gezeigt wird?
Das kann zum Beispiel sinnvoll sein, wenn du ein breites oder sehr großes Logo verwendest. Du willst schließlich nicht den ganzen Smartphone-Bildschirm mit einem riesigen Logo zupflastern.
Wenn dein Hauptlogo also beispielsweise ein Eichhörnchen mit dem Schriftzug “Eichhörnchen & Bieber Webdesign” ist, könnte es eine Idee sein, dass du nur das Eichhörnchen-Icon zeigst.
Auch das ist bei Squarespace kein Problem!
Allerdings musst du drei kleine Schritte gehen. Diese sind:
Klick im Squarespace-Hauptmenü links auf “Seiten”. Dann gehst du zu “Nicht verlinkt” und klickst auf +.
2. Jetzt wählst du bei Link “Datei” aus und lädst deine gewünschte alternative Logo-Datei hoch (als jpeg oder png):
Wichtig ist, dass du NUR auf “Datei hochladen” klickst und dann wartest, bis der Dateiname zu sehen ist. Dann notierst du dir den Dateinamen (z.B. logo.png) und klickst oben links im Eck auf Schließen.
3. Als nächstes gehst du im Squarespace-Hauptmenü wieder unter Design > Benutzerdefiniertes CSS. Hier gibst du jetzt folgenden Code ein (nachdem du ihn angepasst hast):
//Anderes Logo auf mobilen Geräten .Mobile-bar-branding-logo { content: url("https://deinewebsite.squarespace.com/s/logo.png") !important; max-height: 52px; min-height: 52px; width:auto !important; }
Was du ändern musst:
Ersetze deinewebsite.squarespace.com mit der eingebauten Domain xxxxx.squarespace.com, die du unter Einstellungen > Domains einsehen kannst. (Das xxxxx musst du also damit ersetzen)
Ersetze den Teil hinter /s/ mit dem Namen des eben hochgeladenen Logos, z.B. “logo.png”
Setze statt “52” die Pixelgröße ein, die dein mobiles Logo haben soll. Du solltest hier natürlich auch ein bisschen herum probieren.
Et voilà! Fertig ist dein top optimiertes mobiles Logo.
Falls du Fragen dazu hast, schreib sie unten in die Kommentare.
Weitere hilfreiche Squarespace-Artikel für dich: