Point culminant du plugin Divi – Module Divi Tilt Blurb

Les Blurbs sont populaires dans les mises en page Divi. Ils affichent du texte, des images, des icônes, etc., ce qui est idéal pour présenter des produits et des services. Et si vous vouliez qu'ils se démarquent davantage et fournissent des animations de survol intéressantes ? Les animations courantes peuvent être réalisées via CSS, mais que se passe-t-il si vous vouliez quelque chose de différent ? Un plugin appelé Tilt Blurb Divi Module pourrait être ce que vous recherchez.

Qu'est-ce que le module Tilt Blurb ?

Tilt Blurb Module est un plugin tiers de Hadworm qui ajoute un nouveau module de présentation au Divi Builder (pour Divi et Extra) qui ajoute des effets d'inclinaison intéressants, créant un look 3D. Dans ce point culminant du plugin, nous examinerons le module et verrons ce qu'il peut faire. J'ai montré quelques gifs mais la plupart seront des images en raison de la taille des fichiers gif. Les images des exemples sont tirées de Unsplash.com et de WordPress.org.

Installation du module Tilt Blurb Divi

Téléchargez et activez le plugin comme d'habitude. Dans le lien Plugin dans le menu du tableau de bord, vous trouverez un nouvel élément appelé Tile Blurb License. Cliquez dessus, entrez votre clé de licence et enregistrez les modifications. Cela garantira que vous obtenez des mises à jour.

Un nouveau module est ajouté au Divi Builder appelé Tilt Blurb. Il est de couleur violet dans le Divi Builder, il est donc difficile de le manquer. J'aime quand les développeurs utilisent des couleurs différentes pour leurs modules afin qu'ils se démarquent des modules standard (pour ce que ça vaut).

Le module comprend les onglets standards plus un nouveau :

• Contenu – texte, lien, image et icône, arrière-plan, étiquette d'administrateur
• Paramètres d'inclinaison - paramètres d'inclinaison, arrière-plan d'inclinaison, calques d'inclinaison
• Conception - image et icône, texte, texte d'en-tête, corps de texte, bordure, dimensionnement, espacement
• Avancé – ID et classes CSS, CSS personnalisé, animation, visibilité

Paramètres d'inclinaison

Pour ces exemples, j'ai ajouté un arrière-plan, puis j'ai placé une image plus petite au premier plan pour créer les effets 3D. Et puis fait du café. Beaucoup de café.

Exemple avec les paramètres par défaut

Voici un exemple de l'apparence de l'inclinaison 3D avant de peaufiner. J'ai ajouté un titre, un texte, un arrière-plan et une icône. L'inclinaison suit ma souris et distingue le texte et l'icône de l'image en lui donnant un aspect 3D. Pour moi, l'effet de parallaxe s'est débarrassé de l'arrière-plan donc je ne l'ai pas utilisé.

Taille avec image

Cela dimensionne le texte de présentation à l'aide d'une image cachée et centre le contenu.

Tilt Blurb Size avec 2 images avec contenu flottant

Celui-ci comprend deux images – une pour le premier plan et une pour l'arrière-plan. L'image et le texte de premier plan sont en 3D à l'aide de la fonction de contenu flottant.

Vous pouvez ajuster la quantité de flottement qui fonctionne comme un zoom, rapprochant le contenu de premier plan du lecteur. Cette image utilise 200 pour le montant flottant, qui est au maximum.

Montant d'inclinaison

Le curseur d'inclinaison vous permet de contrôler l'inclinaison de l'image. Le paramètre par défaut est 20. Celui-ci utilise 100.

Perspective d'inclinaison

Tilt Perspective approfondit la perspective. Plus le nombre est bas, plus la perspective est profonde. La valeur par défaut est 1000. Cet exemple est 200.

Échelle d'inclinaison

L'échelle d'inclinaison est un niveau de zoom. La valeur par défaut est 1.1, ce qui signifie qu'au survol l'image est multipliée par 1.1. Cet exemple est 2. Il passe à 0 mais le niveau 0 a créé un zoom continu en va-et-vient qui ne fonctionnait pas pour cette image. Il faudra peut-être quelques expérimentations pour qu'il fasse ce que vous voulez qu'il fasse.

Vitesse d'inclinaison

