Alles, was Sie über das Lottie -Modul von Divi 5 wissen müssen

Das Lottie -Modul von Divi 5 bringt dynamische, leichte Animationen auf Ihre Seiten und macht Ihre Seiten ansprechender und interaktiver. Die richtigen Grafiken sind der Schlüssel, um Aufmerksamkeit zu erregen und die Besucher zu beschäftigen. Mit dem Lottie-Modul können Sie Divi 5 professionelle Animationen hinzufügen, die ebenfalls leistungsfreundlich sind.

In diesem Beitrag werden wir alles erklären, was Sie über das Lottie -Modul wissen müssen, einschließlich seiner Funktionen, des Einrichtungsprozesses, der Anpassungsoptionen und der Verwendung, um es zu verwenden. Lass uns einspringen!

Was sind Lottie -Dateien?

Lottie-Animationen sind leichte JSON-basierte Grafiken, die als skalierbare Vektoren darstellen. Sie liefern skalierbare Bilder ohne die hohen Dateigrößen von Videos oder GIFs. Dank seiner Fähigkeit, Leistung mit Flexibilität zu kombinieren, hat Lottie immer beliebter gewonnen und sie für das moderne Webdesign beliebt gemacht. Im Gegensatz zu herkömmlichen Animationen verwenden Lottie-Dateien vektorbasierte JSON-Daten, um knackige Bilder und eine reibungslose Wiedergabe auf allen Geräten und Bildschirmgrößen zu gewährleisten.

Abonnieren Sie unseren YouTube -Kanal

In Divi 5 integriert das Lottie -Modul diese Animationen nahtlos in den visuellen Builder, sodass Benutzer ihren Divi -Websites in wenigen Klicks dynamische, moderne Details hinzufügen können. Unabhängig davon, ob Sie ein CTA hervorheben oder einem Heldenabschnitt Flair hinzufügen, das Lottie -Modul macht das Einbinden von Animationen ohne komplexe Codierung mühelos.

Mit dem Lottie -Modul verwandelt Divi 5, wie Sie Ihre Webdesigns Bewegung bringen und sie faszinierend und effizient machen.

Schlüsselmerkmale

Das Lottie -Modul in Divi 5 ist ein vielseitiges Tool mit Funktionen, mit denen dynamische, optimierte Animationen einfacher werden. Es bietet Kontrolle über Animationsverhalten und ermöglicht es Ihnen, Geschwindigkeit, Richtung, Auslöser und mehr zu optimieren. Schauen wir uns einige seiner wichtigsten Funktionen an.

Benutzerfreundlichkeit

Das Lottie-Modul in Divi 5 ist im Auge, so dass es anfängerfreundlich und für Benutzer aller Fähigkeiten zugänglich ist. Sie müssen kein Codierungsexperte sein, um Ihrer Divi-Website professionelle, auffällige Animationen hinzuzufügen.

Dank der Anzahl der online verfügbaren Ressourcen ist die Beschaffung von Animationen einfach. Plattformen wie LotTiefiles und Lordicon bieten umfangreiche Bibliotheken von kostenlosen und Premium -Lottie -Animationen an, die von subtilen Lade -Symbolen bis zu lebendigen Grafiken reichen.

Für diejenigen, die eine einzigartige Note suchen, können Sie benutzerdefinierte Animationen mit Tools wie Adobe After Effects mit dem BodyMovin -Plugin erstellen. Dieses Plugin exportiert Animationen als JSON -Dateien, die mit dem Lottie -Modul kompatibel sind. Unabhängig davon, ob Sie vorgefertigte oder benutzerdefinierte Animationen wählen, ist der Prozess unkompliziert.

Anpassungsoptionen

Das Lottie -Modul in Divi 5 bietet Anpassungsoptionen und bietet Ihnen die Kontrolle über verschiedene Aspekte der Lottie -Datei. Verwenden Sie für interaktive Erlebnisse Trigger -Animation, um zu wählen, wann die Animation, z. B. beim Laden, aktiviert werden soll, wenn das Element das Ansichtsfenster, den Schwebewechsel, das Klicken oder die Scrollen eingibt. Sie können die Loop -Animation aktivieren, damit Ihre Lottie -Datei kontinuierliche Bewegungen ermöglicht, die Animationsgeschwindigkeit anpassen, die Richtung (vorwärts oder rückwärts) auswählen und zwischen Normal oder Sprung im Spielmodusfeld auswählen.

