Point culminant du plugin Divi – Image intense

Image Intense est un plugin premium tiers par les gens de Superfly qui ajoute un nouveau module au Divi Builder pour Divi et Extra. Le nouveau module combine les fonctionnalités de trois modules Divi (modules image, texte et boutons), puis ajoute de nouvelles fonctionnalités pour ajouter des effets de superposition et de survol aux images. Les fonctionnalités incluent 22 transitions de survol d'images, des boutons, des paramètres d'opacité, des modes de fusion de mélange, des liens de texte et bien plus encore.

Image Intense est un excellent moyen d'ajouter des micro-interactions qui donnent des commentaires à vos lecteurs et attirent l'attention sur votre appel à l'action (CTA). Les animations incluent le zoom avant ou arrière sur l'image, l'étirement de l'image, la compression de l'image, l'ajout d'une superposition, le balayage, la révélation de texte, etc.

Dans ce point culminant du plugin, nous examinerons ce que le plugin peut faire. Les images sont prises sur Unsplash.com.

Installation et réglages

Le plugin ajoute un module au Divi Builder. Pour installer le module, téléchargez et activez simplement le plugin. Utilisez le Divi Builder comme d'habitude et placez le module Image Intense au sein de votre mise en page. Il peut être utilisé à la place d'un module d'image.

Les paramètres généraux incluent l'URL de l'image, la taille du média, le style de survol, les titres, la légende, l'orientation de la légende, le bouton, la direction de l'animation, etc. Ce sont des paramètres familiers et comprennent une courte description. Les nouveaux paramètres incluent des liens vers la documentation pour plus d'informations.

Les titres superposés peuvent utiliser le balisage. Ici, vous pouvez ajouter des liens, mettre le texte en gras, etc.

Les paramètres de conception avancés incluent la largeur de l'image, le mode de fusion, l'opacité, l'opacité au survol, le dégradé de superposition personnalisé, etc. Ils incluent les choix de police, d'arrière-plan, de bordure, de couleur et de remplissage attendus, ainsi que CSS personnalisé .

Exemples - Mettre l'image au travail

Pour voir ce qu'il peut faire, j'ai créé plusieurs mises en page et ajouté plusieurs modules Image Intense. Voici un aperçu de certaines des animations et fonctionnalités.

Animations et tailles d'image

Dans cet exemple, vous pouvez voir la taille recadrée des images avec deux titres superposés. L'image de gauche utilise le paramètre de recadrage 400 x 516 pour la taille du support et Auckland pour l'animation.

L'image fait un léger zoom arrière et montre une superposition avec un message. La couleur et la taille de la police peuvent être ajustées si nécessaire.

L'image de droite est agrandie et inclut le message en superposition. Celui-ci est plus évident de la différence. Il utilise le style de vol stationnaire de Jérusalem .

L'image au centre utilise le style de survol de Douala .

Vous pouvez voir dans cette image le cadre déplacé vers le bas de l'image et affiche maintenant le message.

L'image au centre utilise le style de superposition Madison .

Vous pouvez voir ici comment il place une superposition sur l'image qui réduit l'opacité tout en gardant le focus sur la zone encerclée qui comprend le message.

Mélanger le mode de fusion

Mix Blend Mode est un moyen facile d'appliquer des attributs CSS à l'image. Il mélange la couleur du module avec son arrière-plan. Cela peut créer des effets sauvages et certains paramètres fonctionnent mieux avec certaines couleurs, cela nécessitera donc quelques expérimentations. Certaines fonctionnalités peuvent ne pas fonctionner avec tous les navigateurs, vous devrez donc utiliser cette fonctionnalité avec prudence.

L'image au centre utilise le mode de fusion mixte appelé Hard Light .

Celui-ci utilise Luminosity . J'ai également ajouté un bouton en bas au centre et configuré un style personnalisé.

Opacité

L'opacité est la transparence d'une image. Plus une image est opaque, moins elle a de transparence. L'opacité est également affectée par le style d'animation et le mode de mélange de mélange que vous choisissez. Vous pouvez les utiliser dans diverses combinaisons pour voir quels types d'effets vous pouvez créer. Vous pouvez appliquer différents niveaux d'opacité à l'image normale et à l'image de survol.

C'est l'image normale sans opacité. J'utilise la taille d'origine complète pour le réglage de la taille du support.

Ici l'image en survol. J'ai mis l'indice d'opacité à 0,6. Celui-ci utilise le style de vol stationnaire Cali .

Celui-ci utilise une grande image de 1024×1024 sans recadrage et une opacité d'image de 0,4. Les deux titres superposés utilisent des balises HTML. J'utilise des balises pour fort, accentuer et casser. Il utilise le style de vol stationnaire de Portland .

