Divi-Plugin-Highlight: Next Image Effect Pro

Next Image Effect Pro ist ein Drittanbieter-Plugin für Divi, das viele Hover-Effekte für Bilder hinzufügt, die die Aufmerksamkeit auf Ihre Bilder und Links lenken. Das Plugin fügt dem Divi Builder 7 Module hinzu, jedes mit seinen eigenen Designs und Effekten. In diesem Artikel werden wir uns Next Image Effect Pro ansehen und sehen, was es tun kann.

Nächstes Image Effect Pro-Installation

Kaufen Sie das Plugin vom Divi Marketplace und laden Sie es herunter. Befolgen Sie diese Schritte, um es zu installieren:

1. Gehen Sie im WordPress-Dashboard zu Plugins > Neu hinzufügen
2. Laden Sie das Plugin von Ihrem Computer hoch
3. Klicken Sie auf Jetzt installieren
4. Sobald das Plugin installiert ist, klicken Sie auf Aktivieren

Als nächstes müssen Sie die Lizenz aktivieren. Gehen Sie zu Plugins > Image Effect Pro-Lizenz . Geben Sie Ihren Lizenzschlüssel ein und speichern Sie die Änderungen.

Weiter Image Effect Pro Module

Image Effect Pro fügt dem Divi Builder eine Reihe von Modulen hinzu, die stilisierte Kombinationen von Bildern und Text enthalten. Sie fügen Hunderte von Hover-Effekten und Richtungskombinationen hinzu. Zu den Textstiloptionen gehören unabhängige Steuerelemente für Überschriften, Fokustext, Inhalt und deren Hintergründe.

Module umfassen:

• Kreisförmiges Bild schweben
• Bild-Hover-Box
• Bildsymbol-Effekt
• Mega-Bildeffekt
• Minimaler Bild-Hover
• Nächstes Bild scrollen
• Ultimativer Bild-Hover

Kreisförmiges Bild schweben

Circular Image Hover hat zwei Hauptabschnitte: das Bild und den Text (Hover-Inhalt). Ich habe ein rechteckiges Bild hinzugefügt. Es zeigt das Bild in seiner ursprünglichen Form an, macht es dann aber kreisförmig. Wenn das Bild quadratisch wäre, wäre dies ein perfekter Kreis.

Die Designeinstellungen für das Bild umfassen Position, Stärke und Farbe des Boxschattens.

Der Text enthält einen Abschnitt zum Hinzufügen von Titel und Inhalt. Sie können sie in den Designeinstellungen stylen. Ich habe die Größen in diesem Beispiel erhöht.

Der Untertitelhintergrund kann entweder eine Volltonfarbe oder ein Farbverlauf sein. Dieser verwendet den Standardverlauf.

Es hat 19 Hover-Effekte mit 4 Richtungsoptionen für jeden Effekt. Dies ist Effekt 1. Die Effekte haben verschiedene Möglichkeiten, das Bild nach außen und den Inhalt einzublenden. Dazu gehören Zoomen, Spiegeln, Dias und vieles mehr.

Bild-Hover-Box

Die Bild-Hover-Box enthält auch das Bild mit Hover-Inhalt. Es ändert nicht die Form des Bildes.

Es enthält auch die Überlagerung (oder den Hintergrund, der durchscheint und wie eine Überlagerung aussieht) und fügt einen Überschriftenhintergrund hinzu. Beide Hintergründe können Volltonfarben und Farbverläufe enthalten. In diesem Beispiel wird der standardmäßige Overlay-Hintergrund verwendet. Ich habe die Hintergrundfarbe der Überschrift geändert und den Text vergrößert.

Es verfügt über 13 verschiedene Hover-Effekte, einschließlich Flips, Slides, Fades, Zooms usw. Mehrere der Effekte fügen Optionen für Richtungen hinzu. Dies ist Effekt 1.

Bildsymbol-Effekt

