Wie man gekrümmten Text auf Divi hinzufügt

Wir alle heben uns gerne von der Konkurrenz ab, und das können wir erreichen, indem wir unsere präsentieren Webseite anders. Daher kann es hilfreich sein zu wissen, wie man in Divi geschwungene Textdesigns erstellt. Diese Art von Design eignet sich zum Erstellen benutzerdefinierter Grafiken oder spezieller Header-Designs auf Divi, ohne dass ein Bildbearbeitungsprogramm verwendet werden muss. Normalerweise umfasst dies umfangreichere HTML- und CSS-Aufgaben, aber bei Divi ist die Beherrschung von CSS kein Muss, da Ihnen viele weitere integrierte Optionen zur Verfügung stehen, mit denen Sie Ihren Text ganz einfach und auf einzigartige Weise gestalten können.

In diesem Tutorial zeigen wir Ihnen, wie Sie zwei gebogene Buchstabenvorlagen erstellen, die Sie als nützliche Vorlage für Ihre eigenen Zwecke verwenden können. Bestenfalls können Sie Ihrer Box etwas Neues hinzufügen. outils Gestaltung für die Zukunft.

Lassen Sie uns beginnen.

Übersicht

Hier ist eine Übersicht über die gekrümmten Textentwürfe, die wir in diesem Lernprogramm entwerfen werden.

Um das Layout auf Ihre Seite zu importieren, extrahieren Sie einfach die Zip-Datei und ziehen Sie sie in Divi Builder.

Die Grundidee hinter dem Erstellen von gekrümmtem Text in Divi

Um gekrümmten Text mit der Methode in diesem Lernprogramm zu erstellen, sollten Sie jeden Buchstaben Ihres Textes in einem separaten Textmodul hinzufügen (am besten verwenden Sie eine Schriftart mit festem Zeichenabstand). Geben Sie dem Textbaustein eine definierte Höhe. Als nächstes müssen Sie jedem Textmodul eine zentrierte absolute Position geben, damit sie übereinander gestapelt werden.

Dies ist wichtig, da jeder Buchstabe vom selben Mittelpunkt aus gedreht werden soll. Danach können Sie die Transformationsoptionen von Divi verwenden, um jeden Buchstaben entlang der z-Achse zu drehen und den gekrümmten Text zu erstellen (verwenden Sie im Mathematikunterricht einen Kompass, um einen Kreis zu zeichnen). Beachten Sie auch, dass die Höhe jedes Textmoduls den Radius des Kreises bestimmt, wodurch auch der Umfang des Kreises und damit der Abstand zwischen den Buchstaben vergrößert wird.

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

Und hier ist ein Beispiel für dieselben Textmodule, die sich in Schritten von 20 Grad drehen.

Starten

Erstellen Sie zunächst eine neue Seite in Divi. Geben Sie Ihrer Seite dann einen Titel und stellen Sie den Divi Builder im Frontend bereit. Wählen Sie die Option "Von Grund auf neu erstellen". Jetzt können Sie loslegen!

Erstellen des kurvenförmigen Textentwurfs

Erstellen des Abschnitts und der Linie

Beginnen Sie mit der Erstellung eines regulären Abschnitts mit einer Spaltenzeile.

Bevor Sie unsere Module hinzufügen, fahren Sie fort und aktualisieren Sie die Abschnittseinstellungen wie folgt:

• Linker Hintergrundverlauf: #1e003d
• Farbverlauf Hintergrund rechts - Farbe: # 121212
• Verlaufstyp: Radial

• Hintergrundbild: [Logo-Bild ca. 100 x 100 Pixel einfügen]
• Hintergrundbildgröße: Tatsächliche Größe

Speichern Sie die Einstellungen, ändern Sie die Einstellungen für die Leitung und aktualisieren Sie Folgendes:

