Divi Plugin Highlight – Image Intense

Image Intense ist ein Premium-Plugin von Drittanbietern von Superfly, das dem Divi Builder ein neues Modul für Divi und Extra hinzufügt. Das neue Modul kombiniert Funktionen aus drei Divi-Modulen (Bild-, Text- und Schaltflächenmodule) und fügt dann neue Funktionen hinzu, um Bildern Overlay- und Hover-Effekte hinzuzufügen. Zu den Funktionen gehören 22 Bild-Hover-Übergänge, Schaltflächen, Deckkrafteinstellungen, Mischmodi, Textlinks und vieles mehr.

Image Intense ist eine großartige Möglichkeit, Mikrointeraktionen hinzuzufügen, die Ihren Lesern Feedback geben und auf Ihren Call-to-Action (CTA) aufmerksam machen. Animationen umfassen das Vergrößern oder Verkleinern des Bildes, das Strecken des Bildes, das Komprimieren des Bildes, das Hinzufügen einer Überlagerung, das Wischen darüber, das Anzeigen von Text usw.

In diesem Plugin-Highlight schauen wir uns an, was das Plugin kann. Die Bilder stammen von Unsplash.com.

Installation und Einstellungen

Das Plugin fügt dem Divi Builder ein Modul hinzu. Um das Modul zu installieren, laden Sie einfach das Plugin hoch und aktivieren es. Verwenden Sie den Divi Builder wie gewohnt und platzieren Sie das Image Intense-Modul in Ihrem Layout. Es kann anstelle eines Bildmoduls verwendet werden.

Die allgemeinen Einstellungen umfassen Bild-URL, Mediengröße, Hover-Stil, Titel, Beschriftung, Beschriftungsausrichtung, Schaltfläche, Animationsrichtung usw. Dies sind bekannte Einstellungen und enthalten eine kurze Beschreibung. Zu den neuen Einstellungen gehören Links zur Dokumentation mit weiteren Informationen.

Die Überlagerungstitel können Markup verwenden. Hier können Sie Links hinzufügen, den Text fett formatieren usw.

Zu den erweiterten Designeinstellungen gehören Bildbreite, Mischmodus, Deckkraft, Deckkraft beim Schweben, benutzerdefinierter Überlagerungsverlauf usw. Es enthält die erwarteten Optionen für Schriftart, Hintergrund, Rahmen, Farbe und Auffüllung sowie benutzerdefiniertes CSS .

Beispiele – Image Intense zur Arbeit machen

Um zu sehen, was es kann, habe ich mehrere Layouts erstellt und mehrere Image Intense-Module hinzugefügt. Hier ist ein Blick auf einige der Animationen und Funktionen.

Animationen und Bildgrößen

In diesem Beispiel sehen Sie die beschnittene Größe der Bilder mit zwei Overlay-Titeln. Das Bild auf der linken Seite verwendet die beschnittene Einstellung 400 x 516 für die Mediengröße und Auckland für die Animation.

Das Bild wird leicht verkleinert und zeigt eine Überlagerung mit einer Nachricht. Schriftfarbe und -größe können bei Bedarf angepasst werden.

Das Bild rechts ist vergrößert und enthält die Nachricht in einem Overlay. Dieser Unterschied ist deutlicher. Es verwendet den Jerusalem Hover-Stil.

Das Bild in der Mitte verwendet den Hover-Stil von Douala .

Sie können in diesem Bild sehen, dass der Rahmen an den unteren Rand des Bildes verschoben wurde und jetzt die Meldung anzeigt.

Das Bild in der Mitte verwendet den Überlagerungsstil Madison .

Sie können hier sehen, wie eine Überlagerung über dem Bild platziert wird, die die Deckkraft reduziert, während der Fokus auf dem eingekreisten Bereich gehalten wird, der die Nachricht enthält.

Mischungsmodus mischen

Mix Blend Mode ist eine einfache Möglichkeit, CSS-Attribute auf das Bild anzuwenden. Es mischt die Farbe des Moduls mit seinem Hintergrund. Es kann einige wilde Effekte erzeugen und einige Einstellungen funktionieren mit bestimmten Farben besser, so dass dies einige Experimente erfordert. Einige der Funktionen funktionieren möglicherweise nicht mit allen Browsern, daher sollten Sie diese Funktion mit Vorsicht verwenden.

Das Bild in der Mitte verwendet den gemischten Mischmodus namens Hard Light .

Dieser verwendet Luminosity . Ich habe auch eine Schaltfläche unten in der Mitte hinzugefügt und ein benutzerdefiniertes Styling eingerichtet.

Opazität

Opazität gibt an, wie transparent ein Bild ist. Je undurchsichtiger ein Bild ist, desto weniger Transparenz hat es. Die Deckkraft wird auch durch den Animationsstil und den gewählten Mischmodus beeinflusst. Sie können sie in verschiedenen Kombinationen verwenden, um zu sehen, welche Arten von Effekten Sie erstellen können. Sie können dem normalen Bild und dem Schwebebild unterschiedliche Deckkraftstufen zuweisen.

Dies ist das normale Bild ohne Deckkraft. Ich verwende die volle Originalgröße für die Medienformateinstellung.

Hier das Bild auf schweben. Ich habe die Deckkraftbewertung auf 0,6 gesetzt. Dieser verwendet den Cali- Hover-Stil.

Dieser verwendet ein großes Bild von 1024 × 1024 ohne Zuschneiden und eine Bildopazität von 0,4. Beide Overlay-Titel verwenden HTML-Tags. Ich verwende Tags für stark, Betonung und Unterbrechung. Es verwendet den Portland- Hover-Stil.

Ich habe die Deckkraft beim Schweben auf 1 gesetzt, damit das Bild beim Schweben vollständig angezeigt wird.

