Text Vertikal ausrichten
In diesem Beitrag schauen wir uns gemeinsam an, wie man den Text in Squarespace vertikal ausrichten kann.
Um den im Bild dargestellten Effekt zu bekommen, musst du nur folgenden Code in das Benutzerdefinierte CSS unter Design einfügen und die Data-Section-ID austauschen (siehe hier).
#id {
@media only screen and (min-width: 640px) { h1 {
width: auto !important;
writing-mode: vertical-rl;
text-orientation: sideways-right;
font-style: normal !important;
transform: rotate(180deg);
}
}
h1 {
font-style: normal !important;
}
}Zunächst verwenden wir einen @media-Block, um sicherzustellen, dass die Stilregeln nur auf Geräte angewendet werden, bei denen die Bildschirmbreite mindestens 640 Pixel beträgt (Du kannst dies auch nicht verwenden, wenn du auch auf Mobilen Geräten den Text vertikal dargestellt haben willst). Innerhalb dieses Blocks werden verschiedene Eigenschaften des H1-Elements festgelegt. Das H1-Element ist in diesem Fall der Stil des Wortes, welches wir vertikal ausrichten wollen.
Die erste Eigenschaft, die festgelegt wird, ist die Breite des Elements. Hier wird die width-Eigenschaft auf "auto" gesetzt und mit !important gekennzeichnet. Das bedeutet, dass diese Eigenschaft Priorität hat und nicht von anderen Regeln überschrieben werden kann.
Als nächstes werden die Schreibrichtung (writing-mode), die Textausrichtung (text-orientation) und die Schriftart (font-style) festgelegt. Hier wird writing-mode auf "vertical-rl" gesetzt, was bedeutet, dass der Text von rechts nach links geschrieben wird. text-orientation wird auf "sideways-right" gesetzt, was bedeutet, dass der Text auf die Seite gedreht wird. Schließlich wird font-style auf "normal" gesetzt.
Zuletzt wird die transform-Eigenschaft verwendet, um das H1-Element um 180 Grad zu drehen.
Am Schluss ist noch wichtig, auf die Mobile Ansicht Rücksicht zu nehmen. Wie oben beschrieben, bewirkt der Code keine Drehung in einer Mobilen Ansicht (< 640px). Somit muss im Mobilen Editor von Squarespace noch geprüft werden, ob hier auch alles gut aussieht.
Falls du Fragen hierzu hast, lasse mir gerne einen Kommentar unter diesem Post da!
