So erstellen Sie geschwungene Textdesigns in Divi

Wenn Sie nach einer einzigartigen Möglichkeit suchen, Text auf einer Webseite zu präsentieren, kann es hilfreich sein, zu wissen, wie man in Divi geschwungene Textdesigns erstellt. Diese Art von Design würde zum Erstellen benutzerdefinierter Grafiken oder kreativer Header-Designs in Divi funktionieren, ohne einen Fotoeditor verwenden zu müssen. Normalerweise erfordert dies mehr vollständiges HTML und CSS, aber mit Divi, dem benutzerdefinierten CSS in minimalem Umfang, haben Sie so viele weitere eingebaute Optionen, um Ihren Text auf einzigartige Weise zu gestalten.

In diesem Tutorial zeigen wir Ihnen, wie Sie ein paar geschwungene Buchstabendesigns erstellen, die Sie als hilfreiche Vorlage für Ihre eigenen Zwecke verwenden können. Wenn überhaupt, können Sie Ihrer Design-Toolbox für die Zukunft etwas Neues hinzufügen.

Lass uns anfangen.

Vorgeschmack

Hier ist ein kleiner Vorgeschmack auf die geschwungenen Textdesigns, die wir in diesem Tutorial erstellen werden.

Laden Sie das Layout mit den Designbeispielen für Briefanimationen KOSTENLOS herunter

Um die geschwungenen Textdesigns aus diesem Tutorial 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 die Dateien 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 zum Tutorial, sollen wir?

Die Grundidee hinter dem Erstellen von gebogenem Text in Divi

Um mit der Methode in diesem Tutorial gebogenen Text zu erstellen, müssen Sie jeden Buchstaben Ihres Textes in einem separaten Textmodul hinzufügen (für beste Ergebnisse sollten Sie eine Schriftart mit Monospace verwenden). Geben Sie dem Textbaustein eine festgelegte Höhe. Dann müssen Sie jedem Textbaustein eine zentrierte absolute Position geben, damit sie alle übereinander stapeln.

Dies ist wichtig, da wir möchten, dass sich jeder Buchstabe vom selben Mittelpunkt aus dreht. Danach können Sie die Transformationsoptionen von Divi verwenden, um jeden Buchstaben entlang der Z-Achse zu drehen, um den gekrümmten Text zu erstellen (denken Sie daran, einen Zirkel im Mathematikunterricht zu verwenden, um einen Kreis zu zeichnen). Beachten Sie auch, dass die Höhe jedes Textmoduls den Kreisradius bestimmt, was auch den Umfang des Kreises und damit mehr Platz zwischen den Buchstaben erhöht.

Hier ist ein Beispiel von 8 Textmodulen, die in 45-Grad-Schritten gedreht werden, um ein perfektes Kreislayout für den Text zu erstellen. Ich habe um jedes Modul einen weißen Rahmen hinzugefügt, damit Sie die Drehung leicht sehen können.

Und hier ist ein Beispiel für dieselben Textmodule, die in 20-Grad-Schritten gedreht werden.

Einstieg

Abonnieren Sie unseren Youtube-Kanal

Erstellen Sie zunächst eine neue Seite in Divi. Geben Sie dann der Seite einen Titel und stellen Sie den Divi-Builder am Frontend bereit. Wählen Sie die Option „von Grund auf neu erstellen“. Jetzt sind Sie bereit zu gehen!

Erstellen des geschwungenen Textdesigns

Abschnitt und Zeile erstellen

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

Bevor wir unsere Module hinzufügen, aktualisieren Sie die Abschnittseinstellungen wie folgt:

• Hintergrundfarbverlauf links: #1e003d
• Hintergrund mit Farbverlauf rechts: #121212
• Verlaufstyp: Radial

• Hintergrundbild: [Bild des Logos etwa 100 x 100 Pixel einfügen]
• Hintergrundbildgröße: Tatsächliche Größe

Speichern Sie die Einstellungen und springen Sie dann zu den Zeileneinstellungen und aktualisieren Sie Folgendes:

