Wie Sie Ihre Schlagzeile mit den Animationseinstellungen von Divi zum Pop machen

Ihre Überschrift ist normalerweise das Erste, was die Leute lesen, wenn sie Ihre Website besuchen. Neben einer wirklich guten Überschrift ist es auch wichtig, dass die Leute auffallen und lesen, was immer Sie ihnen zeigen. Schlagzeilen bleiben aufgrund ihrer Größe und zentralen Position im Heldenbereich normalerweise nicht unbemerkt, aber wenn Sie noch einen Schritt weiter gehen und die Schlagzeile buchstäblich zum Pop machen möchten, ist dieses Tutorial genau das Richtige für Sie.

Wir werden die Animationseinstellungen von Divi kombinieren, um eine Überschrift zu erstellen, die auffällt und die Aufmerksamkeit Ihrer Besucher auf sich zieht. Wir teilen die Überschrift in 5 Teile auf und erstellen einen Flash-Effekt, der Ihre Besucher dazu bringt, der Bewegung zu folgen und zu lesen, was geteilt wird.

Lasst uns anfangen!

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis auf verschiedenen Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Beginnen wir mit der Neuerstellung!

Neuen Abschnitt hinzufügen

Hintergrundfarbe

Beginnen wir mit dem Erstellen! Erstellen Sie eine neue Seite und fügen Sie einen regulären Abschnitt hinzu. Öffnen Sie die Abschnittseinstellungen und ändern Sie die Hintergrundfarbe.

• Hintergrundfarbe: #ededed

Abstand

Gehen Sie dann zu den Abstandseinstellungen des Abschnitts und fügen Sie eine benutzerdefinierte untere Polsterung hinzu.

• Untere Polsterung: 10vw

Zeile 1 hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Hintergrundfarbe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und ändern Sie die Hintergrundfarbe der Zeile.

• Hintergrundfarbe: #c9c9c9

Größe

Gehen Sie als nächstes zu den Größeneinstellungen und lassen Sie die Zeile die gesamte Breite des Bildschirms einnehmen.

• Machen Sie diese Zeile in voller Breite: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1

Abstand

Entfernen Sie auch die standardmäßige obere und untere Auffüllung der Zeile.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Textmodul #1 hinzufügen

Inhalt hinzufügen

Zeit, Module hinzuzufügen! Das erste Modul, das wir brauchen, ist ein Textmodul. Geben Sie den ersten Teil Ihrer Überschrift mit dem Absatztextstil in das Inhaltsfeld ein.

Hintergrundfarbe

Gehen Sie dann zu den Hintergrundeinstellungen des Moduls und fügen Sie eine Hintergrundfarbe hinzu.

• Hintergrundfarbe: #c9c9c9

Texteinstellungen

Ändern Sie auch die Texteinstellungen im Design-Tab.

• Textschriftart: Didact Gothic
• Schriftstärke des Textes: Fett
• Textfarbe: #000000
• Textgröße: 10vw
• Textzeilenhöhe: 0,9em
• Textausrichtung: Mitte

Abstand

Und erstellen Sie die gewünschte Form mit benutzerdefinierten oberen und unteren Polsterungen.

• Obere Polsterung: 10vw
• Untere Polsterung: 3vw

Animation

Zu guter Letzt werden wir eine Animation hinzufügen. Es ist wichtig sicherzustellen, dass die Animationsdauer und die Startopazität null sind. Dadurch wird das Textmodul mit einem Flash-Effekt angezeigt.

• Animationsstil: Ausblenden
• Animationswiederholung: Einmal
• Animationsdauer: 0ms
• Animationsverzögerung: 1000ms

Textmodul x4 klonen

Nachdem Sie das erste Textmodul geändert haben, können Sie das Modul je nach Länge Ihrer Überschrift beliebig oft klonen. Für jeden Teil der Überschrift, der mit einem Flash-Effekt angezeigt werden soll, benötigen Sie einen eigenen Textbaustein. Für dieses Beispiel benötigen wir 4 zusätzliche Module.

Duplikat Nr. 1 ändern

Inhalt

Ändern Sie die Kopie des ersten Duplikats.

Hintergrundfarbe

Zusammen mit der Hintergrundfarbe.

• Hintergrundfarbe: #5900ff

Textfarbe

Ändern Sie die Textfarbe in Weiß.

• Textfarbe: #ffffff

Animation

Und erhöhen Sie die Animationsverzögerung in den Animationseinstellungen. Auf diese Weise haben Ihre Besucher genügend Zeit, das vorherige Textmodul zu lesen, bevor dieses angezeigt wird.

• Animationsverzögerung: 1500 ms

Duplikat Nr. 2 ändern

Inhalt

Ändern Sie als nächstes den Inhalt des zweiten Duplikats.

Hintergrundfarbe

Zusammen mit der Hintergrundfarbe.

• Hintergrundfarbe: #ffb200

Textfarbe

Und die Textfarbe auch.

• Textfarbe: #ffffff

Animation

Auch hier stellen wir sicher, dass die Animationsverzögerung höher ist als die Animationsverzögerung, die für die beiden vorherigen Module verwendet wurde. Wir lassen 500 ms dazwischen, damit die Leute genug Zeit zum Lesen haben.

• Animationsverzögerung: 2000 ms

Duplikat Nr. 3 ändern

Inhalt

Fahren Sie fort, indem Sie den Inhalt des dritten Duplikats ändern.

Animation

Zusammen mit der Animationsverzögerung.

• Animationsverzögerung: 2500 ms

Duplikat Nr. 4 ändern

