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.
Hallo. Großartig, dein Tutorial, danke. Ich habe es getan, aber ich habe ein kleines Problem. Die Animation findet nur einmal statt und wird dann nicht wiederholt.