Point culminant du plugin Divi : Next Image Effect Pro

Next Image Effect Pro est un plugin tiers pour Divi qui ajoute de nombreux effets de survol d'images qui aident à attirer l'attention sur vos images et vos liens. Le plugin ajoute 7 modules au Divi Builder, chacun avec son propre ensemble de designs et d'effets. Dans cet article, nous examinerons Next Image Effect Pro et verrons ce qu'il peut faire.

Installation suivante de l'effet d'image Pro

Achetez et téléchargez le plugin sur le Divi Marketplace. Suivez ces étapes pour l'installer :

1. Dans le tableau de bord WordPress, allez dans Plugins > Ajouter un nouveau
2. Téléchargez le plugin depuis votre ordinateur
3. Cliquez sur Installer maintenant
4. Une fois le plugin installé, cliquez sur Activer

Ensuite, vous devrez activer la licence. Allez dans Plugins > Licence Image Effect Pro . Saisissez votre clé de licence et enregistrez les modifications.

Modules Pro Next Image Effect

Image Effect Pro ajoute un ensemble de modules au Divi Builder qui incluent des combinaisons stylisées d'images et de texte. Ils ajoutent des centaines d'effets de survol et de combinaisons de directions. Les options de style de texte incluent des contrôles indépendants pour les titres, le texte de focus, le contenu et leurs arrière-plans.

Les modules comprennent :

• Survol d'image circulaire
• Boîte de survol d'image
• Effet d'icône d'image
• Effet d'image méga
• Survol d'image minimal
• Défilement de l'image suivante
• Survol d'image ultime

Survol d'image circulaire

Le survol d'image circulaire comporte deux sections principales : l'image et le texte (contenu survolé). J'ai ajouté une image rectangulaire. Il affiche l'image dans sa forme d'origine mais la rend ensuite circulaire. Si l'image était carrée, ce serait un cercle parfait.

Les paramètres de conception de l'image incluent la position, la force et la couleur de l'ombre de la boîte.

Le texte comprend une section pour ajouter le titre et le contenu. Vous pouvez les styliser dans les paramètres de conception. J'ai augmenté les tailles dans cet exemple.

L'arrière-plan de la légende peut être une couleur unie ou un dégradé. Celui-ci utilise le dégradé par défaut.

Il dispose de 19 effets de survol avec 4 options de direction pour chaque effet. C'est l'effet 1. Les effets ont différentes manières de faire sortir l'image et de faire entrer le contenu. Ils incluent des zooms, des retournements, des diapositives et bien plus encore.

Boîte de survol d'image

La boîte de survol de l'image comprend également l'image avec le contenu du survol. Cela ne change pas la forme de l'image.

