So drehen Sie Text für einzigartige Layout-Designs in Divi (Tutorial + KOSTENLOSER Layout-Download)

Die meisten von uns sind es gewohnt, Texte von rechts nach links und von oben nach unten zu lesen. Aber wenn es um Webdesign geht, kann es eine gute Idee sein, sich von der Norm zu lösen. Eine Möglichkeit, dies zu tun, ist die Textdrehung. Das Drehen von Text auf Ihrer Website mag unpraktisch erscheinen, aber es scheint einen Platz zu haben. Tatsächlich scheint die vertikale Textausrichtung im modernen Webdesign üblich zu sein. Und obwohl die meisten Texte nur zu Designzwecken rotieren, kann argumentiert werden, dass gedrehter (oder vertikaler) Text (obwohl schwerer zu lesen) eine effektive Technik sein kann, um Aufmerksamkeit zu erregen.

Mit Divi können Sie jedes Element auf Ihrer Seite mithilfe der integrierten Transformationsoptionen drehen. In diesem Tutorial zeige ich Ihnen, wie Sie erfolgreich Text drehen, um einzigartige Layout-Designs in Divi zu erstellen. Dazu entwerfe ich ein dreiteiliges Layout, das Beispiele für gedrehten Text enthält.

Lass uns anfangen.

Vorgeschmack

Hier ist ein kleiner Vorgeschmack auf das gesamte Layout, das wir im Tutorial erstellen werden. Beachten Sie, dass es Beispiele für gedrehten Text in drei verschiedenen Abschnitten des Layouts gibt.

Laden Sie das komplette Layout aus diesem Tutorial KOSTENLOS herunter

Um das kostenlose Layout für gedrehte Textdesigns in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie das Layout herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Um das Layout auf Ihre Seite zu importieren, entpacken Sie einfach die ZIP-Datei und ziehen Sie die JSON-Datei in den Divi Builder.

Kommen wir nun zurück zum Tutorial.

Dinge, die Sie beim Drehen von Text beachten sollten

In welche Richtung sollten Sie Text drehen?

Wenn Sie Text für eine vertikale Anzeige drehen möchten, sind Sie sich möglicherweise nicht sicher, in welche Richtung der Text gedreht werden soll. Sie können den Text gegen den Uhrzeigersinn drehen, sodass der Text von unten nach oben gelesen wird. Oder Sie können den Text im Uhrzeigersinn drehen, sodass der Text von oben nach unten gelesen wird. Wenn Sie sich fragen, welche leichter zu lesen ist, bin ich mir nicht sicher, ob es eine Antwort gibt. Sie könnten versuchen, einen Hinweis aus der Ausrichtung von Buchtiteln in einem Bücherregal zu erhalten. Aber verschiedene Länder machen dies unterschiedlich (der Standard in den USA ist im Uhrzeigersinn von oben nach unten).

In diesem Tutorial werde ich den Text in den meisten Fällen gegen den Uhrzeigersinn drehen, hauptsächlich weil mir das Aussehen auf der linken Seite der Seite gefällt (vielleicht ziehe ich es vor, meinen Kopf nach links zu neigen). Aber probiere gerne verschiedene Richtungen aus.

Das Unschärfeproblem

In einigen Browsern (wie Chrome und Safari) wird der Text etwas verschwommen, wenn die Eigenschaft Transform drehen verwendet wird. Um das Problem zu beheben, können Sie entlang der X-Achse einen Transformationsursprungswert von 51 % oder 52 % hinzufügen. Dies sollte das Problem beheben.

Teil 1: Erstellen der Kopfzeile mit vertikalem Text

Für diesen ersten Teil des Layouts erstellen wir eine Kopfzeile mit vertikalem Text. Dazu drehen wir ein Klappenmodul mit den Transformationsoptionen.

Erstellen Sie zunächst einen regulären Abschnitt mit einer zweispaltigen Zeile.

Entfernen Sie vor dem Hinzufügen eines Moduls den oberen und unteren Abstand des Abschnitts, indem Sie die folgenden Abschnittseinstellungen aktualisieren:

Benutzerdefiniertes Padding: 0px oben, 0px unten

Aktualisieren Sie als Nächstes die Zeileneinstellungen wie folgt:

• Hintergrundbild: [Bild mit mindestens 1920px Breite hinzufügen]
• Spalte 1 Hintergrundfarbe: #121212

• Benutzerdefinierte Breite: 100%
• Dachrinnenbreite: 1
• Spaltenhöhen ausgleichen: JA
• Benutzerdefiniertes Padding (Desktop): 0px oben, 0px unten
• Benutzerdefinierte Polsterung (Tablet): 40% richtig
• Benutzerdefinierte Polsterung (Telefon): 30% richtig
• Spalte 1 Benutzerdefiniertes Padding (Desktop): 200 Pixel oben, 200 Pixel unten
• Spalte 1 Benutzerdefiniertes Padding (Tablet): 150 Pixel oben, 150 Pixel unten