• Dachrinnenbreite: 1
• Breite: 100%
• Mindesthöhe: 400px
• Höhe: 40vw
• Maximale Höhe: 600px
• Benutzerdefiniertes Padding: 0px oben, 0px unten

Fügen Sie dann das folgende benutzerdefinierte CSS zum Spaltenhauptelement hinzu, um sicherzustellen, dass alle Textmodule horizontal zentriert bleiben:

Spaltenhauptelement-CSS:

display:flex;
justify-content:center;

Erstellen der Textbausteine ​​für jeden Buchstaben

Jetzt können wir unseren ersten Textbaustein mit unserem ersten Buchstaben hinzufügen. Fügen Sie dazu einen neuen Textbaustein zur Zeilenspalte hinzu und aktualisieren Sie Folgendes:

• Inhalt: d (nur der einzelne Buchstabe)
• Textschriftart: Ubuntu Mono (jede Schriftart mit Monospace reicht aus)
• Text Textfarbe: #ffffff
• Text Textgröße: 5vw (Desktop), 40px (Telefon)
• Textausrichtung: Mitte
• Mindesthöhe: 200px
• Höhe: 20vw
• Maximale Höhe: 300px

Aktualisieren Sie dann den Transformationsursprung nach unten. Dies ist wichtig, um zu bestimmen, wo der Text gedreht wird. Wir möchten, dass sich das Textmodul am unteren Punkt des Moduls dreht. Auch wenn dieser erste Textbaustein nicht gedreht werden muss, ist es wichtig, ihn hier hinzuzufügen, damit wir diese Option immer dann übernehmen können, wenn wir den Textbaustein für die zusätzlichen Buchstaben duplizieren.

• Ursprung der Transformation: 100% (oder unten)

Fügen Sie dann das folgende benutzerdefinierte CSS zum Hauptelement hinzu, um dem Textmodul eine absolute Position zuzuweisen.

position: absolute !important;

Erstellen und Drehen der anderen Textmodule

Um den Rest der Briefe zu erstellen, duplizieren wir den Textbaustein. Sobald wir das Textmodul dupliziert haben, müssen wir nur noch den Buchstaben aktualisieren und dann die Drehung mit jedem neuen Modul um 45 Grad erhöhen.

Da die Textmodule im Frontend übereinander gestapelt werden, verwenden Sie am besten den Drahtmodell-Ansichtsmodus, um diese Aktualisierungen vorzunehmen.

Fahren Sie fort und duplizieren Sie das Textmodul und aktualisieren Sie dann Folgendes:

• Inhalt: ich
• Transform Rotation Z-Achse: 45deg

Fahren Sie mit dem Duplizieren des Textmoduls fort und aktualisieren Sie dann das Textmodul mit einem neuen Buchstaben und erhöhen Sie die Transformationsdrehung um 45 Grad. Hier ist eine Aufschlüsselung der verbleibenden 6 Textmodul-Updates:

Textmodul 3

• Inhalt: v
• Transform Rotation Z-Achse: 90deg

Textmodul 4

• Inhalt: ich
• Transform Rotation Z-Achse: 135deg

Textmodul 5

• Inhalt: d
• Transform Rotation Z-Achse: 180deg

Textmodul 6

• Inhalt: ich
• Transform Rotation Z-Achse: 225deg

Textmodul 7

• Inhalt: v
• Transform Rotation Z-Achse: 270deg

Textmodul 8

• Inhalt: ich
• Transform Rotation Z-Achse: 315deg

Das ist es! Sehen Sie sich nun das Endergebnis an.

Endergebnis

Anpassen der Textgröße und des Rotationsgrads für längeren Text

Wenn Sie den gebogenen Text für größere Textgestaltungsoptionen anpassen möchten, können Sie die Textgröße ändern und die Drehung jedes Textmoduls transformieren.

