Einen Titel zu haben, der auffällt, bedeutet sicherzustellen, dass Sie die Möglichkeit haben, die Aufmerksamkeit Ihrer zu erregen Besucher. Titel bleiben aufgrund ihrer Größe und zentralen Position normalerweise nicht unbemerkt, aber wenn Sie noch einen Schritt weiter gehen und den Titel buchstäblich zum Platzen bringen möchten, sind Sie hier genau richtig.

In diesem Tutorial werden wir die Animationseinstellungen von kombinieren Divi um eine Überschrift zu erstellen, die auffällt und die Aufmerksamkeit von Ihnen erregt Besucher.

Endgültiges Ergebnis

Teil Eins: Design

Abschnitt Konfiguration

Hintergrundfarbe

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

• Hintergrundfarbe: #EEE

Abstand

Wechseln Sie dann zu den Einstellungen für den Abschnittsabstand und fügen Sie benutzerdefinierte Füllränder hinzu.

• Polsterung unten: 10vw

Fügen Sie die Zeile 1 hinzu

Spaltenstruktur

Fügen Sie mit der folgenden Spaltenstruktur eine neue Zeile hinzu:

Hintergrundfarbe

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

•  Hintergrundfarbe: #DDD

Sizing

Gehen Sie dann zu den Größeneinstellungen und lassen Sie die Zeile die gesamte Breite des Bildschirms ausfüllen.

• Machen Sie diese Linie in voller Breite: Ja
• Verwenden Sie eine benutzerdefinierte Rinnenbreite: Ja
• Dachrinnenbreite: 1

Abstand

Entfernen Sie außerdem den standardmäßigen oberen und unteren Innenabstand für die Linie.

• Polsterung oben: 0px
• Polsterung unten: 0px

Fügen Sie ein Textmodul hinzu

Es ist Zeit, mit dem Hinzufügen von Modulen zu beginnen! Das erste Modul, das wir benötigen, ist ein Textmodul. Geben Sie den ersten Teil Ihres Titels in das Feld ein Inhalt Verwenden des Absatztextstils.

Hintergrundfarbe

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

• Hintergrundfarbe: #ccc

Texteinstellungen

Ändern Sie auch die Texteinstellungen auf der Registerkarte Design.

• Schrifttext: Didact Gothic
• Schriftgewicht des Textes: fett
• Textfarbe: #000000
• Textgröße: 10vw
• Höhe der Textzeile: 0.9em
• Textausrichtung: Mitte

Abstand

Erstellen Sie dann die gewünschte Form mit benutzerdefinierten Polstern oben und unten.

• Polsterung oben: 10vw
• Polsterung unten: 3vw

Animation

Zu guter Letzt werden wir einige Animationen hinzufügen. Es ist wichtig sicherzustellen, dass die Animationsdauer und die Startopazität Null sind. Dadurch kann das Textmodul mit einem Flash-Effekt angezeigt werden.

• Animationsstil: Verblassen
• Animation wiederholen: Einmal
• Animationsdauer: 0ms
• Animationsverzögerung: 1000ms

Klonen Sie das x4-Textmodul

Sobald Sie das erste Textmodul bearbeitet haben, können Sie es je nach Länge Ihres Titels beliebig oft klonen. Für jeden Teil des Titels, den Sie mit einem Flash-Effekt anzeigen möchten, benötigen Sie ein separates Textmodul. Für dieses Beispiel benötigen wir zusätzliche 4-Module.

Hintergrundfarbe

Mit der Hintergrundfarbe.

• Kopie 1 = Hintergrundfarbe: # 5900ff, Textfarbe: #FFF
• Kopieren 2 = unverändert lassen, Animationsdauer ändern (Animationsverzögerung): 1500 ms
• Kopie 3 = Hintergrundfarbe: # ffb200, Textfarbe: #FFF, Animationsdauer ändern: 2000 ms
• Kopie 4 = Hintergrundfarbe: # 000, Textfarbe #FFF, Animationsdauer ändern: 2500 ms

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

Sobald 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 auf das erste Modul folgen, über diesem ersten Textmodul angezeigt werden.

• Oberer Rand: -31.98vw

Transformationslinie

Transform übersetzen

Fahren Sie fort, indem Sie die gesamte Zeile transformieren, beginnend mit den Transformationsparametern.

• Unten: -35vw