• Box Shadow: siehe Screenshot
• Horizontale Position des Boxschattens: 0px
• Vertikale Position des Boxschattens: -100px
• Schattenfarbe: #f6454e

Erstellen des Blurb-Moduls

Jetzt können wir unseren Header-Inhalt hinzufügen. Fügen Sie dazu in der linken Spalte der Zeile ein Klappenmodul hinzu.

Aktualisieren Sie die folgenden Inhalte:

• Titel: Divi-Design
• Inhalt: Ihre Inhalte werden hier angezeigt.
• Symbol verwenden: JA
• Symbol: Glühbirne

• Symbolfarbe: #f6454e
• Symbolschriftgröße: 32px
• Textausrichtung: Mitte
• Titelüberschriftsebene: H1 (da dies die Hauptüberschrift der Seite ist)
• Titelschriftart: Muli
• Titelschriftart: TT
• Titeltextfarbe: #ffffff
• Titeltextgröße: 70 Pixel (Desktop), 50 Pixel (Tablet), 36 Pixel (Telefon)
• Textkörperfarbe: #cccccc
• Buchstabenabstand: 4px
• Breite: 500px
• Modulausrichtung: Mitte

Wichtiger Hinweis: Da wir das Klappenmodul so drehen, dass es vertikal steht, wird die benutzerdefinierte Breite von 500px zur Höhe des vertikalen Klappenmoduls. Daher ist es wichtig, dass der Inhalt in dieses Modul passt. In diesem Beispiel verwende ich eine kleine Textmenge und ändere die Größe der Titelschrift auf verschiedenen Geräten, damit der Text nicht in eine neue Zeile umbricht und das Design durcheinander bringt.

Drehen des Blurb-Moduls mit Transformationsoptionen

Um das Klappenmodul (und seinen gesamten Inhalt) zu drehen, aktualisieren Sie die folgenden Transformationsoptionen:

• Transformieren X-Achse drehen: -90deg

Sie müssen den Wert -90deg manuell eingeben. Dadurch erhalten Sie eine vertikale Ausrichtung des Inhalts von unten nach oben.

Möglicherweise stellen Sie fest, dass der Text etwas verschwommen ist, wenn Sie Chrome oder Safari verwenden. Dies kann manchmal passieren, wenn Sie die Eigenschaft transform: drehen verwenden. Um dies zu beheben, können Sie den Transformationsursprung wie folgt leicht anpassen:

• Ursprung Y-Achse transformieren: 51 %

Möglicherweise müssen Sie diesen Wert ein wenig anpassen, bis der Text klar ist. Zum Beispiel können 52 % auf einigen Designs klar aussehen.

Erstellen einer vertikalen Schaltfläche

Als Nächstes fügen wir unten in unserer Kopfzeile eine Schaltfläche hinzu, um den Benutzer daran zu erinnern, auf der Seite nach unten zu scrollen. Dann können wir die Schaltfläche mit den Transformationsoptionen drehen, genau wie beim Klappenmodul.

Erstellen Sie eine neue Zeile mit einer einspaltigen Struktur.

Bevor wir unser Schaltflächenmodul hinzufügen, aktualisieren Sie die Zeileneinstellungen wie folgt:

• Hintergrundfarbe: #f6454e
• Benutzerdefinierte Breite: 100%
• Dachrinnenbreite: 1

Fügen Sie als Nächstes der Zeile ein Schaltflächenmodul hinzu und aktualisieren Sie die folgenden Schaltflächenoptionen:

• Tastenausrichtung: Mitte
• Benutzerdefinierte Stile für Schaltfläche verwenden: JA
• Schaltflächentextgröße: 16px
• Schaltflächentextfarbe: #ffffff
• Breite des Tastenrahmens: 0px
• Tastenabstand der Buchstaben: 9px
• Schriftstärke: leicht
• Schriftstil: TT
• Schaltflächensymbol: Pfeil nach rechts

Drehen und Positionieren der Taste

Um die Schaltfläche zu drehen und zu positionieren, verwenden wir eine Kombination aus Rändern und Transformationsrotation wie folgt:

• Benutzerdefinierter Rand (Desktop): -50px oben, 50px unten, -50px links
• Benutzerdefinierter Rand (Tablet): 0 Pixel übrig
• Transformieren X-Achse drehen: 90deg

