Erstellen von animierten Titeln mit den Hover-Optionen von Divi

Jede Woche stellen wir Ihnen neue und kostenlose Divi-Layoutpakete zur Verfügung, die Sie für Ihr nächstes Projekt verwenden können. Für eines der Layout-Pakete teilen wir auch einen Anwendungsfall, der Ihnen hilft, Ihre Website auf die nächste Stufe zu heben. Diese Woche zeigen wir Ihnen im Rahmen unserer laufenden Divi-Designinitiative, wie Sie mit den Hover-Optionen von Divi und dem Fahrschul-Layout-Paket animierte Titel erstellen. Dies ist ein großartiger Ansatz, um verschiedene Teile Ihrer Kopie ins Rampenlicht zu rücken und Aktionen auszulösen.

Lasst uns anfangen!

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis.

Landing Page der Fahrerschule hochladen

Um dieses Tutorial zu erstellen, verwenden wir die Landingpage des Driver School Layout Packs. Also fahren Sie fort und fügen Sie eine neue Seite hinzu, aktivieren Sie den Visual Builder und wählen Sie die Zielseite aus Ihren vorgefertigten Layouts.

Animierten Titel 1 erstellen

Abschnittsverlaufshintergrund ändern

Beginnen wir mit dem Bau des ersten Beispiels! Wir fügen diesen animierten Titel dem Heldenbereich unserer Seite hinzu. Aber bevor wir dorthin gelangen, öffnen Sie die Einstellungen Ihres Heldenbereichs und ändern Sie die Farben der Hintergrundüberlagerung des Verlaufs.

• Farbe 1: rgba(0,0,0,0.94)
• Farbe 2: rgba(12,12,12,0.63)

Entfernen Sie die zwei letzten Zeilen im Heldenbereich

Fahren Sie fort, indem Sie die beiden letzten Reihen im Abschnitt entfernen.

Teilerausrichtung ändern

Wir behalten die Reihe, die noch da ist. Das einzige, was wir ändern müssen, ist die Modulausrichtung des Divider-Moduls.

• Modulausrichtung: Mitte

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie direkt unter der vorherigen Zeile fort und fügen Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzu:

Abstand

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

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

Textmodul zur Spalte hinzufügen

Inhalt hinzufügen

Das einzige Modul, das wir benötigen, ist ein Textmodul. Wir verwenden zwei verschiedene Texttypen: eine Überschrift und einen Absatzlink. Fahren Sie fort und fügen Sie Ihre gewünschte Kopie hinzu und stellen Sie sicher, dass die Kopie in zwei Zeilen erscheint, indem Sie in der Mitte jedes Satzes Umschalt + Eingabe drücken.

Standardhintergrundfarbe

Gehen Sie dann zu den Hintergrundeinstellungen und fügen Sie dem Textmodul eine Standardhintergrundfarbe hinzu.

• Hintergrundfarbe: rgba(255,255,255,0)

Hintergrundfarbe schweben

Ändern Sie die Hintergrundfarbe beim Schweben.

• Hintergrundfarbe: #ffa53b

Standardtexteinstellungen

Ändern Sie als Nächstes die Textausrichtung in den allgemeinen Texteinstellungen.

• Textausrichtung: Mitte

Standardeinstellungen für Linktext

Wechseln Sie zum Link-Tab und nehmen Sie einige Änderungen am Erscheinungsbild der Link-Kopie vor.

• Link-Schriftstärke: Ultra Bold
• Link-Schriftart: Kursiv, Großbuchstaben, Unterstrichen
• Link-Unterstreichungsfarbe: rgba(255,255,255,0.3)
• Linktextgröße: 0px
• Höhe der Verbindungslinie: 0em

Hover-Link-Einstellungen

Nehmen Sie mit der Maus als nächstes einige Änderungen vor.

• Linktextgröße: 40px
• Höhe der Verbindungslinie: 1.8em

Standardeinstellungen für Überschriftentext

Nehmen Sie auch einige Änderungen an den Einstellungen für den Überschriftentext vor.

• Schriftstärke der Überschrift: Ultra Bold
• Überschrift-Schriftart: Großbuchstaben
• Textfarbe der Überschrift: #ffffff
• Überschriftstextgröße: 70px (Desktop), 40px (Tablet), 30px (Telefon)
• Höhe der Überschriftslinie: 1,4 em

Hover-Überschrift-Texteinstellungen

Mit einigen kleinen Optimierungen beim Schweben.

• Überschriftstextfarbe: rgba(255,255,255,0)
• Überschriftstextgröße: 0px

Standardabstand

Fahren Sie fort, indem Sie zu den Abstandseinstellungen gehen und einige benutzerdefinierte Abstandswerte hinzufügen.

• Obere Polsterung: 40px
• Untere Polsterung: 0px
• Linke Polsterung: 20px
• Rechte Polsterung: 20px

