Squarespace-CSS-Tricks zur Verbesserung Ihrer Webseite
Squarespace ist von Grund auf eine erstaunliche Plattform, mit welcher man einfach eine Webseite erstellen kann, ohne Programmierung – jedoch gibt es doch gewisse Einschränkungen. Wir zeigen Ihnen anbei ein paar nützliche CSS-Tricks zur Verbesserung.
Was ist CSS?
CSS steht für «Cascading Style Sheets», was übersetzt «gestufte Stilvorlagen» bedeutet. Es handelt sich dabei um eine Gestaltungs- und Formatierungssprache, mit der das Aussehen von HTML-Dokumenten bestimmt wird. Mittels CSS können Sie z.B. Schriftarten, Farben, Linien, Höhen und Breiten auf einer Webseite definieren.
Wie Sie benutzerdefiniertes CSS Ihrer Squarespace Webseite hinzufügen können
Gehen Sie hierfür in Ihren Editor, klicken Sie in der Menünavigation auf Design und danach finden Sie ganz unten «benutzerdefiniertes CSS». Dies ist der Bereich, in dem Sie den Squarespace-Style-Editor mit ihrem eigenen CSS überschreiben können.
Bindestriche auf den Mobilgeräten entfernen
Ein Problem, welches häufiger auftritt. Endlich sieht der Text Ihrer Webseite auf dem Desktop fantastisch aus, aber sobald er auf einem mobilen Gerät angezeigt wird, haben sie Bindestriche, die überall unerwünschte Wortumbrüche verursachen. Kommt Ihnen das bekannt vor? Zum Glück gibt es mittels CSS eine Möglichkeit, diese Umbrüche zu entfernen, ohne das Desktop-Design zu beinträchtigen. Der Code hierfür lautet:
//remove hyphens//
p, h1, h2, h3 {
-webkit-hyphens: manual !important;
-moz-hyphens: manual !important;
-ms-hyphens: manual !important;
hyphens: manual !important;
}
Unterstreichungen von Links entfernen
Bei Squarespace werden standardmässig alle Links unterstrichen. Wenn Sie zum Beispiel mehrere Links nacheinander auflisten, sieht dies unschön aus. Wenn Sie die Unterstreichungen aus den Links entfernen möchten, verwenden Sie diesen Code:
//Remove Underlines From Body Text Links and bullets//
.sqs-block-html ul a {border-bottom: none;}
.sqs-block-html p a {border-bottom: none;}
Wenn Sie im Footer (Fusszeile) die Link-Unterstreichungen ebenfalls entfernen möchten, nutzen Sie einfach folgenden Code:
//Remove links in footer//
.Footer-blocks p a { border: none !important; }
Automatisches scrollen der Google Map deaktiveren
Wenn Sie Ihren Standort via Google Map darstellen und auf der Karte runterscrollen, wir diese automatisch ein- oder ausgezoomt. Dies ist oftmals ärgerlich, da man auf der Seite eigentlich nur nach unten scrollen möchte. Gerade bei mobilen Endgeräten ist es ein grosses Problem. Mittels folgendem Code, können Sie das scrollen deaktiveren:
//disable map scroll//
.sqs-block-map {pointer-events: none;}
Kontaktieren Sie uns, falls Sie weitere Unterstützung brauchen. Wir freuen uns auf Ihre Kontaktaufnahme.