Diesmal wird die Schaltfläche um 90 Grad (im Uhrzeigersinn) gedreht, um eine vertikale Anzeige von oben nach unten für den Text zu erhalten. Dies scheint passend zu sein, da wir möchten, dass der Benutzer nach unten scrollt.

Teil 2: Textmodule drehen, um diagonale Beschriftungen zu erstellen

In diesem nächsten Abschnitt des Layouts erstellen wir drei Klappentexte mit gedrehten Textmodulen, die als Beschriftungen verwendet werden. Dies ist eine großartige Möglichkeit, um vorgestellte Artikel auf Ihrer Seite anzuzeigen.

So geht's.

Erstellen Sie einen neuen regulären Abschnitt mit einer dreispaltigen Zeile. Fügen Sie dann in der ersten Spalte ein Klappenmodul hinzu.

Wählen Sie das Glühbirnensymbol anstelle des Standardbilds.

Aktualisieren Sie dann das Klappenmodul wie folgt:

• Symbolfarbe: #f6454e
• Symbolschriftgröße: 32px
• Benutzerdefinierte Polsterung: 3vw unten, 3vw links, 3vw rechts

Aktualisieren Sie als Nächstes die Zeileneinstellungen wie folgt:

• Spalte 1 Hintergrundfarbe: #eeeeee
• Spalte 2 Hintergrundfarbe: #eeeeee
• Spalte 3 Hintergrundfarbe: #eeeeee
• Spaltenhöhen ausgleichen: JA

Dieser nächste Schritt ist entscheidend, wenn wir unser gedrehtes Textmodul-Etikettendesign hinzufügen. Wir möchten, dass der Überlauf des Textbausteins außerhalb der Spalte ausgeblendet wird. Um dies sicherzustellen, müssen wir die Eigenschaft „overflow: hidden“ als benutzerdefiniertes CSS zu jeder der Spalten hinzufügen.

Fügen Sie auf der Registerkarte "Erweitert" das folgende benutzerdefinierte CSS hinzu:

Spalte 1 Hauptelement-CSS:

overflow: hidden;

Spalte 2 Hauptelement-CSS:

overflow: hidden;

Spalte 3 Hauptelement-CSS:

overflow: hidden;

Hinzufügen und Drehen des Textmoduls als Etikett

Fügen Sie als Nächstes ein Textmodul direkt über dem Klappenmodul in Spalte 1 hinzu.

Aktualisieren Sie den Textinhalt mit dem Wort „Featured“.

Dann formatieren Sie das Textmodul wie folgt:

• Hintergrundfarbe: #f6454e
• Textschriftart: Muli
• Schriftstärke des Textes: Halbfett
• Text Textfarbe: #ffffff
• Text Buchstabenabstand: 3px
• Textzeilenhöhe: 2.5em
• Textausrichtung: Mitte

Geben Sie dem Textmodul nun eine benutzerdefinierte Breite wie folgt:

• Breite: 180px
• Modulausrichtung: links

Positionieren Sie als Nächstes das Textmodul in der oberen linken Ecke der Spalte mit den folgenden Transformationsoptionen:

• Transformieren X-Achse verschieben: -25%
• Transformieren Y-Achse übersetzen: 70%

Es ist wichtig, hier Prozentwerte zu verwenden, um das Design reaktionsschneller zu machen, sodass Sie sie manuell eingeben müssen.

Transformieren X-Achse drehen: -45deg

Beachten Sie, dass der Überlauf des Textmoduls außerhalb der Spalte verborgen ist, um das Design zu vervollständigen.

Wir müssen nur noch die Module in Spalte eins kopieren und in Spalte 2 und Spalte 3 einfügen.

Hier ist das Endergebnis.

Teil 3: Erstellen von vertikalen Überschriften für Ihre Inhalte

Dieser nächste Teil des Layouts verwendet ähnliche Techniken, um ein Textmodul als vertikale Überschrift für Ihren Inhalt zu drehen und zu positionieren. Dies ist ein nützliches Layout, um Dinge wie Dienstleistungen zu präsentieren. Außerdem zeige ich eine kreative Möglichkeit, Listen zu verwenden, um eine sehr einzigartige vertikale Überschrift zu erstellen.

So geht's.

Erstellen Sie einen neuen regulären Abschnitt mit einer einspaltigen Zeile.

Kopieren Sie dann eines der Klappenmodule in die dreispaltige Zeile im obigen Layout. Dies wird uns einen Vorsprung beim Design verschaffen.

Aktualisieren Sie dann die Klappeneinstellungen wie folgt:

• Bild-/Blurb-Platzierung: Links
• Benutzerdefinierter Rand (Desktop): 200 Pixel übrig
• Benutzerdefinierter Rand (Telefon): 0 Pixel übrig
• Benutzerdefiniertes Padding: 100px oben, 100px unten