J'ai réglé l'opacité du survol sur 1 pour que l'image soit entièrement révélée au survol.

Ajout d'un dégradé personnalisé

Dans les paramètres de conception avancés, j'ai sélectionné Utiliser le dégradé de superposition personnalisé . Cela ouvre un nouvel ensemble d'options où je peux sélectionner la couleur du dégradé de début et de fin, l'orientation du dégradé et la position d'arrêt de début et de fin pour l'image normale et l'image de survol.

Voici un aperçu du dégradé utilisant le style de superposition Madison .

L'image de gauche affiche une superposition avant le survol.

Au survol, la superposition est supprimée pour révéler l'image. Celui-ci utilise le style de survol de Hanoi .

Échange d'images

Dans cet exemple, je voulais échanger une image contre une autre. Cela se fait en ajoutant une image comme image d'arrière-plan du module dans les paramètres de conception avancés .

Ensuite, définissez le niveau d'opacité de sorte qu'une image s'affiche sans survol et que l'autre image s'affiche au survol. Celui qui apparaît au survol affichera également un message.

J'ai choisi cette image comme image d'arrière-plan et j'ai défini l'image du module pour qu'elle ait une opacité de 0.

En vol stationnaire, le colibri se transforme en aigle et affiche un message. Celui-ci utilise le style de survol de Kiev .

Fusion d'images

Vous pouvez également mélanger les deux images en ajustant l'opacité de sorte que l'image d'arrière-plan apparaisse à travers l'image de premier plan. Cela peut créer des effets et des messages intéressants.

Celui-ci utilise le style de vol stationnaire de Londres . J'ai arrangé les messages pour profiter de leur placement. Dans cet exemple, la taille de la police du titre est définie sur 24 et la taille de la police de la légende est définie sur 50.

Voici l'image en survol. Les opacités peuvent également être modifiées pour montrer les deux, mais l'une peut être plus importante.

Ajouter des liens au texte

Des liens peuvent être ajoutés au texte de la légende. Cela se fait en plaçant un pseudo shortcode avec le texte suivi de l'URL. Le shortcode est fourni dans la description du champ afin que vous puissiez copier et coller. Il utilisera les attributs href, target et class.

Celui-ci ajoute une légende avec un lien qui peut amener les lecteurs vers une page ou un message pour plus d'informations.

C'est idéal pour créer des CTA, créer des liens vers des articles ou des pages, etc., pour diriger les lecteurs vers votre contenu. Les images elles-mêmes peuvent également être rendues cliquables. Cela peut les conduire à un portfolio ou à une page à propos ou de contact.

Boutons

Vous pouvez ajouter un bouton à l'image pour créer un appel à l'action.

L'image de gauche utilise un dégradé radial avec balisage pour le texte. L'image de droite affiche le bouton avec un effet de survol. Les deux images utilisent des bordures noires. J'ai ajouté une superposition pour l'arrière-plan du bouton et défini le rayon de la bordure sur 15. Cet exemple utilise le style de survol Rochester .

L'image de gauche utilise un dégradé vertical entre deux nuances de noir : la première avec 65% d'opacité et la seconde avec 19% d'opacité (19% ! Je sais… de rien !).

Les superpositions, les boutons et les dégradés sont parfaits pour créer des CTA.

Prix, licence et documentation

Ceci est un plugin premium. C'est 25 $ pour un seul site plus un site de développement qui vous permet de l'utiliser sur un site de développement en même temps que vous l'utilisez sur votre site en direct. C'est 45 $ pour les sites illimités .

La documentation est fournie sur le site Web et comprend des exemples et une zone de démonstration où vous pouvez voir les effets en direct. L'assistance est fournie par un système de tickets d'assistance.

Dernières pensées

Image Intense est un excellent module pour ajouter des images avec des transitions de survol. Les superpositions peuvent inclure des dégradés, du texte, des liens, divers niveaux d'opacité et même passer d'une image à une autre. Le texte, les boutons, les liens, etc., ont plusieurs options de position et il existe de nombreuses options de transition parmi lesquelles choisir. Vous pouvez faire encore plus en ajoutant votre propre CSS.

J'ai trouvé le module intuitif à utiliser. Si vous pouvez utiliser un module Divi alors vous vous sentirez comme chez vous avec celui-ci. Toutes les fonctionnalités de style sont ici. Les transitions de survol sont un excellent moyen d'ajouter du peps à votre site Web Divi. Si vous souhaitez ajouter des transitions de survol à vos images, je pense que vous constaterez que Image Intense vaut le détour.

Nous voulons de vos nouvelles! Avez-vous utilisé Image Intense ? Faites-nous part de votre expérience dans les commentaires ci-dessous!

Image en vedette via wowomnom / shutterstock.com