So animieren Sie Buchstaben für einzigartige Textdesigns in Divi

Animation ist ein fester Bestandteil der Benutzererfahrung für moderne Websites geworden. Abgesehen davon, dass es cool aussieht, kann es auch ein subtiles interaktives Element hinzufügen, das den Benutzer einbindet, indem es Inhalte zum Leben erweckt. Mit den integrierten Animationseffekten von Divi können Sie fast jedes Element auf einer Seite mit verschiedenen Animationsstilen animieren.

In diesem Tutorial zeige ich Ihnen, wie Sie Buchstaben für einige einzigartige Textdesigns in Divi animieren. Indem Sie einzelne Buchstaben in ein Textmodul einfügen, können Sie die Animation jedes Buchstabens mit unterschiedlichen Animationsstilen, Dauer und Verzögerungen ausrichten, die den Inhalt auf kreative Weise hervorheben. Diese Technik dient ausschließlich Designzwecken, da die Buchstaben, aus denen der Inhalt besteht, nicht sehr seo-freundlich sind. Die animierten Buchstaben ermöglichen es Ihnen jedoch, Ihre Geschichte auf atemberaubende Weise mit den Benutzern zu teilen.

Lass uns anfangen.

Vorgeschmack

Laden Sie das Layout mit den Designbeispielen für Briefanimationen KOSTENLOS herunter

Um die Buchstabenanimationsdesigns aus diesem Tutorial in die Hände zu bekommen, müssen Sie sie zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Um das Layout auf Ihre Seite zu importieren, entpacken Sie einfach die ZIP-Datei und ziehen Sie die JSON-Datei in den Divi Builder.

Kommen wir zum Tutorial, sollen wir?

Einstieg

Für dieses Tutorial benötigen Sie nur Divi. Wir werden die Designs von Grund auf mit dem Divi-Builder am Frontend erstellen. Um zu beginnen, erstellen Sie eine neue Seite, geben Sie Ihrer Seite einen Titel und klicken Sie auf die Bereitstellung, um den Divi Builder zu verwenden. Wählen Sie dann die Option „von Grund auf neu erstellen“ und klicken Sie, um das Frontend zu erstellen.

Jetzt sind Sie bereit zu entwerfen!

Erstellen des Layouts zum Animieren von Briefen

Abschnitt, Zeile und Spalte hinzufügen

Fahren Sie fort und erstellen Sie einen neuen regulären Abschnitt mit einer einspaltigen Zeile.

Bevor wir unsere Textmodule hinzufügen (die weiße Buchstaben enthalten), fügen wir dem Abschnitt ein dunkles Hintergrundbild hinzu. Öffnen Sie die Abschnittseinstellungen und fügen Sie ein Hintergrundbild hinzu. Ich verwende ein abstraktes Hintergrundbild aus dem vorgefertigten Layout der Landing Page der Investmentgesellschaft.

Individuelle Buchstabenblöcke mit Textbausteinen erstellen

