Stapeln von Typografie, um 5 einzigartige Überschriftendesigns in Divi . zu erstellen

Das Stapeln von Typografie ist eine einfache und effektive Technik, um in Divi schöne Überschriftendesigns zu erstellen. Typografie wird oft ausschließlich als abstraktes Gestaltungselement in einer Weise verwendet, die nicht wirklich zu den von Suchmaschinen gelesenen Inhalten beiträgt. Aber auch bei der Gestaltung von tatsächlichen Überschriften (h1, h2 usw.) können Sie mit ein paar Divi-Techniken kreativ werden.

In diesem Tutorial werde ich Divi verwenden, um 5 verschiedene Überschriftendesigns mit gestapeltem Text zu erstellen. Hoffentlich können Sie diese Designs als Inspiration für Ihre eigenen Überschriftendesigns verwenden.

Lass uns anfangen.

Vorgeschmack

Hier ist ein Blick auf die 5 Designs.

Entwurf Nr. 1

Entwurf #2

Entwurf #3

Entwurf #4

Entwurf #5

Einstieg

Wir werden diese Designs von Grund auf neu erstellen. Erstellen Sie also zunächst eine neue Seite, geben Sie Ihrer Seite einen Titel und stellen Sie den Visual Builder bereit. Wählen Sie die Option „Build from Scratch“ und Sie können mit dem Bauen beginnen.

Um den Prozess der Erstellung jedes der 5 Designs zu vereinfachen, werde ich Abschnitte duplizieren, um einen Vorsprung beim nächsten Design zu erhalten. Daher ist es am besten, diese Designs der Reihe nach zu erstellen, beginnend mit dem ersten.

Überschrift Design #1

Für dieses erste Design zeige ich Ihnen, wie Sie Ihren Überschriftentext vertikal stapeln und in der Mitte der Zeile zentrieren. Ich werde auch zwei Farbverlaufsschichten (eine im Abschnitt und eine in der Reihe) über dem Hintergrundbild hinzufügen, um eine ausgewogene halbtransparente weiße Überlagerung zu erhalten, die sich perfekt in weiße Seitenhintergründe einfügt. Das Ergebnis ist subtil, aber sehr einzigartig und sauber.

Bevor wir unser Textmodul hinzufügen, kümmern wir uns zunächst um die Abschnitts- und Zeileneinstellungen. Dies erleichtert später die Anpassung des Moduls erheblich.

Gehen Sie zu den Abschnittseinstellungen und aktualisieren Sie Folgendes:

Hintergrundbild hinzufügen (mindestens 1920px breit)
Hintergrundfarbe links: #ffffff
Hintergrundfarbe rechts: rgba(255,255,255,0)
Farbverlauf über dem Hintergrundbild platzieren: JA

Aktualisieren Sie als Nächstes die Zeileneinstellungen wie folgt:

Hintergrundfarbe links: rgba(255,255,255,0)
Hintergrundfarbe rechts: #ffffff
Benutzerdefinierte Breite: 100%
Benutzerdefiniertes Padding: 0px oben, 0px unten

Jetzt können wir unser Textmodul in die mittlere Spalte unserer dreispaltigen Zeile einfügen. Aktualisieren Sie dann die Textmoduleinstellungen wie folgt:

Ersetzen Sie den Scheininhalt im Inhaltsfeld durch einen h2-Header, der wie folgt „design“ lautet:

<h2>design</h2>

Aktualisieren Sie dann die restlichen Einstellungen wie folgt:

Überschrift 2 Schriftart: Kairo
Überschrift 2 Schriftstärke: Regular
Überschrift 2 Schriftstil: Großbuchstaben (TT)
Überschrift 2 Textgröße: 8vw
Breite: 58 % (Desktop), 16 % (Tablet), 18 % (Smartphone)
Modulausrichtung: Mitte
Benutzerdefinierter Rand: -10vw oben, -10vw unten

