Divi-Plugin-Highlight: Ultimative Divi Builder-Addons

Veröffentlicht: 2019-04-13

Divi Builder Addons ist ein Drittanbieter-Plugin, das dem Divi Builder viele jQuery-Skripte hinzufügt, die von High-End-Websites verwendet werden. Schalten Sie einfach die gewünschten Skripte um und fügen Sie die CSS-Klassen zu den Divi Builder-Modulen hinzu. Es ist einfach zu bedienen und enthält viele Funktionen und Animationen.

Ultimatives Divi Builder-Addons-Menü

Laden Sie das Plugin wie gewohnt hoch und aktivieren Sie es. Dem Dashboard-Menü wird ein neuer Menüpunkt namens Ultimate Divi Builder Addons hinzugefügt. Wenn Sie darauf klicken, wird im linken Fenster ein Bildschirm mit vielen Funktionen geöffnet. Wenn Sie auf einen von ihnen klicken, werden im rechten Fenster ein Umschalter und Informationen angezeigt. Das rechte Fenster enthält auch CSS-Klassen für einige der Effekte und zeigt, wie man sie verwendet. Andere enthalten mehrere Umschalter für weitere Funktionen und Optionen wie Farben, Bildgrößen, Dauer usw. Sie sind standardmäßig alle deaktiviert.

Die in Lila angezeigten Funktionen sind aktiviert, während die ausgegrauten deaktiviert sind. Im obigen Beispiel umfasst die Funktion weitere Optionen sowie eine CSS-Klasse. Alle Informationen, die Sie zur Verwendung einer bestimmten Funktion benötigen, werden im rechten Fenster angezeigt, wenn Sie darauf klicken.

Features sind:

  • Benutzerdefinierte Bildlaufleiste
  • DoSlide Horizontal
  • In Ansicht einblenden
  • Text spiegeln
  • Blenden Sie die Kopfzeile des Divi-Themas aus, wenn Sie nach unten scrollen
  • jQuery Pageflipping Vertikales Scrollen
  • jQuery Pageflipping horizontales Scrollen
  • jQuery-Scrollflow
  • jQuery ScrollFX
  • jQuery ScrollTrigger
  • jQuery-Endseitenfeld
  • Kopfzeile beim Scrollen laden Effect1
  • Kopfzeile beim Scrollen laden Effect2
  • Kopfzeile beim Scrollen laden Effect3
  • Kopfzeile beim Scrollen laden Effect4
  • Revealator-Animation
  • ScrollMagic Responsive Dauer
  • ScrollReveal
  • StickyStack: jQuery-Stacking-Effekt
  • Scrollende Fenster
  • Super Simple Text Rotator/Ticker
  • Wow-Animation

Ultimate Divi Builder Addons Beispiele

Hier sind einige Beispiele für die Funktionen bei Verwendung mit Divi-Layouts.

Benutzerdefinierte Bildlaufleiste

Mit der benutzerdefinierten Bildlaufleiste können Sie Bildlaufleisten in Ihren Inhalten platzieren. Es hat 8 verschiedene Effekte. Fügen Sie die CSS-Klasse in das CSS-Klassenfeld des Abschnitts, der Zeile oder des Moduls ein, in dem Sie den Effekt verwenden möchten. In diesem habe ich dem Inhalt des Textmoduls im Esports-Layout einen benutzerdefinierten Bildlaufleisteneffekt hinzugefügt.

Beim Schweben wird jetzt eine Bildlaufleiste angezeigt, damit ich scrollen kann, um mehr Inhalt auf derselben Fläche anzuzeigen. Dies ist Effekt 1. Er hat ein anderes Design auf der Live-Site. Ich habe den Hintergrund aufgehellt, damit er hervorsticht.

Dies ist Effekt 3. Er fügt Pfeile am oberen und unteren Rand der Folie hinzu.

Effekt 5 ändert den Griff von einer Linie in einen Punkt und ändert den Stil der Pfeile.

Text spiegeln

Flipping Text ist ein Texteingabeeffekt, der eine tickende Intro-Animation erzeugt. Es hat 5 Effekte. Für dieses Beispiel habe ich Flipping Text zum Paralegal-Layout hinzugefügt. Dies ist der erste Effekt zum Eintippen von Text. Es gibt einen Buchstaben nach dem anderen ein. Es gibt verschiedene Klassen, die Sie verwenden können. Jeder tippt mit einer anderen Geschwindigkeit.

