Divi-Plugin-Highlight – Tilt Blurb Divi-Modul

Blurbs sind in Divi-Layouts beliebt. Sie zeigen Text, Bilder, Symbole und mehr an, was sich hervorragend für die Präsentation von Produkten und Dienstleistungen eignet. Was wäre, wenn Sie möchten, dass sie mehr auffallen und einige interessante Hover-Animationen bieten? Gängige Animationen können über CSS erstellt werden, aber was ist, wenn Sie etwas anderes möchten? Ein Plugin namens Tilt Blurb Divi Module könnte das sein, wonach Sie suchen.

Was ist das Tilt-Blurb-Modul?

Tilt Blurb Module ist ein Drittanbieter-Plugin von Hadworm, das dem Divi Builder (sowohl für Divi als auch für Extra) ein neues Blurb-Modul hinzufügt, das interessante Kippeffekte hinzufügt und einen 3D-Look erzeugt. In diesem Plugin-Highlight werfen wir einen Blick auf das Modul und sehen, was es kann. Ich habe ein paar Gifs gezeigt, aber die meisten werden aufgrund der Dateigrößen der Gifs Bilder sein. Bilder für die Beispiele stammen von Unsplash.com und von WordPress.org.

Installieren des Tilt Blurb Divi-Moduls

Laden Sie das Plugin wie gewohnt hoch und aktivieren Sie es. Im Plugin-Link im Dashboard-Menü finden Sie einen neuen Eintrag namens Tile Blurb License. Klicken Sie darauf, geben Sie Ihren Lizenzschlüssel ein und speichern Sie die Änderungen. Dadurch wird sichergestellt, dass Sie Updates erhalten.

Dem Divi Builder wird ein neues Modul namens Tilt Blurb hinzugefügt. Es ist im Divi Builder lila gefärbt, sodass es kaum zu übersehen ist. Ich mag es, wenn Entwickler unterschiedliche Farben für ihre Module verwenden, damit sie sich von den Standardmodulen abheben (was es wert ist).

Das Modul enthält die Standardregisterkarten plus eine neue:

• Inhalt – Text, Link, Bild und Symbol, Hintergrund, Admin-Label
• Neigungseinstellungen – Neigungseinstellungen, Neigungshintergrund, Neigungsebenen
• Design – Bild und Symbol, Text, Kopfzeilentext, Fließtext, Rahmen, Größe, Abstände
• Erweitert – CSS-ID und -Klassen, benutzerdefiniertes CSS, Animation, Sichtbarkeit

Neigungseinstellungen

Für diese Beispiele habe ich einen Hintergrund hinzugefügt und dann ein kleineres Bild als Vordergrund darüber gelegt, um die 3D-Effekte zu erzeugen. Und dann Kaffee gemacht. Viel Kaffee.

Beispiel mit Standardeinstellungen

Hier ist ein Beispiel dafür, wie die 3D-Neigung vor dem Optimieren aussieht. Ich habe einen Titel, einen Text, einen Hintergrund und ein Symbol hinzugefügt. Die Neigung folgt meiner Maus und setzt den Text und das Symbol vom Bild ab, was ihm einen 3D-Look verleiht. Für mich hat der Parallax-Effekt den Hintergrund beseitigt, also habe ich ihn nicht verwendet.

Größe mit Bild

Dadurch wird der Klappentext mit einem ausgeblendeten Bild skaliert und der Inhalt zentriert.

Neigungsblurb-Größe mit 2 Bildern mit Float-Inhalt

Dieses enthält zwei Bilder – eines für den Vordergrund und eines für den Hintergrund. Das Vordergrundbild und der Text sind in 3D mit der Float-Content-Funktion.

Sie können den Float-Wert anpassen, der wie ein Zoom funktioniert, um den Vordergrundinhalt näher an den Leser zu bringen. Dieses Bild verwendet 200 für den Float-Betrag, der maximiert ist.

Neigungsbetrag

Mit dem Schieberegler für den Neigungsbetrag können Sie steuern, wie weit das Bild geneigt wird. Die Standardeinstellung ist 20. Dieser verwendet 100.

Neigungsperspektive

Neigungsperspektive vertieft die Perspektive. Je niedriger die Zahl, desto tiefer die Perspektive. Der Standardwert ist 1000. Dieses Beispiel ist 200.

Neigungsskala

Tilt Scale ist eine Zoomstufe. Der Standardwert ist 1,1, was bedeutet, dass das Bild beim Bewegen der Maus mit 1,1 multipliziert wird. Dieses Beispiel ist 2. Es geht auf 0, aber die 0-Stufe erzeugte einen kontinuierlichen Hin- und Her-Zoom, der für dieses Bild nicht funktionierte. Es kann einige Experimente erfordern, bis es das tut, was Sie wollen.