Hochladen von JSON -Animationen

Das Hinzufügen von Lottie -Animationen zu Divi 5 erfordert das Hochladen von JSON -Dateien, das Standardformat für Lottie -Dateien. WordPress unterstützt jedoch nicht nativ JSON -Uploads in der Medienbibliothek. Sie müssen daher zusätzliche Schritte ausführen, um sicherzustellen, dass Sie diese hochladen können.

Die erste Option besteht darin, ein Kinderthema zu erstellen und der Funktion Ihres Kindsthemas ein PHP -Snippet hinzuzufügen. Diese Methode ist leicht und gewährleistet eine sichere Handhabung Ihrer Animationsdateien. Alternativ können Sie ein Plugin-ähnliches Datei-Upload-Typen verwenden, um JSON-Uploads zu ermöglichen, ohne Code zu berühren, und es ist ideal für Benutzer, die eine Plug-and-Play-Lösung bevorzugen. Eine Schritt-für-Schritt-Anleitung zur Implementierung einer der beiden Methoden finden Sie in unserem Support-Artikel, der Sie durch den Prozess führt, um Ihre DIVI 5-Website für JSON-Uploads einzurichten.

So verwenden Sie das Lottie -Modul in Divi 5

Das Hinzufügen einer Lottie -Animation in Divi 5 ist unkompliziert. Erstellen oder laden Sie eine Lottie -Animation von einer Quelle wie LotTiefiles oder Lordicon herunter. Suchen und klicken Sie im Visual Builder auf das Lottie -Modul, um es Ihrer Seite hinzuzufügen.

Laden Sie die JSON -Datei hoch oder suchen Sie sie in Ihrer WordPress Media Gallery.

Wählen Sie die Triggeranimation . Sie können es auf Lade-, Ansicht, Schwebe-, Klick- oder Scrollen setzen, um sie zu belasten, zu schweben, zu klicken oder zu scrollen.

Wenn Sie möchten, dass Ihre Lottie -Animation ein interaktives Element hat, verwenden Sie die Scroll des Moduls, um einen Animed -Trigger zu erhalten.

Die Verwendung dieses Triggers bietet eine großartige Möglichkeit, dynamische und ansprechende Benutzererlebnisse zu erstellen. Anstatt die Animation zu verwenden, wenn die Seite geladen wird, scrollen Sie, um den Fortschritt der Animation direkt zum Bildlaufverhalten des Benutzers zu verbinden. Wenn der Benutzer die Seite nach unten scrollt, verfolgt die Animation den Rahmen nach Frame. Dies macht die Animation zu einem interaktiven Element, das die Erfahrung dynamischer anfühlt.

Wenn Sie möchten, dass die Animation endlos schleifen, aktivieren Sie den Schleifenanimationsumschütteln . Sie können auch die Animationsgeschwindigkeit festlegen, die Richtung ( vorwärts oder rückwärts ) steuern und normale oder springen für den Spielmodus aus.

Auf der Registerkarte "Design" können Sie die Größe, Ausrichtung, Höhe, Abstand und mehr steuern.

Obwohl Sie die Farben Ihrer Lottie -Dateien in Divi 5 nicht ändern können, können Sie in den meisten Lottie -Websites bestimmte Farben und Schlaganfallbreiten auswählen, bevor Sie sie herunterladen.

Wie Sie sehen können, dauert das Hinzufügen einer Lottie -Datei zu Ihrer Divi 5 -Website Sekunden und fügt Ihren Webseiten ein wenig Flair hinzu, ohne sich um die Leistung zu sorgen.

Praktische Beispiele mit dem Lottie -Modul

Das Lottie -Modul in Divi 5 bietet eine breite Palette von Anwendungen und fügt Websites mit dynamischen Animationen Flair hinzu. Von der Verbesserung der Kontaktseiten bis hin zu auffälligen Heldenabschnitten passt seine Flexibilität für alle Arten von Designs.