• Dachrinnenbreite: 1
• Breite: 100%
• Min. Höhe: 400px
• Höhe: 40vw
• Maximale Höhe: 600px
• Benutzerdefinierte Polsterung: 0px hoch, 0px runter

Fügen Sie dann dem Hauptelement der Spalte den folgenden benutzerdefinierten CSS-Code hinzu, um sicherzustellen, dass alle Textmodule horizontal zentriert bleiben:

Hauptspalte des CSS-Elements:

Anzeigen flex; rechtfertigt freudige: center;

Erstellen von Textbausteinen für jeden Buchstaben

Wir sind jetzt bereit, unser erstes Textmodul mit unserem ersten Buchstaben hinzuzufügen. Fügen Sie dazu der Zeilenspalte ein neues Textmodul hinzu und aktualisieren Sie Folgendes:

• Inhalt:d (nur der Buchstabe)
• Textschrift: Ubuntu Mono (jede monospaced Schrift reicht aus)
• Text Textfarbe: #ffffff
• Textgröße: 5vw (Desktop), 40px (Telefon)
• Orientierung des Textes: Mitte
• Min. Höhe: 200px
• Höhe: 20vw
• Maximale Höhe: 300px

Aktualisieren Sie dann den Ursprung der Transformation nach unten. Dies ist wichtig, um festzustellen, wo die Drehung des Textes erfolgt. Wir möchten, dass sich das Textmodul unten dreht. Obwohl dieses erste Textmodul nicht gedreht werden muss, ist es wichtig, es hier hinzuzufügen, damit wir diese Option übernehmen können, wenn wir das Textmodul für zusätzliche Buchstaben duplizieren.

• Ursprung der Transformation: 100% (oder darunter)

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

Andere Textbausteine ​​erstellen und drehen

Um den Rest der Buchstaben zu erstellen, duplizieren wir das Textmodul. Nachdem 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 Textbausteine ​​zu Beginn überlagert werden, ist es besser, für diese Aktualisierungen den kabelgebundenen Anzeigemodus zu verwenden.

Fahren Sie fort, duplizieren Sie das Textmodul, und aktualisieren Sie anschließend Folgendes:

• Inhalt: I
• Rotationsachse transformieren: 45 Grad

Setzen Sie den Vorgang des Duplizierens des Textmoduls fort, aktualisieren Sie das Textmodul mit einem neuen Buchstaben und erhöhen Sie die Transformationsdrehung um 45 Grad. Hier ist eine Liste der 6 verbleibenden Aktualisierungen des Textmoduls:

3-Textmodul

• Inhalt:v
• Rotationsachse transformieren: 90 Grad

4-Textmodul

• Inhalt: i
• Transformation der z-Achsendrehung: 135deg

5-Textmodul

• Inhalt: d
• Transformieren Sie die Drehung der Z-Achse: 180deg

6-Textmodul

• Inhalt: i
• Transformation der z-Achsendrehung: 225deg

7-Textmodul

• Inhalt: v
• Transformieren Sie die Drehung der Z-Achse: 270deg

8-Textmodul

• Inhalt: i
• Transformieren Sie die Drehung der Z-Achse: 315deg

Das ist alles! Überprüfen Sie nun das Endergebnis.

Endergebnis

Abschließende Gedanken

Das Erstellen von gekrümmten Textdesigns in Divi ist ein ziemlich einfacher Vorgang, sobald Sie verstanden haben, wie es funktioniert. Dieser Artikel soll Ihnen helfen, die Geometrie zu verstehen, die beim Konfigurieren von Textmodulen zum Drehen auf einer Kurve erforderlich ist. Sobald das Setup abgeschlossen ist, können Sie zusätzlich zu einigen Ausschnitten benutzerdefinierter CSS-Dateien die integrierten Designeinstellungen von Divi verwenden, um ein wenig Kreativität zu erzielen. Ich hoffe, dies gibt Ihnen Inspiration, um Ihre eigenen gebogenen Textdesigns zu erstellen.