Il inclut également la superposition (ou l'arrière-plan qui transparaît et ressemble à une superposition) et ajoute un fond d'en-tête. Les deux arrière-plans peuvent inclure des couleurs unies et des dégradés. Cet exemple utilise l'arrière-plan de superposition par défaut. J'ai changé la couleur de l'arrière-plan du titre et augmenté la taille du texte.

Il dispose de 13 effets de survol différents, notamment des retournements, des diapositives, des fondus, des zooms, etc. Plusieurs des effets ajoutent des options pour les directions. C'est l'effet 1.

Effet d'icône d'image

Image Icon Effect ajoute un élément de survol qui affiche un titre et un texte de focus sur l'image. Comme les autres, vous pouvez changer la couleur d'arrière-plan avec une couleur unie ou un dégradé, et cela inclut plusieurs effets de survol. Les effets de survol de celui-ci apportent des bordures et sont particulièrement élégants. C'est l'effet de survol Zoe.

Ce qui distingue celui-ci, ce sont les icônes. Vous pouvez ajouter 4 icônes différentes et les ouvrir dans la même fenêtre ou dans une nouvelle fenêtre.

Les paramètres de l'icône incluent la couleur, la taille, l'espacement, la hauteur de ligne, la couleur d'arrière-plan, l'ombre, la bordure, etc. Dans cet exemple, j'ai ajouté une couleur d'arrière-plan et réduit la hauteur de ligne pour créer une ligne. J'ai également ajouté une ombre. C'est l'effet de survol Hera.

C'est l'effet de survol Terry. J'ai changé les couleurs du titre et du texte de focus et utilisé les paramètres pour les tailles de police et les icônes de l'exemple précédent.

Effet d'image méga

Mega Image Effect est une autre carte recto-verso avec une image d'un côté et du contenu de l'autre. La face avant affiche une image comme d'habitude.

Le verso de la carte affiche le contenu comme d'habitude et inclut des ajustements de police et d'arrière-plan. Ce qui le distingue, c'est la possibilité d'ajouter un bouton.

Vous avez un contrôle total sur la conception des boutons, y compris les mêmes options de couleur unie et de dégradé que l'arrière-plan standard. Cet exemple montre un dégradé pour l'arrière-plan du bouton.

Vous avez un contrôle total sur le style du bouton pour les polices et l'arrière-plan. J'ai ajusté la police et la bordure dans cet exemple. Chaque élément du module a également des ajustements d'espacement. J'ai ajouté 20 pixels au bas du bouton. Chacun des modules a ces ajustements d'espacement.

Ce module a trop d'effets de survol pour les compter. Seuls les effets d'image sont impressionnants, mais il y a aussi beaucoup d'effets de texte. Vous pouvez régler le survol de l'image et le survol du texte séparément et définir la synchronisation de l'effet de texte.

Cet exemple montre le survol de l'image parallèle gauche, l'effet de texte Zoom avant et un petit délai de texte.

Survol d'image minimal

Minimal Image Effect est le module le plus simple de l'ensemble. Il affiche une image avec des effets de survol.

Le seul paramètre personnalisé est les effets de survol. Il comprend 10 effets au choix. Nous en examinerons quelques-uns.

Cet exemple est Scale Out Rotate. L'image est agrandie et pivotée juste un peu dans son état normal. Au survol, l'image s'agrandit et pivote jusqu'à son état normal.

C'est le flou. L'image est floue jusqu'à ce que vous survoliez, puis elle s'estompe lentement jusqu'à ce qu'elle soit nette.

C'est Clignotant. Une rafale de flashs blancs sur l'image puis s'efface au fur et à mesure que vous survolez.

Défilement de l'image suivante

Next Image Scroll place une superposition sur l'image et ajoute un bouton dans le coin supérieur droit. Vous pouvez ajuster la couleur du bouton pour les couleurs unies et les dégradés. Cet exemple montre les paramètres par défaut.

Vous pouvez également ajuster la superposition. Définissez une couleur unie ou un dégradé. Il comprend également des types de dégradés et des commandes standard.

La position d'arrière-plan vous permet d'afficher le haut ou le bas de l'image.

L'image se déplace vers le haut ou le bas au survol. Dans cet exemple, le module affiche le bas de l'image et défile vers le haut de l'image au survol.

Survol d'image ultime

Ultimate Image Hover affiche la taille et la forme en fonction de l'effet que vous choisissez. C'est l'effet 1. Il montre une partie de la photo dans une grande image rectangulaire. Il comprend le texte du titre et du focus, le contenu et une superposition. La superposition comprend des ajustements pour la couleur sous forme de solide ou de dégradé.

Au survol, la superposition s'éclaircit et le texte est révélé.

L'opacité de l'image vous permet d'ajuster la quantité d'arrière-plan visible. Dans cet exemple, j'ai réduit l'opacité, modifié la taille de l'en-tête et du texte de focus, la couleur du texte d'en-tête, le gras du texte de focus, mis le texte de focus en majuscules et ajouté une ombre de texte au texte de focus.

Ce module a 24 effets de survol. Ils affichent l'image dans différentes tailles, niveaux d'opacité, placement de texte et ajoutent des bordures.

Il s'agit de l'effet 4. Il affiche l'image dans un carré et ajoute une bordure autour de l'intérieur qui se chevauche sur les extrémités.

C'est l'effet 5. Il assombrit la superposition et ajoute une bordure autour de l'intérieur de l'image et affiche l'image dans un carré.

L'effet 6 place le titre et le texte de focus en haut avec une ligne en dessous, et le contenu en bas.

L'effet 8 conserve la grande taille rectangulaire et ajoute une fine bordure.

Voici l'effet 10. Au survol, l'image zoome, la ligne devient un x et le dégradé apparaît.

Exemple d'effet d'image suivant Pro

Pour un exemple simple, voici un aperçu de la disposition Divi Home Renovation avec le module Ultimate Image Hover ajouté pour créer un CTA. Je l'ai ajouté à gauche de l'image et utilisé les couleurs de la mise en page.

Au survol, l'image glisse vers la droite, le CTA est révélé, l'image devient moins opaque (ce qui laisse passer plus de couleur de fond) et une bordure est ajoutée. Cet exemple utilise l'effet de survol 8.

Acheter Next Image Effect Pro

Next Image Effect Pro est disponible sur le Divi Marketplace pour 49 $. Il comprend une utilisation illimitée du site Web, une garantie de remboursement de 30 jours et 1 an d'assistance et de mises à jour.

Mettre fin aux pensées

C'est notre regard sur Next Image Effect Pro pour Divi. Les 7 modules ajoutent de nombreuses fonctionnalités d'image qui permettent à votre site de se démarquer. Leur utilisation est intuitive. Le nombre d'effets et de combinaisons entre tous les modules est impressionnant. Chaque module est unique, mais la plupart ajoutent des images, des titres et du contenu pour offrir de nombreuses possibilités de conception aux CTA, aux membres de l'équipe, aux témoignages, aux informations générales, aux coordonnées et bien plus encore.

Nous voulons de vos nouvelles. Avez-vous essayé Next Image Effect Pro ? Dites-nous ce que vous en pensez dans les commentaires.

Image en vedette via elenabsl / shutterstock.com