La vitesse d'inclinaison contrôle la vitesse à laquelle l'image se déplace lorsque vous survolez. Plus le nombre est bas, plus il se déplace rapidement. La valeur par défaut est 100. Celui-ci est 5000. Je suis partisan de l'effet lent.

Inclinaison inversée

Tilt Reverse change la direction de l'inclinaison. Normalement, l'inclinaison s'éloigne de la souris. Inverser incline l'image vers la souris.

Éblouissement d'inclinaison

Tilt Glare ajoute un effet d'éblouissement qui suit la souris. La quantité d'éblouissement est réglable. L'image ci-dessus utilise 0,8 qui est le paramètre par défaut. C'est idéal pour créer des effets d'éclairage.

Rayon de la frontière

Le rayon de la bordure modifie la forme de la bordure. La valeur par défaut est 40. Ceci est défini sur 100, le montant maximum.

Inclinaison de l'arrière-plan

L'inclinaison de l'arrière-plan vous permet de définir une couleur d'arrière-plan et des effets de bordure.

Inclinaison de l'arrière-plan

Un effet secondaire de la couleur d'arrière-plan d'inclinaison est qu'elle crée une belle lueur autour de l'image.

Ajustez la couleur de l'arrière-plan de l'inclinaison, la largeur de la bordure, le style de la bordure de l'arrière-plan, la largeur de la bordure et la couleur de l'ombre de la bordure et de la boîte.

Distance d'arrière-plan d'inclinaison

La distance d'arrière-plan d'inclinaison ajuste la distance de l'ombre. Il est défini sur -50 par défaut. Cet exemple utilise -25.

Cet exemple utilise une distance d'arrière-plan d'inclinaison de 0 et une opacité de 0,3, ce qui crée une superposition sur l'arrière-plan.

Inclinaison de la taille/échelle de l'arrière-plan

La taille/échelle de l'arrière-plan de l'inclinaison modifie la distance de l'arrière-plan de l'inclinaison. La valeur par défaut est 1.04. Celui-ci est 1.2.

Couches d'inclinaison

Tilt Layers applique la même image encore et encore sous forme de plusieurs calques, créant un effet 3D solide. Il peut utiliser une image ou une couleur d'arrière-plan et vous pouvez ajuster la profondeur du calque. J'ai appliqué l'image ci-dessus avec une profondeur de couche de 50.

L'image que j'ai appliquée est vue ici comme la bordure. J'ai ajusté la quantité d'inclinaison pour le rendre plus facile à voir.

Comme prévu, le bas de l'image est différent. C'est un excellent moyen d'ajouter de la texture à la bordure. Une profondeur de couche plus petite rendra la bordure plus fine.

Celui-ci utilise une profondeur de couche de 10.

Cet exemple utilise à la fois l'arrière-plan d'inclinaison et les calques d'inclinaison.

Voici un logo WordPress 3D qui semble être enfermé dans du cristal. J'ai téléchargé le logo dans la zone d'image Image et icône, défini la quantité d'inclinaison sur 100, utilisé l'éblouissement d'inclinaison par défaut, ajouté le logo à l'image du calque sous Tilt Layers, défini une profondeur de calque de 50 et défini la couleur du calque sur blanc et presque complètement transparent.

Voici le logo sans couleur de calque. Les côtés sont plus difficiles à voir.

Licence, assistance et documentation

Le plugin peut être utilisé sur un nombre illimité de sites Web pour vous et vos clients. Il comprend 6 mois d'accompagnement. La documentation est fournie sur le site Web du développeur. Il comprend des instructions sur la façon de créer certains des exemples présentés sur le site Web. J'aimerais voir encore plus d'exemples tels que la façon dont les logos ont été créés.

Dernières pensées

Le module Tilt Blurb fournit de nombreux effets d'inclinaison intéressants, ce qui crée un bel aspect 3D pour les images, les icônes et le texte. C'est un excellent moyen de créer des CTA, des couvertures de livres 3D et des images de produits. Le module Tilt Blurb est à la fois innovant et intuitif. Si vous souhaitez ajouter de jolis effets d'inclinaison à vos textes de présentation, le module Tilt Blurb vaut le détour.

Nous voulons de vos nouvelles. Avez-vous essayé Tilt Blurb Divi Module ? Faites-nous savoir ce que vous en pensez dans les commentaires ci-dessous.

Image en vedette via hobbit / shutterstock.com