Rotation umwandeln

Ändern Sie auch die Rotationswerte der Transformation.

• Links: 320deg

Fügen Sie die 2-Zeile hinzu

Spaltenstruktur

Auf dem zweiten Platz! Nachdem der Titeleffekt aktiviert ist, können wir die verbleibenden Module hinzufügen. Fügen Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzu:

Sizing

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und lassen Sie die Zeile in den Größeneinstellungen die gesamte Bildschirmbreite ausfüllen:

• Machen Sie diese Linie in voller Breite: Ja
• Verwenden Sie eine benutzerdefinierte Rinnenbreite: Ja
• Dachrinnenbreite: 1

Abstand

Entfernt die Standardoberfüllung aus der nächsten Zeile.

• Obere Polsterung: 0px

Fügen Sie der 2-Spalte ein Textbeschreibungsmodul hinzu

Fügen Sie H1-Inhalte hinzu

Es ist Zeit, Module hinzuzufügen. Das erste Modul wird ein Textmodul sein. Sie können das hinzufügen Inhalt dass du wünschst.

H1-Texteinstellungen

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

• Schriftart des Titels: Didact Gothic
• Titelgewicht: Fett
• Schriftgröße: 1.8vw (Computer), 3.8vw (Tablet), 4vw (Telefon)

Abstand

Fügen Sie im Abstandsbereich benutzerdefinierte Ränder hinzu.

• Oberer Rand: -4vw
• Unterer Rand: 2vw
• Linker Rand: 30vw
• Rechter Rand: 30 VW (Computer), 15 VW (Tablets & Telefon)

Fügen Sie der 2-Spalte ein Trennmodul hinzu

Sichtbarkeit

Das nächste Modul ist das Trennmodul. Stellen Sie sicher, dass die Option "Teiler anzeigen" aktiviert ist.

• Trennzeichen anzeigen: Ja

Farbe

Gehen Sie dann zur Registerkarte "Design" und ändern Sie die Farbe des Trennzeichens.

• Farbe: #000000

Dimentionnement

Ändern Sie auch die Abstandsoptionen.

• Abstandsgewicht: 8px
• Breite: 7%

Abstand

Immer mit Größenoptionen.

• Niedrige Marge: 1vw
• Linker Rand: 30vw

Fügen Sie der 2-Spalte einen Textbaustein hinzu

Inhalt hinzufügen

Das nächste Modul wird ein weiteres Textmodul sein. Sie müssen die angeben Inhalt Ihrer Wahl.

Texteinstellung

Dann müssen Sie die Texteinstellungen auf der Registerkarte "Design" ändern.

• Textgröße: 0.8vw (Computer), 1.3vw (Tablet), 1.6vw (Telefon)
• Höhe der Linie: 2.2em

Abstand

Fügen Sie auch im Abstandsbereich einige Ränder hinzu.

• Niedrige Marge: 3vw
• Linker Rand: 30vw
• Rechter Rand: 30 VW (Computer), 15 VW (Tablets & Phones)

Fügen Sie der 2-Spalte ein Schaltflächenmodul hinzu

Einstellungen des Tastenmoduls

Für das letzte Modul, das ein Tastenmodul sein wird. Sie fügen den Inhalt Ihrer Wahl hinzu und ändern die Einstellungen wie folgt:

• Benutzerdefinierten Stil verwenden: Ja
• Schriftgröße: 1vw (Computer), 1.5vw (Tablet), 2vw (Telefon)
• Breite des Schaltflächenrandes: 0px
• Schaltflächenschriftart: Poppins
• Textgewicht: Fett
• Schriftart: Großbuchstaben

Abstand

Gehen Sie zu den Abstandseinstellungen und fügen Sie einen benutzerdefinierten Außenrand sowie einen Innenrand hinzu.

• Linker externer Rand: 30vw
• Innerer hoher Rand: 1vw
• Innen niedriger Rand: 1vw
• Linker innerer Rand: 3vw
• rechter innerer Rand: 3vw

zu beenden

In diesem Tutorial haben wir gesehen, wie Sie einen Titel mit animiertem Text entwerfen, indem Sie nur die internen Optionen von verwenden Divi. Dies ist eine hervorragende Technik, mit der Sie die Aufmerksamkeit Ihrer Kunden auf sich ziehen können Besucher auf eine sehr originelle Art und Weise.