Der linke Rand schafft den Platz, den wir für das hinzuzufügende vertikale Textmodul benötigen.

Fügen Sie dann dem Klappenmodul wie folgt einen Rahmen hinzu:

• Randbreite: 2px
• Rahmenfarbe: #eeeeee

Erstellen des Textmoduls

Nachdem der Klappentext vorhanden ist, können wir jetzt unser Textmodul hinzufügen. Erstellen Sie ein neues Textmodul und platzieren Sie es direkt über dem Klappenmodul.

Fügen Sie danach den folgenden HTML-Code in das Inhaltsfeld ein (stellen Sie sicher, dass die Textregisterkarte ausgewählt ist):

<ol>
  <li><h5>Design</h5>
    <ul>
      <li>Lorem ipsum dolor sit amet</li>
    </ul>
  </li>
</ol>

Dies ist HTML, das eine geordnete Liste (ol), ein h5-Tag und eine ungeordnete Liste (ul) verwendet. Dies ermöglicht es uns, jedes der Listenelemente und das h5 separat anzupassen, indem wir die integrierten Designoptionen von Divi innerhalb des Textmoduls verwenden.

Diese Technik kann verwendet werden, um einige erstaunliche Listendesigns zu erstellen.

Wechseln Sie als Nächstes zur Registerkarte „Design“ und aktualisieren Sie Folgendes:

• Schriftart für ungeordnete Liste: Muli
• Schriftstärke der ungeordneten Liste: Leicht
• Textgröße der ungeordneten Liste: 15px
• Ungeordneter Listenstiltyp: Keine
• Einzug der ungeordneten Listenelemente: 0.01px

• Schrift der geordneten Liste: Abril Fatface
• Textfarbe der geordneten Liste:
• Textgröße der bestellten Liste: 40px
• Buchstabenabstand der geordneten Liste: 4px
• Zeilenhöhe der bestellten Liste: 1.3em
• Art der geordneten Liste: Dezimal führende Null

• Überschrift 5 Schriftart: Muli
• Überschrift 5 Schriftstärke: ultraleicht
• Überschrift 5 Schriftstil: TT
• Überschrift 5 Textgröße: 62px

Größe, Drehung und Positionierung des Textmoduls

Nachdem wir nun das Textdesign eingerichtet haben, geben wir ihm eine benutzerdefinierte Breite. Denken Sie daran, dass die Breite des Moduls die Höhe des Moduls wird, wenn wir es drehen, um es vertikal anzuzeigen.

• Benutzerdefinierte Breite: 300px
• Modulausrichtung: links

Um den Text zu drehen, aktualisieren Sie Folgendes:

• Transformieren X-Achse drehen: -90deg (Desktop), 0deg (Telefon)

Wir müssen die Drehung für die Telefonanzeige auf 0 Grad zurücksetzen.

Aktualisieren Sie als Nächstes die Option Transform Translate:

• Transformieren X-Achse übersetzen: -10 % (Desktop), 0 % (Telefon)
• Transformieren Y-Achse übersetzen: 50 % (Desktop), 0 % (Telefon)

Die Transformationseinstellungen passen die Position des Textmoduls leicht an. Um jedoch den richtigen Abstand zu erhalten, müssen wir den negativen Leerraum ersetzen, den das Textmodul über dem Klappenmodul hinterlassen hat. Dazu müssen wir dem Textmodul wie folgt einen negativen unteren Rand hinzufügen:

• Benutzerdefinierter Rand (Desktop): -150px unten
• Benutzerdefinierter Rand (Telefon): 0 Pixel unten

Duplizieren Sie den Abschnitt und aktualisieren Sie die Startnummer der geordneten Liste

Um weitere Abschnitte dieses Layouts zu erstellen, können Sie den Abschnitt duplizieren. Die geordnete Listennummer ist weiterhin „1“. Um dies zu ändern, müssen Sie das Tag der öffnenden sortierten Liste (ol) durch Folgendes ersetzen:

<ol start="2">

Dadurch kann die Liste mit Nummer 2 statt mit 1 beginnen.

Das ist es. Wir sind alle fertig!

Endgültige Gestaltung des Layouts mit gedrehten Textdesigns

Desktop

Tablet und Telefon

Abschließende Gedanken

Zu wissen, wie man Text (oder irgendeinen Inhalt) in Divi dreht, ist eine großartige Möglichkeit, die Aufmerksamkeit auf Ihre Inhalte zu lenken. Und wenn Sie es richtig machen, kann es das Design wirklich hervorheben. Ich hoffe, dass dieses Tutorial einige Inspirationen dafür liefert, wie Sie die Textrotation für noch schönere Designs implementieren können.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!