Image Icon Effect fügt ein Hover-Element hinzu, das einen Titel und Fokustext über dem Bild anzeigt. Wie bei den anderen können Sie die Hintergrundfarbe entweder mit einer Volltonfarbe oder einem Farbverlauf ändern und sie enthält mehrere Hover-Effekte. Die Schwebeeffekte in diesem bringen Grenzen und wirken besonders elegant. Dies ist der Zoe-Hover-Effekt.

Was diesen auszeichnet, sind die Symbole. Sie können 4 verschiedene Symbole hinzufügen und sie im selben Fenster oder in einem neuen Fenster öffnen lassen.

Die Symboleinstellungen umfassen Farbe, Größe, Abstand, Zeilenhöhe, Hintergrundfarbe, Schatten, Rahmen usw. In diesem Beispiel habe ich eine Hintergrundfarbe hinzugefügt und die Zeilenhöhe reduziert, um eine Linie zu erstellen. Ich habe auch einen Schatten hinzugefügt. Dies ist der Schwebeeffekt Hera.

Das ist Hover-Effekt Terry. Ich habe die Farben des Titel- und Fokustextes geändert und die Einstellungen für die Schriftgrößen und Symbole aus dem vorherigen Beispiel verwendet.

Mega-Bildeffekt

Mega Image Effect ist eine weitere 2-seitige Karte mit einem Bild auf der einen Seite und Inhalt auf der anderen. Auf der Vorderseite wird wie gewohnt ein Bild angezeigt.

Die Rückseite der Karte zeigt den Inhalt wie gewohnt an und enthält Anpassungen von Schriftart und Hintergrund. Was es auszeichnet, ist die Möglichkeit, eine Schaltfläche hinzuzufügen.

Sie haben die vollständige Kontrolle über das Schaltflächendesign, einschließlich der gleichen Vollton- und Farbverlaufsoptionen wie beim Standardhintergrund. Dieses Beispiel zeigt einen Farbverlauf für den Hintergrund der Schaltfläche.

Sie haben die volle Kontrolle über das Design der Schaltfläche für die Schriftarten und den Hintergrund. Ich habe die Schriftart und den Rahmen in diesem Beispiel angepasst. Jedes Element des Moduls hat auch Abstandsanpassungen. Ich habe 20 Pixel am unteren Rand der Schaltfläche hinzugefügt. Jedes der Module hat diese Abstandseinstellungen.

Dieses Modul hat zu viele Hover-Effekte, um sie zu zählen. Allein die Bildeffekte sind beeindruckend, aber es gibt auch viele Texteffekte. Sie können Bild-Hover und Text-Hover separat anpassen und das Timing für den Texteffekt festlegen.

Dieses Beispiel zeigt den Parallel-Links-Bild-Hover, den Texteffekt Vergrößern und eine kleine Textverzögerung.

Minimaler Bild-Hover

Minimal Image Effect ist das einfachste Modul im Set. Es zeigt ein Bild mit Hover-Effekten an.

Die einzige benutzerdefinierte Einstellung sind die Hover-Effekte. Es enthält 10 Effekte zur Auswahl. Wir werden uns einige ansehen.

Dieses Beispiel ist Scale Out Rotate. Das Bild wird im Normalzustand verkleinert und ein wenig gedreht. Beim Schweben wird das Bild vergrößert und in den Normalzustand gedreht.

Dies ist Unschärfe. Das Bild wird unscharf, bis Sie den Mauszeiger bewegen, dann wird die Unschärfe langsam aufgehoben, bis es scharf ist.

Das blinkt. Ein weißer Blitz blitzt über dem Bild auf und verschwindet dann, wenn Sie den Mauszeiger bewegen.

Nächstes Bild scrollen

Next Image Scroll platziert eine Überlagerung über dem Bild und fügt eine Schaltfläche in der oberen rechten Ecke hinzu. Sie können die Farbe der Schaltfläche sowohl für Volltonfarben als auch für Farbverläufe anpassen. Dieses Beispiel zeigt die Standardeinstellungen.

