Sie haben wahrscheinlich Blogs durchsucht, die Layouts mit gespiegeltem Text anbieten. Im Allgemeinen wird dieses Design auf Magazin-Blogs verwendet und es ist ein ziemlich interessanter Effekt, den man hinzufügen kann Divi. In diesem Tutorial schlage ich vor, dass Sie herausfinden, wie Sie umgekehrten Text in Ihr Layout einfügen können Divi.
Es muss gesagt werden, dass mit Diviist es möglich, jedes Element auf Ihrer Seite mithilfe der im 3.2-Update integrierten Transformationsoptionen zu drehen. Wir werden also ein dreiteiliges Layout entwerfen, das Beispiele für gedrehten Text enthält.
Vorschau auf das Endergebnis
Verfügbares Paket verwenden
Um dieses Layout zu erstellen, müssen Sie das gespeicherte Projekt in einer ZIP-Datei herunterladen. Sobald Sie es heruntergeladen haben, müssen Sie es nur noch in Divi Builder importieren. Sie können diese Datei direkt herunterladen, indem Sie auf den folgenden Download-Link klicken.
Herunterladen
So fügen Sie gedrehten Text zu Divi hinzu
Zunächst erstellen wir eine Kopfzeile mit vertikalem Text. Dazu drehen wir ein Blurb-Modul mithilfe der Transformationsoptionen. Wir müssen daher einen regelmäßigen Abschnitt mit einer Zeile aus zwei Spalten erstellen.
Entfernen Sie vor dem Hinzufügen des Moduls die inneren und unteren Ränder des Abschnitts, indem Sie die Einstellungen für den Innenabstand wie folgt aktualisieren: rBenutzerdefinierte Polsterung: 0 Pixel oben, 0 Pixel unten.
Dann müssen Sie die Zeilenparameter wie folgt ändern:
- Hintergrundbild: [Fügen Sie ein Bild Ihrer Wahl mit einer Breite von mindestens 1920 Pixeln hinzu]
- Spalte 1-Hintergrundfarbe: #121212
- Benutzerdefinierte Breite: 100%
- Dachrinnenbreite: 1
- Spaltenhöhen ausgleichen: JA
- Benutzerdefinierte Polsterung (Desktop): 0 Pixel oben, 0 Pixel unten
- Benutzerdefinierte Polsterung (Tablet): 40 % richtig
- Benutzerdefinierte Polsterung (Telefon): 30 % richtig
- Spalte 1 Benutzerdefinierter Abstand (Desktop): 200 Pixel oben, 200 Pixel unten
- Spalte 1 Benutzerdefinierter Abstand (Tablet): 150 Pixel oben, 150 Pixel unten
- Kastenschatten: wie im Screenshot
- Horizontale Position des Boxschattens: 0 Pixel
- Vertikale Position des Boxschattens: -100 Pixel
- Ombre-Farbe: #f6454e
Hinzufügen des Zusammenfassungsmoduls (Klappentext)
Der nächste Schritt besteht nun darin, ein Modul für den Header hinzuzufügen. Fügen Sie dazu in der linken Spalte in derselben Zeile ein Zusammenfassungsmodul hinzu.
Aktualisieren Sie das Modul wie folgt:
- Titel: BLOG-DESIGN
- Inhalt: Du kannst alles schreiben.
- Verwenden Sie das Symbol: JA
- Symbol: Herz
- Symbolfarbe: #f6454e
- Schriftgröße des Symbols: 32 Pixel
- Orientierung des Textes: Mitte
- Titel Titelebene: H1 (da es der Haupttitel der Seite ist)
- Titelschriftart: Muli
- Titelschriftart: TT
- Texttitelfarbe: #ffffff
- Text Titelgröße: 70px (Desktop), 50px (Tablet), 36px (Telefon)
- Farbe des Textkörpers: #cccccc
- Abstand der Buchstaben des Körpers: 4px
- Breite: 500px
- Ausrichtung des Moduls: Mitte
Beachten Sie, dass die benutzerdefinierte Breite von 500 Pixel mit der Höhe des vertikalen Layoutmoduls übereinstimmt, da wir das Layoutmodul so drehen, dass es vertikal ist. Daher ist es wichtig, dass die Inhalt passt in dieses Modul. In diesem Beispiel verwenden wir eine kleine Textmenge und skalieren die Titelschriftart auf verschiedenen Geräten, damit der Text das Design nicht umbricht oder stört.
So drehen Sie das Modul
Um das Zusammenfassungsmodul (und alle seine) zu drehen Inhalt), aktualisieren Sie die Transformationsoptionen wie folgt:
- Rotation X-Achse transformieren: -90 Grad
Sie müssen den -90-Grad-Wert manuell eingeben. Dadurch erhalten Sie eine vertikale Ausrichtung des Inhalts von unten nach oben.
Fügen Sie eine vertikale Schaltfläche hinzu
Fügen wir nun 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 mithilfe der Transformationsoptionen drehen, wie wir es für das Zusammenfassungsmodul getan haben.
Erstellen Sie eine neue Zeile mit einer einspaltigen Struktur.
Bevor Sie unser Schaltflächenmodul hinzufügen, aktualisieren Sie die Zeilenparameter wie folgt:
- Hintergrundfarbe: #f6454e
- Benutzerdefinierte Breite: 100%
- Dachrinnenbreite: 1
Fügen Sie als Nächstes ein Schaltflächenmodul zur Zeile hinzu und aktualisieren Sie die folgenden Schaltflächenoptionen:
- Ausrichtung der Tasten: Mitte
- Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
- Schaltflächentextgröße: 16px
- Knopftextfarbe: #ffffff
- Breite des Schaltflächenrandes: 0px
- Abstand der Tastenbuchstaben: 9 Pixel
- Schriftstärke: leicht
- Schriftstil: TT
- Schaltflächensymbol: Pfeil nach rechts
Tastendrehung und -positionierung
Um die Schaltfläche zu drehen und zu positionieren, verwenden wir eine Kombination aus Rändern und transformieren die Drehung wie folgt:
- Benutzerdefinierter Rand (Desktop): -50 Pixel oben, 50 Pixel unten, -50 Pixel links
- Benutzerdefinierter Rand (Tablet): 0 Pixel übrig
- X-Achsendrehung transformieren: 90 Grad
Diesmal wird der Knopf um 90 Grad gedreht, um eine vertikale Anzeige des Textes von oben nach unten zu erhalten. Dies scheint in Ordnung zu sein, da wir möchten, dass der Benutzer nach unten scrollt.