Die benutzerdefinierten Breitenwerte in Kombination mit der 8vw-Überschriftstextgröße sind der Schlüssel zu diesem Design. Die benutzerdefinierte Breite drückt den Text so zusammen, dass jeder Buchstabe übereinander gestapelt wird. Der Breitenprozentwert ändert sich auf dem Tablet drastisch, da die Spaltengröße, die das Textmodul enthält, von 1/3 auf die volle Breite wechselt. Wenn Sie den Überschriftstext auf eine Längeneinheit von vw (Ansichtsfensterbreite) einstellen, kann der Text perfekt mit der Browserfenstergröße skaliert werden.

Schließlich schließen wir das Design mit einem Rand auf der rechten und linken Seite ab.

Breite des rechten Rands: 4px
Breite des linken Rands: 4px

Hier ist das Endergebnis.

Überschrift Design #2

Für dieses nächste Beispiel werde ich das Design ein wenig optimieren, sodass der Überschriftentext in zwei Hälften geteilt und gestapelt wird, anstatt dass jeder Buchstabe einzeln gestapelt wird. Ich werde auch eine Unterüberschrift unter der Hauptüberschrift hinzufügen, um ein anderes Aussehen zu erhalten.

Fügen Sie im Inhaltsfeld die folgende h3-Überschrift hinzu:

<h3>our process</h3>

Fügen Sie dann dem Modul einen weißen Hintergrund hinzu:

Hintergrundfarbe: #ffffff

Aktualisieren Sie auf der Registerkarte "Design" Folgendes:

Überschrift 2 Textgröße: 10vw
Breite: 100 % (Desktop), 32 % (Tablet), 33 % (Smartphone)
Überschrift 3 Schriftart: Ubuntu Condensed
Überschrift 3 Textausrichtung: Mitte
Überschrift 3 Textgröße: 32px (Desktop), 20px (Tablet), 16px (Smartphone)

Aktualisieren Sie dann den Abstand für das Textmodul, damit es auf Mobilgeräten besser reagiert:

Benutzerdefinierter Rand (Tablet): -5vw oben, -10vw
Benutzerdefinierter Rand (Smartphone): -5vw oben, -12vw

Nehmen Sie nun den Hintergrundverlauf im Abschnitt und in der Reihe heraus.

Fügen Sie dann Ihrer Zeile eine kleine Auffüllung hinzu, indem Sie die folgende Zeileneinstellung aktualisieren:

Benutzerdefinierte Polsterung (Desktop): 5vw oben, 5vw unten
Benutzerdefinierte Polsterung (Tablet): 0vw oben, 0vw unten

Hier ist das Endergebnis.

Überschrift Design #3

Diesmal werden wir die Überschrift nach links versetzen und wieder jeden Buchstaben vertikal stapeln. Dann werde ich die Schriftart ändern und der Zeile einen passenden Rahmen geben, um die Modulrahmen zu ergänzen.

Duplizieren Sie den zweiten Designabschnitt und aktualisieren Sie dann die Moduleinstellungen wie folgt:

Löschen Sie zunächst die Überschrift h3 im Inhaltsfeld.

Überschrift 2 Schriftart: Ubunto Condensed
Überschrift 2 Textgröße: 6vw
Breite: 54 % (Desktop), 16,4 % (Tablet), 17,5 % (Smartphone)
Modulausrichtung: Links (Standard)

Aktualisieren Sie zur Anpassung an Mobilgeräte die folgenden Abstände:

Benutzerdefinierter Rand (Tablet): -15vw unten
Benutzerdefinierter Rand (Smartphone): -17vw unten

Gehen Sie nun zu den Zeileneinstellungen und aktualisieren Sie Folgendes, um den Abstand richtig zu machen.

Benutzerdefinierte Polsterung: 2vw oben, 2vw unten, 10vw links

Fügen Sie dann der Zeile einen Rahmen hinzu, um den Rahmen des Moduls zu ergänzen.

Breite des oberen Rands: 4px
Breite des unteren Rands: 4px

Jetzt müssen Sie nur noch über unser Modul in die linke Spalte der Zeile ziehen.

schau dir das Endergebnis an.

Überschrift Design #4

Für das letzte Überschriftendesign werde ich die gestapelte Überschrift vollständig linksbündig machen und dann etwas Farbe und einen Kühlbox-Schatteneffekt hinzufügen.