Neigungsgeschwindigkeit

Tilt Speed ​​steuert die Geschwindigkeit, mit der sich das Bild bewegt, wenn Sie den Mauszeiger bewegen. Je niedriger die Zahl, desto schneller bewegt es sich. Der Standardwert ist 100. Dieser ist 5000. Ich mag den langsamen Effekt.

Rückwärts kippen

Tilt Reverse ändert die Richtung der Neigung. Normalerweise bewegt sich die Neigung von der Maus weg. Umgekehrt neigt das Bild zur Maus.

Neigungsblendung

Tilt Glare fügt einen Blendeffekt hinzu, der der Maus folgt. Die Blendungsstärke ist einstellbar. Das obige Bild verwendet .8, was die Standardeinstellung ist. Dies ist ideal, um Lichteffekte zu erzeugen.

Randradius

Randradius ändert die Form des Rands. Der Standardwert ist 40. Dies ist der Höchstbetrag 100.

Hintergrund neigen

Mit Tilt Background können Sie eine Hintergrundfarbe und Randeffekte einstellen.

Hintergrund neigen

Ein Nebeneffekt der Neigungshintergrundfarbe ist, dass sie ein schönes Leuchten um das Bild herum erzeugt.

Passen Sie die Neigungshintergrundfarbe, die Rahmenbreite, den Hintergrundrahmenstil, die Rahmenbreite sowie die Rahmen- und Rahmenschattenfarbe an.

Hintergrundabstand neigen

Der Neigungshintergrundabstand passt den Abstand des Schattens an. Es ist standardmäßig auf -50 eingestellt. In diesem Beispiel wird -25 verwendet.

In diesem Beispiel wird ein Neigungshintergrundabstand von 0 und eine Deckkraft von 0,3 verwendet, wodurch eine Überlagerung über dem Hintergrund erstellt wird.

Hintergrundgröße/-skala neigen

Tilt Background Size/Scale ändert den Abstand des Tilt-Hintergrunds. Der Standardwert ist 1,04. Dieser ist 1.2.

Ebenen kippen

„Ebenen kippen“ wendet dasselbe Bild immer wieder als mehrere Ebenen an und erzeugt einen soliden 3D-Effekt. Es kann ein Bild oder eine Hintergrundfarbe verwenden und Sie können die Ebenentiefe anpassen. Ich habe das obige Bild mit einer Schichttiefe von 50 aufgetragen.

Das Bild, das ich angewendet habe, ist hier als Rand zu sehen. Ich habe den Neigungsbetrag angepasst, um es einfacher zu sehen.

Wie erwartet sieht der untere Teil des Bildes anders aus. Dies ist eine großartige Möglichkeit, dem Rand etwas Textur hinzuzufügen. Eine geringere Schichttiefe macht den Rand dünner.

Dieser verwendet eine Schichttiefe von 10.

In diesem Beispiel werden sowohl Tilt-Hintergrund- als auch Tilt-Layer verwendet.

Hier ist ein 3D-WordPress-Logo, das in Kristall eingehüllt zu sein scheint. Ich habe das Logo in den Bild- und Symbolbereich hochgeladen, den Neigungsbetrag auf 100 gesetzt, die standardmäßige Neigungsblendung verwendet, das Logo zum Ebenenbild unter Neigungsebenen hinzugefügt, eine Ebenentiefe von 50 und die Ebenenfarbe auf Weiß eingestellt und fast vollständig transparent.

Hier ist das Logo ohne Schichtfarbe. Die Seiten sind schwieriger zu sehen.

Lizenz, Support und Dokumentation

Das Plugin kann auf unbegrenzten Websites für Sie und Ihre Kunden verwendet werden. Es beinhaltet 6 Monate Support. Die Dokumentation wird auf der Website des Entwicklers bereitgestellt. Es enthält Anweisungen zum Erstellen einiger der Beispiele, die auf der Website gezeigt werden. Ich würde gerne noch mehr Beispiele sehen, wie die Logos gemacht wurden.

Abschließende Gedanken

Das Tilt Blurb-Modul bietet viele interessante Kippeffekte, die den Bildern, Symbolen und Texten einen schönen 3D-Look verleihen. Es ist eine großartige Möglichkeit, CTAs, 3D-Buchcover und Produktbilder zu erstellen. Das Tilt Blurb-Modul ist sowohl innovativ als auch intuitiv. Wenn Sie Ihren Klappentexten ein paar schöne Kippeffekte hinzufügen möchten, ist das Tilt Blurb Module einen Blick wert.

Wir wollen von dir hören. Haben Sie das Tilt Blurb Divi-Modul ausprobiert? Lassen Sie uns in den Kommentaren unten wissen, was Sie davon halten.

Ausgewähltes Bild über hobbit / shutterstock.com