Inhalt

Weiter zum nächsten und letzten Duplikat. Ändern Sie den Inhalt.

Hintergrundfarbe

Zusammen mit der Hintergrundfarbe.

• Hintergrundfarbe: #000000

Textfarbe

Ändern Sie auch die Textfarbe.

• Textfarbe: #3a3a3a

Animation

Und erhöhen Sie die Animationsverzögerung in den Animationseinstellungen.

• Animationsverzögerung: 3000ms

Fügen Sie jedem Textmodul mit Ausnahme des ersten einen negativen Rand hinzu

Nachdem Sie alle Textmodule angepasst haben, können Sie eine Überlappung erstellen. Um diese Überlappung zu erzeugen, fügen wir jedem der doppelten Textmodule einen negativen oberen Rand hinzu. Mit anderen Worten, wir stellen sicher, dass alle Module, die nach dem ersten Modul kommen, über diesem ersten Textmodul erscheinen.

• Obere Marge: -21.98vw

Zeile transformieren

Transformieren Übersetzen

Fahren Sie fort, indem Sie die gesamte Zeile transformieren, beginnend mit den Transformationsübersetzungseinstellungen.

• Unten: -35vw

Transformieren Drehen

Ändern Sie auch die Rotationswerte der Transformation.

• Links: 320 Grad

Zeile 2 hinzufügen

Spaltenstruktur

Auf in die zweite Reihe! Nachdem wir nun den Headline-Effekt eingerichtet haben, können wir mit dem Hinzufügen der verbleibenden Module beginnen. Fügen Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzu:

Größe

Ohne noch Module hinzuzufügen, öffnen Sie die Zeileneinstellungen und lassen Sie die Zeile in den Größeneinstellungen die gesamte Breite des Bildschirms einnehmen:

• Machen Sie diese Zeile in voller Breite: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1

Abstand

Entfernen Sie als nächstes die standardmäßige obere Auffüllung der Zeile.

• Obere Polsterung: 0px

Titeltextmodul zu Spalte 2 hinzufügen

H1-Inhalt hinzufügen

Zeit, Module hinzuzufügen! Das erste Modul, das wir brauchen, ist ein Titel-Textmodul. Fügen Sie H1-Inhalte Ihrer Wahl hinzu.

H1-Texteinstellungen

Gehen Sie dann zur Registerkarte Design und ändern Sie die H1-Texteinstellungen.

• Überschrift Schriftart: Didact Gothic
• Schriftstärke der Überschrift: Fett
• Überschriftstextgröße: 1,8 vw (Desktop), 3,8 vw (Tablet), 4 vw (Telefon)

Abstand

Fügen Sie den Abstandseinstellungen einige benutzerdefinierte Randwerte hinzu.

• Obere Marge: -4vw
• Unterer Rand: 2vw
• Linker Rand: 30vw
• Rechter Rand: 30vw (Desktop), 15vw (Tablet & Telefon)

Trennmodul zu Spalte 2 hinzufügen

Sichtweite

Das nächste Modul, das wir brauchen, ist ein Divider-Modul. Stellen Sie sicher, dass die Option "Teiler anzeigen" aktiviert ist.

• Teiler anzeigen: Ja

Farbe

Gehen Sie dann zur Registerkarte Design und ändern Sie die Teilerfarbe.

• Farbe: #000000

Größe

Ändern Sie auch die Größeneinstellungen.

• Teilergewicht: 8px
• Breite: 7%

Abstand

Zusammen mit den Abstandseinstellungen.

• Unterer Rand: 1vw
• Linker Rand: 30vw

Beschreibungstextmodul zu Spalte 2 hinzufügen

Inhalt hinzufügen

Das nächste Modul, das wir brauchen, ist ein weiteres Textmodul. Geben Sie einen Inhalt Ihrer Wahl ein.

Texteinstellungen

Ändern Sie dann die Texteinstellungen auf der Registerkarte Design.

• Textgröße: 0,8 vw (Desktop), 1,3 vw (Tablet), 1,6 vw (Telefon)
• Textzeilenhöhe: 2.2em

Abstand

Fügen Sie auch einige benutzerdefinierte Randwerte in den Abstandseinstellungen hinzu.

• Unterer Rand: 3vw
• Linker Rand: 30vw
• Rechter Rand: 30vw (Desktop), 15vw (Tablet & Telefon)

Schaltflächenmodul zu Spalte 2 hinzufügen

Tasteneinstellungen

Weiter zum nächsten und letzten Modul, das ein Button-Modul ist. Fügen Sie eine Kopie Ihrer Wahl hinzu und ändern Sie die Schaltflächeneinstellungen entsprechend:

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Tastentextgröße: 1vw (Desktop), 1,5vw (Tablet), 2vw (Telefon)
• Breite des Tastenrahmens: 0px
• Schaltflächenschriftart: Poppins
• Schriftdicke: fett
• Schriftstil: Großbuchstaben

Abstand

Gehen Sie zu den Abstandseinstellungen und fügen Sie einige benutzerdefinierte Werte für Rand und Abstand hinzu, und Sie sind fertig!

• Linker Rand: 30vw
• Obere Polsterung: 1vw
• Untere Polsterung: 1vw
• Linke Polsterung: 3vw
• Rechte Polsterung: 3vw

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie Ihre Überschrift nur mit den integrierten Optionen von Divi zum Vorschein bringen. Dies ist eine großartige Technik, um die Aufmerksamkeit Ihrer Besucher zu erregen und Ihre Botschaft auf originelle Weise zu kommunizieren. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!