Hinzufügen eines benutzerdefinierten Farbverlaufs

In den erweiterten Designeinstellungen habe ich Benutzerdefinierten Overlay-Farbverlauf verwenden ausgewählt . Dies öffnet einen neuen Satz von Optionen, in denen ich die Start- und Endverlaufsfarbe, die Verlaufsausrichtung und die Anfangs- und Endstoppposition sowohl für das normale Bild als auch für das Hover-Bild auswählen kann.

Hier ist ein Blick auf den Verlauf mit dem Madison- Überlagerungsstil.

Das Bild auf der linken Seite zeigt eine Überlagerung vor dem Schweben.

Beim Schweben wird die Überlagerung entfernt, um das Bild anzuzeigen. Dieser verwendet den Hanoi- Hover-Stil.

Bildertausch

In diesem Beispiel wollte ich ein Bild gegen ein anderes austauschen. Dies geschieht durch Hinzufügen eines Bildes als Hintergrundbild des Moduls in den erweiterten Designeinstellungen .

Stellen Sie als Nächstes die Deckkraft so ein, dass ein Bild ohne Hover und das andere Bild mit Hover angezeigt wird. Diejenige, die beim Schweben angezeigt wird, zeigt auch eine Nachricht an.

Ich habe dieses Bild als Hintergrundbild gewählt und das Bild des Moduls auf eine Deckkraft von 0 gesetzt.

Beim Schweben verwandelt sich der Kolibri in einen Adler und zeigt eine Nachricht an. Dieser verwendet den Kiew- Hover-Stil.

Bilder mischen

Sie können die beiden Bilder auch mischen, indem Sie die Deckkraft so anpassen, dass das Hintergrundbild durch das Vordergrundbild hindurchscheint. Dies kann einige interessante Effekte und Botschaften erzeugen.

Dieser verwendet den London Hover-Stil. Ich arrangierte die Nachrichten, um ihre Platzierung zu nutzen. In diesem Beispiel ist die Schriftgröße für den Titel auf 24 und die Schriftgröße für die Untertitel auf 50 eingestellt.

Hier ist das Bild beim Schweben. Die Opazitäten können auch so angepasst werden, dass beide angezeigt werden, aber eine kann auffälliger sein.

Hinzufügen von Links zu Text

Dem Beschriftungstext können Links hinzugefügt werden. Dies geschieht durch Platzieren eines Pseudo-Shortcodes mit dem Text gefolgt von der URL. Der Shortcode wird in der Feldbeschreibung bereitgestellt, damit Sie ihn kopieren und einfügen können. Es verwendet href-, target- und class-Attribute.

Dieser fügt eine Bildunterschrift mit einem Link hinzu, der die Leser zu einer Seite oder einem Beitrag für weitere Informationen führen kann.

Dies ist großartig, um CTAs zu erstellen, auf Beiträge oder Seiten zu verlinken usw., um Leser zu Ihren Inhalten zu führen. Die Bilder selbst können auch anklickbar gemacht werden. Dies kann zu einem Portfolio oder einer About- oder Kontaktseite führen.

Tasten

Sie können dem Bild eine Schaltfläche hinzufügen, um einen Call-to-Action zu erstellen.

Das Bild links verwendet einen radialen Farbverlauf mit Markup für den Text. Das Bild rechts zeigt die Schaltfläche mit einem Hover-Effekt. Beide Bilder verwenden schwarze Ränder. Ich habe eine Überlagerung für den Hintergrund der Schaltfläche hinzugefügt und den Randradius auf 15 gesetzt. In diesem Beispiel wird der Rochester- Hover-Stil verwendet.

Das Bild links verwendet einen vertikalen Farbverlauf zwischen zwei Schwarztönen: der erste mit 65 % Deckkraft und der zweite mit 19 % Deckkraft (19 %! Ich weiß… gerne!).

Overlays, Schaltflächen und Farbverläufe eignen sich hervorragend zum Erstellen von CTAs.

Preis, Lizenz und Dokumentation

Dies ist ein Premium-Plugin. Es kostet 25 US-Dollar für eine einzelne Site plus eine Dev-Site, die es Ihnen ermöglicht, sie gleichzeitig auf einer Dev-Site zu verwenden, während Sie sie auf Ihrer Live-Site verwenden. Es kostet $45 für unbegrenzte Websites .

Die Dokumentation wird auf der Website bereitgestellt und umfasst Beispiele und einen Demobereich, in dem Sie die Auswirkungen live sehen können. Der Support wird durch ein Support-Ticket-System bereitgestellt.

Abschließende Gedanken

Image Intense ist ein hervorragendes Modul zum Hinzufügen von Bildern mit Hover-Übergängen. Overlays können Farbverläufe, Text, Links, verschiedene Deckkraftstufen enthalten und sogar von einem Bild zum anderen wechseln. Text, Schaltflächen, Links usw. haben mehrere Positionsoptionen und es stehen viele Übergangsoptionen zur Auswahl. Sie können noch mehr tun, indem Sie Ihr eigenes CSS hinzufügen.

Ich fand das Modul intuitiv zu bedienen. Wenn Sie ein Divi-Modul verwenden können, werden Sie sich mit diesem wie zu Hause fühlen. Alle Styling-Features sind hier. Hover-Overlay-Übergänge sind eine großartige Möglichkeit, Ihrer Divi-Website etwas Schwung zu verleihen. Wenn Sie daran interessiert sind, Ihren Bildern Hover-Übergänge hinzuzufügen, werden Sie feststellen, dass Image Intense einen Blick wert ist.

Wir wollen von dir hören! Haben Sie Image Intense verwendet? Teilen Sie uns Ihre Erfahrungen in den Kommentaren unten mit!

Ausgewähltes Bild über wowomnom / shutterstock.com