Bevor wir mit dem Hinzufügen von Animationen zu Buchstaben beginnen können, müssen wir zunächst für jeden Buchstaben, den wir hinzufügen möchten, ein separates Textmodul erstellen. Für dieses Beispiel erstellen wir den Text „Divi Design“. Da diese Textphrase 11 Zeichen Leerzeichen enthält (einschließlich des Leerzeichens zwischen den Buchstaben, müssen wir 11 verschiedene Textmodule hinzufügen.

Fahren Sie fort und fügen Sie der Spalte ein Textmodul hinzu.

Fügen Sie im Inhaltsfeld den ersten Buchstaben Ihres Textes hinzu, in diesem Fall der Buchstabe „d“.

Aktualisieren Sie dann die Textdesign-Einstellungen wie folgt:

• Textschriftart: Rubik
• Textschriftart: TT
• Text Textfarbe: #ffffff
• Text Textgröße: 80px (Desktop), 50px (Tablet), 30px (Telefon)
• Textzeilenhöhe: 1,6em
• Textausrichtung: Mitte

Als nächstes fügen Sie dem Textmodul eine Animation wie folgt hinzu:

• Animationsstil: Folie
• Animationsrichtung: Nach oben
• Animationsdauer: 600 ms
• Animationsverzögerung: 100ms
• Anfangsdeckkraft der Animation: 100 %

Duplizieren Sie den Textbaustein und aktualisieren Sie den Inhalt mit dem Buchstaben „i“. Erhöhen Sie dann die Animationsverzögerung wie folgt um 100 ms:

• Animationsverzögerung: 200ms

Duplizieren Sie den Textbaustein und aktualisieren Sie den Inhalt mit dem Buchstaben „v“. Erhöhen Sie dann die Animationsverzögerung auf 300 ms.

• Animationsverzögerung: 300ms

Duplizieren Sie den Textbaustein und aktualisieren Sie den Inhalt mit dem Buchstaben „i“. Erhöhen Sie dann die Animationsverzögerung auf 400 ms.

• Animationsverzögerung: 400ms

Für dieses nächste Textmodul möchten wir ein Leerzeichen hinzufügen. Duplizieren Sie das Textmodul und fügen Sie dem Inhaltsfeld den folgenden HTML-Code hinzu:

 

Für dieses muss die Animationsverzögerung nicht aktualisiert werden.

Anschließend duplizieren Sie den Textbaustein und aktualisieren den Inhalt mit dem Buchstaben „d“. Dies ist der erste Buchstabe im Wort „Design“. Erhöhen Sie dann die Animationsverzögerung auf 500 ms.

• Animationsverzögerung: 500 ms

Fahren Sie mit dem Duplizieren des Textmoduls fort und erhöhen Sie die Animationsverzögerung um 100 ms für jeden der verbleibenden Buchstaben, die das Wort „Design“ buchstabieren.

• Buchstabe „e“: Animationsverzögerung 600ms
• Buchstabe „s“: Animationsverzögerung 700ms
• Buchstabe „i“: Animationsverzögerung 800ms
• Buchstabe „g“: Animationsverzögerung 900ms
• Buchstabe „n“: Animationsverzögerung 1000ms

So sieht das Design bisher aus.

Flex-Eigenschaft hinzufügen, um Module horizontal auszurichten

Noch nicht ganz das Ergebnis, das wir suchen. Aber alles, was wir tun müssen, um das Design auf magische Weise zusammenzufügen, ist, der Zeilenspalte einen kleinen CSS-Schnipsel hinzuzufügen. Öffnen Sie dazu die Zeileneinstellungen und fügen Sie das folgende benutzerdefinierte CSS zum Column Main Element hinzu.

display: flex;

Die Eigenschaft display:flex richtet alle Module horizontal in einer flexiblen Tabelle aus, die sich wunderbar an unterschiedliche Browserbreiten anpasst. Und da die Module in einer einspaltigen Reihe angeordnet sind, wird das Design auf Tablets oder mobilen Geräten nicht kaputt gehen.

Wir müssen auch eine benutzerdefinierte Bundstegbreite hinzufügen, um den unteren Rand unter den Buchstaben zu entfernen und der Reihe etwas obere und untere Auffüllung hinzuzufügen, damit die Buchstaben etwas Platz zum Animieren haben.

• Dachrinnenbreite: 1
• Benutzerdefinierte Polsterung: 5vw oben, 5vw unten

Hier ist das Endergebnis.

Hinzufügen verschiedener Animationsstile

Mit diesem Setup können Sie ganz einfach neue Animationsstile für völlig einzigartige Effekte hinzufügen. Dazu können Sie die Multiselect-Funktion von Divi nutzen, um alle Module auf einmal zu aktualisieren. Halten Sie am Frontend die Umschalttaste gedrückt und klicken Sie auf den ersten und letzten Textbaustein. Öffnen Sie dann die Einstellungen für eines der ausgewählten Module.

Dadurch wird das Elementeinstellungen-Modal geöffnet, mit dem Sie die Einstellungen für alle ausgewählten Module aktualisieren können. Wir möchten die Animationsverzögerung nicht ändern, da wir den Kaskadeneffekt für jeden der Buchstaben beibehalten möchten. Wir können jedoch die anderen Animationsoptionen auf unterschiedliche Weise aktualisieren, um völlig einzigartige Ergebnisse zu erzielen.

Ich schlage vor, den Abschnitt zu duplizieren, bevor Sie eine neue Animation testen, damit Sie die vorherigen Beispiele beibehalten können.

Hier sind ein paar Beispiele.

Textanimation mit umgekehrtem Zoom

Um Buchstaben mit einem umgekehrten Zoomeffekt zu animieren, aktualisieren Sie die Elementeinstellungen (die Einstellungen für alle Module) wie folgt:

• Animationsstil: Zoom
• Animationsrichtung: Zentrum
• Animationsintensität: 200%

Hier ist das Endergebnis.

Rolling Wave-Textanimation

Um Buchstaben mit einem rollenden Welleneffekt zu animieren, aktualisieren Sie die Elementeinstellungen (die Einstellungen für alle Module) wie folgt:

• Animationsstil: Drehen
• Animationsrichtung: Nach oben
• Animationsintensität: 100%

Hier ist das Endergebnis.

Domino-Textanimation

Um Text mit Dominoeffekt zu animieren, aktualisieren Sie die Elementeinstellungen (die Einstellungen für alle Module) wie folgt:

• Animationsstil: Flip
• Animationsrichtung: Links
• Animationsintensität: 100%

Hier ist das Endergebnis.

Stand-up-Textanimation

Um Text mit Dominoeffekt zu animieren, aktualisieren Sie die Elementeinstellungen (die Einstellungen für alle Module) wie folgt:

• Animationsstil: Falten
• Animationsrichtung: Nach oben
• Animationsintensität: 100%

Fügen Sie dann eine Perspektive hinzu, um ein 3D-Designelement zu erstellen, indem Sie das folgende CSS zum Hauptspaltenelement unter den Zeileneinstellungen hinzufügen.

CSS für das Hauptspaltenelement:

perspective: 1000px;

Hier ist das Endergebnis.

Animieren von Buchstaben mit einer Kombination von Animationsrichtungen

Wenn Sie kreativer werden möchten, können Sie Buchstaben mit einer Kombination von Animationseffekten animieren. In diesem Beispiel verwende ich eine Kombination aus Animationsrichtungen und Intensität für den Folienstil. Dies wird uns eine völlig einzigartige Präsentation geben.

So geht's.

Zuerst duplizieren Sie einen der Abschnitte, die wir zuvor erstellt haben, damit wir einen Vorsprung beim Designprozess haben.

Löschen Sie anschließend die ersten 4 Textbausteine, sodass nur noch der Text „Design“ angezeigt wird.

Abschnittseinstellungen

Da einige der Buchstaben in der Animation außerhalb des Schnitt-Ansichtsfensters beginnen sollen, müssen wir als Nächstes einen kleinen CSS-Schnipsel zu den Schnitteinstellungen wie folgt hinzufügen:

overflow: hidden;

Dadurch bleiben die Buchstaben verborgen, bis sie in den Abschnitt kommen.

Zeileneinstellungen

Um sicherzustellen, dass unsere Textmodule (Buchstaben) zentriert bleiben, müssen wir den Zeileneinstellungen das folgende CSS hinzufügen:

display:flex;
justify-content: center;

Allgemeine Einstellungen des Textmoduls

Aktualisieren Sie mit Multiselect alle sechs Textbausteine ​​mit den folgenden Elementeinstellungen:

• Benutzerdefinierter Rand: 3% links, 3% rechts
• Randbreite: 1px
• Rahmenfarbe: #ffffff

• Animationsstil: Folie
• Animationsdauer: 2000 ms
• Animationsverzögerung: 100ms
• Animationsintensität: 300%

Das kümmert sich um die grundlegenden Animationseinstellungen, die allen Textmodulen gemeinsam sind. Jetzt können wir die Animationseinstellungen für sie einzeln optimieren.

Individuelle Einstellungen des Textmoduls

An dieser Stelle können wir Spaß daran haben, die einzelnen Textmoduleinstellungen zu optimieren, um die Richtung der Animation für jeden zu ändern. Dadurch können wir Buchstaben auf ganz einzigartige Weise animieren. Aktualisieren Sie für jeden Buchstaben die Animationsrichtung und -intensität wie folgt:

• Buchstabe D
  Animationsrichtung: Nach oben
• Buchstabe E
  Animationsrichtung: Unten
• Briefe
  Animationsrichtung: Links
  Animationsintensität: 80%
• Buchstabe I
  Animationsrichtung: Rechts
  Animationsintensität: 80%
• Buchstabe G
  Animationsrichtung: Unten
• Buchstabe N
  Animationsrichtung: Nach oben

Hier ist das endgültige Design.

Und so sieht es auf dem Handy aus.

Abschließende Gedanken

Ich denke, man kann mit Sicherheit sagen, dass Divi viele Möglichkeiten hat, Buchstaben zu animieren, sobald Sie die richtige Einrichtung haben. Und ich muss sagen, dass es ziemlich schwer war, beim Erstellen dieser Beispiele nicht mehr mit den Animationseinstellungen herumzuspielen. Es gibt so viele Variationsmöglichkeiten zum Ausprobieren! Wie auch immer, ich hoffe, das gibt Ihnen ein wenig Inspiration für Ihr nächstes Projekt. Wenn überhaupt, möchten Sie es vielleicht nur zum Spaß aufbauen.

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

Danke schön!