jQuery ScrollFlow

jQuery Scroll Flow fügt Zeilen oder Modulen Scroll-Animationen hinzu. Es hat 5 Animationen. Ich habe dieses einer Zeile im Paralegal-Layout hinzugefügt, damit es alle Module zusammen betrifft. Sie können es auch nur einem der Module in der Reihe hinzufügen, damit es sich an den Rest des bereits vorhandenen Inhalts anpasst.

Wenn ich zu der Zeile scrolle, wird der Inhalt angezeigt. Es ist kleiner als normal und die Deckkraft ist niedrig genug eingestellt, damit der Hintergrund durchscheinen kann.

Ein wenig mehr Scrollen erhöht die Größe des Inhalts und die Deckkraft, bis er in seiner vollen Breite und Deckkraft angezeigt wird. Es nimmt wieder ab, wenn ich wieder nach oben scrolle. Dieser bleibt an den gleichen Stellen, hat jedoch mehrere andere Klassen, sodass Sie ihn von rechts, links oder nach oben oder unten schieben können, während Sie seine Größe und Deckkraft anpassen.

jQuery ScrollFX

jQuery ScrollFX skaliert den Text und ändert die Deckkraft des Hintergrunds. Die Klasse scrollfx wird dem Abschnitt hinzugefügt. Die Module in diesem Abschnitt werden normalerweise angezeigt, wenn Sie zu ihnen scrollen und sie auf dem Bildschirm sind.

Wenn Sie an ihnen vorbeiscrollen, wird der Inhalt des Abschnitts kleiner und die Deckkraft verringert.

jQuery Scroll-Trigger

Der jQuery-Scroll-Trigger verschiebt ein Modul beim Seitenscrollen. Fügen Sie dem Abschnitt die Scroll-Trigger-Klasse hinzu. Dies ist das Resort-Layout. Das Hintergrundbild wird beim Hinzufügen der Klasse automatisch zur Seite verschoben.

Der gesamte Inhalt, einschließlich Bilder, Schaltflächen, Text usw., wird angezeigt, wenn Sie zu diesem Abschnitt gelangen.

Und dann beruhigt es sich, wenn alles an seinem Platz ist.

jQuery-Endseitenfeld

jQuery End Page Box platziert eine Box, die am unteren Bildschirmrand bleibt. Es wird erstellt, indem am Ende eines Abschnitts Code zu einem Textmodul hinzugefügt wird.

Dadurch wird ein Feld hinzugefügt, das am unteren Bildschirmrand angezeigt wird und sich ändert, um unterschiedliche Inhalte anzuzeigen, die Sie für jeden Abschnitt angeben.

Hier ist der nächste Abschnitt. Die Box gleitet aus verschiedenen Richtungen oder mit unterschiedlichen Animationen für jeden der Abschnitte heraus und hinein.

Kopfzeile beim Scrollen laden

Kopfzeile beim Scrollen laden fügt dem Menü eine Leiste hinzu, die anzeigt, wie viel von einer Seite Sie gesehen haben. Es erfordert keine CSS-Klasse. Sie können die Farbe der Bildlaufleiste anpassen. Es stehen vier Stile zur Auswahl.

Dies ist Effekt 1. Er fügt eine scrollende Linie am oberen Rand des Bildschirms hinzu. Es wird beim Scrollen größer und zeigt an, wie viel von der Seite der Besucher gesehen hat.

Dies ist Effekt 2. Er zeigt einen viel breiteren Balken an.

Dies ist Effekt 3. Er wächst beim Scrollen vertikal und nimmt die Höhe des Logos ein. Es wird nicht sehr groß, aber es zeigt immer noch den Scroll-Effekt.

Effekt 4 nimmt die Breite des Logos ein.

Aufdecker

Revealator fügt Abschnitten, Zeilen oder Modulen durch Scrollen ausgelöste Animationen hinzu. Es hat fast 40 Optionen. Ich füge einen Klappentext im Bäckerei-Layout hinzu. Der Klappentext fehlt, bis der Container dafür vollständig auf dem Bildschirm sichtbar ist.