Aktualisieren Sie zuerst die Zeileneinstellungen, um den linken Abstand zu entfernen.

Aktualisieren Sie dann die Textmoduleinstellungen, um Folgendes einzuschließen:

Hintergrundfarbe: #5b7796
Textfarbe: Hell
Überschrift 2 Schriftart: Kairo
Überschrift 2 Schriftstil: Standard
Überschrift 2 Textgröße: 10vw

Text Textgröße: 5vw
Benutzerdefinierte Polsterung: 2vw oben, 2vw unten, 4vw links, 4vw rechts

Setzen Sie die Rahmenstile auf die Standardeinstellungen zurück und aktualisieren Sie dann die neuen Rahmeneinstellungen wie folgt:

Breite des rechten Rands: 0.2em
Farbe des rechten Rands: #ffffff

Breite des unteren Rands: 0.2em
Farbe des rechten Rands: #ffffff

Wie Sie vielleicht bemerken, kann der Wert von 0,2em für den Rand klein erscheinen. Dies liegt daran, dass der em-Wert auf dem Body-Font-Wert basiert, den wir speziell aus diesem Grund in 5vw geändert haben. Da wir möchten, dass sich die Rahmenbreite an die Größe unserer Überschrift anpasst, müssen wir unserem Textkörper einen Wert für die Längeneinheit vw zuweisen, der mit der Browsergröße skaliert.

Jetzt geben wir ihm einen Boxschatten für einen schönen gebrochenen Gittereffekt.

Box Shadow: siehe Screenshot
Horizontale Position des Kastenschattens: 20px
Vertikale Position des Kastenschattens: 20px
Schattenfarbe: #5b7796
Position des Boxschattens: Äußerer Schatten

Aktualisieren Sie dann die Größe des Moduls für Mobilgeräte.

Breite: 50 % (Desktop), 13 % (Tablet), 16 % (Smartphone)

Nehmen Sie als letzten Schritt die Polsterung und den Rand Ihrer Reihe heraus.

Dann sehen Sie sich das Endergebnis an.

Überschrift Design #5

Für dieses letzte Überschriftendesign werden wir einfach den Abstand ein wenig anpassen, um das Textmodul zu erweitern. Dadurch entsteht ein ähnliches Design wie in Überschrift Design #2.

Öffnen Sie zunächst das Textmodul und fügen Sie unter Ihrer h2-Überschrift folgenden Text hinzu:

<h3>our process</h3>

Aktualisieren Sie dann die Designeinstellungen wie folgt:

Überschrift 2 Schriftstil: Großbuchstaben (TT)
Breite: 94 % (Desktop), 29 % (Tablet), 29 % (Smartphone)

Aktualisieren Sie dann den Abstand wie folgt:

Benutzerdefinierter Rand: -8vw oben, -5vw unten
Benutzerdefinierte Polsterung: 4vw oben, 4vw unten

Hier ist das Endergebnis.

Responsiv

Der Trick, damit diese Designs auf Mobilgeräten gut aussehen, besteht darin, die Größe und die Ränder des Textmoduls an die Skalierung des schrumpfenden Browserfensters anzupassen. Wenn also etwas nicht richtig skaliert, müssen Sie diese Eigenschaften möglicherweise für Ihre eigenen Zwecke anpassen. So sehen die Designs auf dem Handy aus.

Abschließende Gedanken

Ich hoffe, dass die 5 Überschriftendesigns in diesem Tutorial zumindest einige gute Ausgangspunkte für Ihre eigenen Designs bieten. Wie Sie vielleicht erwarten, funktioniert das Design am besten für kürzere Überschriften (ein Wort), da der Text vertikal gestapelt wird. Aber es gibt unzählige Designelemente, die hinzugefügt werden können, um diese Designs wirklich einzigartig zu machen. Fühlen Sie sich frei, verschiedene Schriftarten, Farben und Rahmen zu erkunden, um es zu Ihrem eigenen zu machen.

Weitere Inspiration finden Sie in diesem vertikalen Textlayout. Und vielleicht möchten Sie auch lernen, seitlichen und vertikalen Text mit einem benutzerdefinierten CSS-Ansatz zu erstellen.

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

Danke schön!