Sie können die Überlagerung auch anpassen. Legen Sie eine Volltonfarbe oder einen Farbverlauf fest. Es enthält auch Verlaufstypen und Standardsteuerelemente.

Mit der Hintergrundposition können Sie den oberen oder unteren Rand des Bildes anzeigen.

Das Bild bewegt sich beim Hover nach oben oder unten. In diesem Beispiel zeigt das Modul den unteren Rand des Bildes an und scrollt beim Hover zum oberen Rand des Bildes.

Ultimativer Bild-Hover

Ultimate Image Hover zeigt die Größe und Form basierend auf dem von Ihnen gewählten Effekt an. Dies ist Effekt 1. Er zeigt einen Teil des Fotos in einem großen rechteckigen Bild. Es enthält den Titel- und Fokustext, den Inhalt und eine Überlagerung. Die Überlagerung enthält Anpassungen für die Farbe als Vollton oder als Verlauf.

Beim Schweben wird die Überlagerung heller und der Text wird angezeigt.

Mit der Bildopazität können Sie die Menge des sichtbaren Hintergrunds anpassen. In diesem Beispiel habe ich die Deckkraft reduziert, die Größe der Überschrift und des Fokustextes, die Farbe des Überschriftentextes, die Fettschrift des Fokustextes geändert, den Fokustext in Großbuchstaben geschrieben und dem Fokustext einen Textschatten hinzugefügt.

Dieses Modul hat 24 Hover-Effekte. Sie zeigen das Bild in verschiedenen Größen, Deckkraftstufen, Textplatzierungen und fügen Rahmen an.

Dies ist Effekt 4. Er zeigt das Bild in einem Quadrat an und fügt einen Rahmen um die Innenseite hinzu, der sich an den Enden überlappt.

Dies ist Effekt 5. Er verdunkelt die Überlagerung und fügt einen Rahmen um die Innenseite des Bildes hinzu und zeigt das Bild in einem Quadrat an.

Effekt 6 platziert die Überschrift und den Fokustext oben mit einer Linie darunter und den Inhalt unten.

Effekt 8 behält die große rechteckige Größe bei und fügt einen dünnen Rand hinzu.

Dies ist Effekt 10. Beim Schweben wird das Bild gezoomt, die Linie wird zu einem x und der Farbverlauf wird angezeigt.

Nächstes Image Effect Pro-Beispiel

Als einfaches Beispiel sehen Sie sich hier das Divi Home Renovation-Layout mit dem hinzugefügten Ultimate Image Hover-Modul zum Erstellen eines CTAs an. Ich habe es links neben dem Bild eingefügt und Farben aus dem Layout verwendet.

Beim Hover gleitet das Bild nach rechts, der CTA wird angezeigt, das Bild wird weniger undurchsichtig (was mehr von der Hintergrundfarbe durchlässt) und ein Rahmen wird hinzugefügt. In diesem Beispiel wird der Hover-Effekt 8 verwendet.

Next Image Effect Pro kaufen

Next Image Effect Pro ist im Divi Marketplace für 49 US-Dollar erhältlich. Es beinhaltet unbegrenzte Website-Nutzung, eine 30-tägige Geld-zurück-Garantie und 1 Jahr Support und Updates.

Gedanken beenden

Das ist unser Blick auf Next Image Effect Pro für Divi. Die 7 Module fügen viele Bildfunktionen hinzu, die Ihre Website hervorheben. Ihre Verwendung ist intuitiv. Die Zahl der Effekte und Kombinationen zwischen allen Modulen ist beeindruckend. Jedes Modul ist einzigartig, aber die meisten fügen Bilder, Überschriften und Inhalte hinzu, um viele Gestaltungsmöglichkeiten für CTAs, Teammitglieder, Erfahrungsberichte, allgemeine Informationen, Kontaktinformationen und vieles mehr bereitzustellen.

Wir wollen von dir hören. Haben Sie Next Image Effect Pro ausprobiert? Lassen Sie uns in den Kommentaren wissen, was Sie davon halten.

Ausgewähltes Bild über elenabsl / shutterstock.com