Es wird entsprechend der von Ihnen gewählten Klasse auf dem Bildschirm animiert. Dieser bietet viele Animationsoptionen, einschließlich Einblenden, Linksdrehen, Rechtsdrehen, Linksschieben, Rechtsschieben, Hochschieben, Herunterschieben, Vergrößern und Verkleinern.

Scroll Magic Section Wipes

Scroll Magic Section Wipes erstellt eine Animation, die den Inhalt beim Scrollen auf den Bildschirm wischt. Ich denke, das ist mein Favorit von allen Effekten. Es wurde dem Abschnitt hinzugefügt.

Sobald dieser Abschnitt vollständig auf dem Bildschirm angezeigt wird, friert er ein und der nächste Abschnitt scrollt darüber. Sie können dies zu beliebig vielen Abschnitten hinzufügen, um eine interessante Scrollmethode für die gesamte Seite zu erstellen. Wenn Sie möchten, dass sich jeder Abschnitt überlappt, dann sind Sie an der StickyStack-Funktion interessiert.

Scroll-Enthüllung

Scroll Reveal enthüllt Module beim Scrollen. Wählen Sie aus 17 verschiedenen Animationen. Sie können es Abschnitten, Zeilen oder Modulen hinzufügen. Der Abschnitt am unteren Rand zoomt beim Scrollen auf den Leser zu.

Dies ist Effekt 1f. Die Zeile dreht sich, während Sie zu ihr scrollen.

StickyStack: jQuery-Stacking-Effekt

StickyStack: jQuery Stacking Effect stapelt Panels, wenn sie den oberen Rand eines Ansichtsfensters erreichen. Mit anderen Worten, jeder Abschnitt friert beim Scrollen auf dem Bildschirm ein und der nächste Abschnitt wird gescrollt, um ihn zu überlappen. Das Ergebnis sieht beim Scrollen fantastisch aus. Dies ist das Risikomanagement-Layout.

Hier ist ein weiterer Abschnitt derselben Seite. Die überlappenden Portionen funktionieren perfekt.

Super Simple Text Rotator/Ticker

Mit Super Simple Text Rotator/Ticker können Sie Text mit Markups versehen und mehrere Wörter drehen. Es hat 5 Animationsstile. Dieses rotiert zwischen den Wörtern einfach und kundengerecht.

Hier wird es gedreht, um das zweite Wort anzuzeigen. Beide Wörter werden ein- und ausgeblendet.

Ultimate Divi Builder Addons Preis

Ultimate Divi Builder Addons kostet 59 US-Dollar für die Verwendung auf unbegrenzten Websites und enthält lebenslange Updates. Updates fügen oft neue Funktionen hinzu. Sie können eine kostenlose Demo ausprobieren, um zu sehen, ob sie Ihnen gefällt.

  • Sie können Ultimate Divi Builder Addons von DiviBuilderAddons.com kaufen.

Gedanken beenden

Ultimate Divi Builder Addons hat viel zu bieten und kann bei der Entwicklung von Funktionen und Animationen viel Zeit sparen. Ich war beeindruckt von der Anzahl der enthaltenen Funktionen und der einfachen Bedienung.

Einige sind schwieriger zu zeigen, ohne diesen Artikel mit großen GIFs zu füllen. Wow Animation hat beispielsweise 75 Animationen zur Auswahl, und Sie können die Verzögerung, Dauer, Entfernung und die Anzahl der Wiederholungen ändern.

Das Plugin erfordert, dass Sie mit dem Einfügen einer CSS-Klasse in einen Abschnitt, eine Zeile oder ein Modul vertraut sind. Glücklicherweise ist dies einfach und in der Divi-Dokumentation finden Sie viele Informationen zum Einfügen in CSS-Klassen.

Wenn Sie an einer einfachen Möglichkeit interessiert sind, Divi viele Funktionen und Animationen hinzuzufügen, sollten Sie sich die Ultimate Divi Builder Addons ansehen.

Wir wollen von dir hören. Hast du Ultimate Divi Builder Addons ausprobiert? Lassen Sie uns in den Kommentaren wissen, was Sie davon halten.

Ausgewähltes Bild über GoodStudio / shutterstock.com