Stellen Sie den Drahtmodell-Ansichtsmodus bereit und verwenden Sie dann die Mehrfachauswahlfunktion von Divi, um alle Textmodule auszuwählen, die die geschwungenen Buchstaben enthalten. Klicken Sie dann auf , um die Einstellungen eines der ausgewählten Textmodule zu öffnen, um das Elementeinstellungsmodal zu öffnen, das alle ausgewählten Module gleichzeitig aktualisiert.

Ändern Sie in den Elementeinstellungen die Textgröße auf dem Desktop auf 40px.

Speichern Sie die Einstellungen und öffnen Sie dann die Einstellungen für jedes der Textmodule und aktualisieren Sie die Buchstaben und die Rotation für jedes. Belassen Sie das erste Textmodul mit einer Drehung um 0 Grad und erhöhen Sie dann die Drehung der Z-Achse um 10 Grad für jedes folgende Textmodul. Dann duplizieren Sie das Textmodul nach Bedarf für noch mehr Buchstaben. In diesem Beispiel buchstabiere ich „elegant.themes“.

Hier ist die Aufschlüsselung des Inhaltsbuchstabens und der Rotation, die für jedes Textmodul erforderlich sind.

• Textmodul 1
  • Inhalt: e
  • Transform Rotation Z-Achse: 0deg
• Textmodul 2
  • Inhalt: l
  • Transform Rotation Z-Achse: 10deg
• Textmodul 3
  • Inhalt: e
  • Transform Rotation Z-Achse: 20deg
• Textmodul 4
  • Inhalt: g
  • Transform Rotation Z-Achse: 30deg
• Textmodul 5
  • Inhalt: a
  • Transform Rotation Z-Achse: 40deg
• Textmodul 6
  • Inhalt: nein
  • Transform Rotation Z-Achse: 50deg
• Textmodul 7
  • Inhalt: t
  • Transform Rotation Z-Achse: 60deg
• Textmodul 8
  • Inhalt: .
  • Transform Rotation Z-Achse: 70deg
• Textmodul 9
  • Inhalt: t
  • Transform Rotation Z-Achse: 80deg
• Textmodul 10
  • Inhalt: h
  • Transform Rotation Z-Achse: 90deg
• Textmodul 10
  • Inhalt: e
  • Transform Rotation Z-Achse: 100deg
• Textmodul 11
  • Inhalt: m
  • Transform Rotation Z-Achse: 110deg
• Textmodul 12
  • Inhalt: e
  • Transform Rotation Z-Achse: 120deg
• Textmodul 13
  • Inhalt
  • Transform Rotation Z-Achse: 130deg

Hier das bisherige Ergebnis.

Eine einfache Möglichkeit, die Drehung des gesamten Textes anzupassen, besteht darin, eine Transformationsdrehung auf die Zeile anzuwenden. Öffnen Sie die Zeileneinstellungen und verwenden Sie das Z-Index-Einstellrad, um den geschwungenen Text an der gewünschten Stelle zu positionieren.

Hier ist das endgültige Design.

Fühlen Sie sich frei, mehr Text hinzuzufügen und den Grad der Drehung zu optimieren, um den richtigen Abstand zwischen den Buchstaben zu erhalten. Sie können auch die Höhe der Textmodule anpassen, um den Radius zu verringern oder zu vergrößern.

Abschließende Gedanken

Das Erstellen von geschwungenen Textdesigns in Divi ist ein ziemlich einfacher Prozess, wenn Sie erst einmal verstanden haben, wie es funktioniert. Dieser Artikel soll Ihnen helfen, die Geometrie zu verstehen, die beim Einrichten der Textmodule erforderlich ist, damit sie sich auf einer Kurve drehen. Und sobald Sie die Einrichtung richtig gemacht haben, können Sie neben ein paar benutzerdefinierten CSS-Schnipseln die integrierten Designeinstellungen von Divi verwenden, um ziemlich kreativ zu werden. Hoffentlich gibt Ihnen dies ein wenig Inspiration, um eigene einzigartige geschwungene Textdesigns zu erstellen.

Und wenn Sie Ihren gebogenen Buchstaben eine Animation hinzufügen möchten, lesen Sie unseren Artikel zum Animieren von Buchstaben.

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

Danke schön!