Mit seinen nahtlosen Integrations- und Anpassungsoptionen können Divi-Benutzer ansprechende, leistungsfreundliche Erlebnisse auf ihrer gesamten Website erstellen.

Kontaktseiten

Das Hinzufügen von Lottie -Animationen kann Ihre Kontaktseiten engagierter machen. Platzieren Sie beispielsweise Lottie -Module neben Geschäftszeiten, Telefonnummern und anderen Kontaktinformationen, um ein interaktives und einladendes Erlebnis zu erstellen, das Conversions steigert, ohne Ihre Website zu verlangsamen.

404 Seiten

Frustrierende 404 Fehler in unvergessliche Momente mit verspielten Lottie -Animationen. Fügen Sie Ihrer 404 -Seite ein Spinning -Kompass- oder animiertes Suchymbol hinzu, gepaart mit einer Kurznachricht.

Verwenden Sie die Schleifenanimationseinstellung, um die Bewegung kontinuierlich zu halten, und lösen Sie sie auf Last aus, um sofort Aufmerksamkeit zu erregen. Dadurch fühlt sich die 404 -Seite weniger wie eine Sackgasse und eher wie ein kreativer Touchpoint an.

Produkte ausgestattet

Präsentieren Sie Ihre bevorzugten Woo -Produkte oder -kategorien mit Lottie -Animationen, um Produkte zum Verkauf hervorzuheben. Stellen Sie beispielsweise eine Sale -Badge Lottie -Animation neben einem vorgestellten Produkt, um es hervorzuheben.

Stellen Sie zunächst die Animation so ein, dass sie das Laden auslösen. Dann aktiviert es, wenn Benutzer stöbern, ihre Augen auf Produkte zeichnen und die visuelle Anziehungskraft steigern.

Dienstleistungsabschnitte

Erwecken Sie Ihren Dienst mit Lottie -Animationen zum Leben, die Ihre Angebote visuell darstellen. Verwenden Sie beispielsweise Loop -Animationen für Ihre Marketingagentur und passen Sie die Geschwindigkeit an den Ton an.

Stellen Sie außerdem den Ansichtstrigger fest, um Animationen als Benutzer zu aktivieren und eine dynamische, professionelle Präsentation zu gewährleisten.

Heldenabschnitte

Machen Sie Ihre Heldenabschnitte unvergesslich mit mutigen Lottie -Animationen, die den Ton für Ihre Website festlegen. Fügen Sie zunächst eine reibungslose Hintergrundanimation mit dem Lottie -Modul von Divi hinzu. Legen Sie es dann mit den Positionseinstellungen von Divi hinter Reihen und Module.

Beispielsweise kann ein fließender, moderner Animationen oder ein subtiler Partikeleffekt Ihrer Website mit wenig Anstrengung Tiefe verleihen. Verwenden Sie den On-Load-Trigger für sofortige Aufprall und passen Sie den Spielmodus an, um einen faszinierenden Effekt zu erzielen.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Treten Sie dem Divi -Newsletter bei und wir senden Ihnen eine Kopie des ultimativen Divi -Landing -Layout -Pakets sowie Tonnen anderer erstaunlicher und kostenloser Divi -Ressourcen, Tipps und Tricks per E -Mail. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi -Meister sein. Wenn Sie bereits abonniert sind, geben Sie einfach Ihre E -Mail -Adresse unten ein und klicken Sie auf Download, um auf das Layoutpaket zuzugreifen.

HERUNTERLADEN

Sie haben erfolgreich abonniert. Bitte überprüfen Sie Ihre E -Mail -Adresse, um Ihr Abonnement zu bestätigen und Zugriff auf kostenlose wöchentliche Divi -Layout -Packs zu erhalten!

Abschluss

In Divi 5 vereinfacht das Lottie -Modul das Hinzufügen leichter, dynamischer Animationen zu Websites. Nahtlos in den visuellen Builder integriert und ermöglicht professionelle Animationen mit minimalem Aufwand. Flexible Steuerelemente, umfangreiche Anpassungen und kostenlose Lottie -Dateiplattformen erleichtern die Verbesserung Ihrer Website.

Bereit, das Lottie -Modul auszuprobieren? Teilen Sie Ihre Gedanken oder Kreationen in den Kommentaren oder in den sozialen Medien.