Hover-Abstand

Die benutzerdefinierten Padding-Werte unterscheiden sich beim Hover etwas.

• Obere Polsterung: 40px
• Untere Polsterung: 40px
• Linke Polsterung: 20px
• Rechte Polsterung: 20px

Grenze

Wir verwenden auch eine Grenze.

• Rahmenbreite: 10px
• Rahmenfarbe: #ffa53b

Übergänge

Und fügen Sie einen schnellen Übergang hinzu, indem Sie die Übergangsdauer auf der Registerkarte „Erweitert“ ändern.

• Übergangsdauer: 0ms

Animierten Titel erstellen #2

Neuen Abschnitt hinzufügen

Hintergrundfarbe

Auf zum nächsten Beispiel! Fügen Sie direkt unter dem Heldenbereich einen neuen Abschnitt hinzu und fügen Sie eine Hintergrundfarbe hinzu.

• Hintergrundfarbe: #effef

Abstand

Gehen Sie dann zu den Abstandseinstellungen und spielen Sie mit den verschiedenen Rand- und Abstandswerten herum.

• Unterer Rand: 100px
• Rechter Rand: 200px (Desktop), 100px (Tablet), 50px (Telefon)
• Obere Polsterung: 54px
• Untere Polsterung: 54px

Box Schatten

Um diesen Abschnitt an das Layoutpaket anzupassen, fügen wir auch einen subtilen Boxschatten hinzu.

• Horizontale Position des Kastenschattens: 30px
• Vertikale Position des Kastenschattens: 30px
• Stärke der Box-Schattenausbreitung: -10px
• Schattenfarbe: #ffa53b

Neue Zeile hinzufügen

Spaltenstruktur

Die Zeile, die wir diesem Abschnitt hinzufügen, benötigt die folgende Spaltenstruktur:

Textmodul hinzufügen

Inhalt hinzufügen

Fügen Sie den Inhalt Ihrer Wahl erneut mit einer Überschrift und einem Absatzlink hinzu. Wir verwenden auch eine Liste, die Besuchern hilft, leicht durch verschiedene Teile der Website zu navigieren.

Standardeinstellungen für Linktext

Gehen Sie zu den Linktexteinstellungen und nehmen Sie einige Änderungen am Erscheinungsbild der Linkkopie vor.

• Link-Schriftart: Unterstreichen
• Linktextfarbe: #000000
• Linktextgröße: 0px (Desktop), 20px (Tablet), 13px (Telefon)
• Höhe der Verbindungsleitung: 0px (Desktop), 1,8em (Tablet & Telefon)

Hover-Link-Texteinstellungen

Nehmen Sie einige kleine Optimierungen beim Schweben vor.

• Linktextgröße: 30px
• Höhe der Verbindungslinie: 2,8 em

Standardeinstellungen für Überschriftentext

Die von Ihnen gewählte Überschrift muss ebenfalls geändert werden.

• Überschrift 2 Schriftstärke: Ultra Bold
• Überschrift 2 Schriftstil: Großbuchstaben
• Überschrift 2 Textgröße: 30px (Desktop & Tablet), 20px (Telefon)
• Überschrift 2 Buchstabenabstand: 1px

Hover-Überschrift-Texteinstellungen

Ändern Sie die Textgröße beim Bewegen der Maus.

• Überschrift 2 Textgröße: 0px

Standardabstand

Fahren Sie fort, indem Sie zu den Abstandseinstellungen gehen und einige benutzerdefinierte Werte für Rand und Abstand hinzufügen.

• Linker Rand: 0px (Desktop, Tablet und Telefon)
• Obere Polsterung: 40px
• Linke Polsterung: 50px

Hover-Abstand

Ändern Sie den linken Rand beim Bewegen der Maus.

• Linker Rand: 200px

Standardrahmen

Als nächstes fügen Sie dem Textmodul einen linken Rahmen hinzu.

• Linker Randbreite: 5px
• Farbe des linken Rands: #ffa53b

Grenze schweben

Entfernen Sie die gesamte Rahmenbreite beim Schweben.

• Breite des linken Rands: 0px

Übergänge

Erstellen Sie zu guter Letzt einen sanften Übergang, indem Sie eine etwas längere Übergangsdauer verwenden.

• Übergangsdauer: 500ms

Vorschau

Nachdem wir nun alle Schritte durchlaufen haben, werfen wir einen letzten Blick auf das Endergebnis.

Abschließende Gedanken

In diesem Anwendungsfallbeitrag haben wir Ihnen gezeigt, wie Sie animierte Titel nur mit den integrierten Optionen von Divi beim Hover erstellen. Dies ist eine großartige Möglichkeit, bestimmte Teile Ihres Textes ins Rampenlicht zu rücken und auf kreative Weise Aktionen bei den Besuchern auszulösen. Wenn Sie Fragen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!