Divi Tips 103

Effet zoom sur image avec texte cliquable

Mis à jour le 12/10/20

1045 mots

4 minutes de lecture
16 commentaires

Cet article contient des liens d’affiliation reconnaissables grâce à l'icône du pourcentage (%) → je suis un lien d'affiliation

Divi permet de reproduire facilement un effet de zoom au survol d’une image avec un texte cliquable en superposition. Je vous propose de découvrir comment obtenir cet effet tendance qui pourra agrémenter votre page d’accueil ou vos appels à l’action…

Regardez ce que vous allez obtenir avec ce tutoriel :

Image Zoom Divi

1 – Créer une image avec un texte cliquable en superposition

Pour obtenir une image avec un texte en superposition, il suffit de « prendre le problème à l’envers » : on va utiliser un module Texte et y ajouter une image en arrière-plan.

Dans le web, il faut souvent réfléchir de cette manière : vous visualisez la finalité et vous recherchez les outils à votre disposition pour y parvenir.

Insérer une ligne 3/3
Insérer une ligne 3/3 avec un module Texte.
  1. Insérez une ligne au sein de votre mise en page Divi. Choisissez par exemple une ligne 3/3.
  2. Insérez un module Texte.
  3. Dans l’onglet Contenu > Texte, saisissez votre texte d’appel à l’action. Pour mon exemple, j’ai noté « votre texte ici » mais c’est à vous de noter ce que vous souhaitez.
  4. Dans l’onglet Contenu > Lien, saisissez l’adresse Web vers laquelle le module doit renvoyer.
Paramétrer le module Texte
Saisissez le texte et le lien du module

Maintenant, vous allez pouvoir ajouter une image d’arrière-plan :

  1. Dans l’onglet Contenu > Fond, sélectionnez l’icône de l’image et ajoutez une image de fond.
  2. Pour l’instant, votre module n’est pas tout à fait conforme à ce que l’on pourrait attendre d’un effet zoom sur une image, mais attendez, ça va venir…
  3. Toujours dans l’onglet Contenu > Fond, sélectionnez maintenant l’icône du dégradé. Cliquez sur « + Dégradé de fond ».
Ajouter une image de fond et un dégradé sur l'image
Ajouter une image de fond et un dégradé par-dessus
  1. Un dégradé étant composé de 2 couleurs, vous pourrez les sélectionner une après l’autre pour définir un noir avec une opacité de 50%, par exemple. Dans ma vidéo, cela est plus facile à comprendre…
  2. Un peu plus bas, vous verrez une option nommée « image de fond du titre », activez-la. Cela permet de glisser le dégradé noir opaque entre l’image de fond et le texte du module. On peut imaginer alors que ce module texte est composé de 3 niveaux de superposition, un peu à la manière des calques de photoshop.

Savez-vous que vous pouvez tester Divi gratuitement ? Rendez-vous sur cette page et cliquez sur « TRY IT FOR FREE »

Ceci étant fait, nous allons styliser le module pour qu’il commence à ressembler à une vraie image cliquable avec un effet de zoom :

styliser le module Texte + image
Améliorer l’apparence du module Texte + image
  1. Allez à l’onglet Style > Espacement et ajoutez de la marge interne en haut et en bas. Par exemple, 100px est une valeur convenable. On commence maintenant à mieux voir l’image en arrière-plan.
  2. Ensuite, l’onglet Style > Texte vous permettra de styliser le texte placé sur l’image. Dans mon exemple, je l’ai mis en gras, en blanc, avec un alignement centré et j’ai augmenté la taille. Étant donné que l’arrière-plan est assez foncé, le texte en blanc ressort parfaitement. Vous pouvez utiliser d’autres couleurs mais veillez à ce que cela reste lisible.
  3. À l’onglet Style > Boite Ombre, vous pouvez ajouter un petit ombré pour donner un effet 3D au module.
  4. À l’onglet Style > Bordure, vous pouvez éventuellement arrondir un peu les angles du module. Par exemple, j’ai appliqué une valeur de 5px aux quatre angles.

Voilà, vous êtes maintenant en possession d’un module texte avec une image en arrière-plan. Ce module est cliquable et sera parfait pour un appel à l’action. Mais il manque encore le petit effet zoom sympa…

2 – Reproduire l’effet de zoom sur une image

Ne quittez pas encore le module, il reste encore deux petits réglages à faire…

Ajouter l'effet zoom sur le module
Baisser l’intensité du dégradé et augmenter la taille du module au survol de la souris pour obtenir un effet zoom.
  1. À l’onglet Contenu > Fond, cliquez sur l’icône « flèche » qui permet d’activer la fonctionnalité de Hover (survol de la souris). Veillez à vérifier que l’onglet « flotter » est bien sélectionné (encore l’icône de la flèche). Sélectionnez ensuite l’onglet du dégradé et réduisez la force de sa couleur noire en ajoutant un peu plus de transparence, par exemple 25%. L’idée est que l’image ait un aspect plus clair au survol de la souris.
  2. Enfin, rendez-vous à l’onglet Style > Transformer pour ajouter ce fameux effet zoom sur le module. Nous voulons que le zoom ait lieu au moment où l’internaute passe la souris sur le module (hover), il faut donc activer la fonctionnalité « flotter » comme à l’étape précédente. Cliquez alors sur l’icône flèche, sélectionnez le premier onglet (échelle de transformation) et augmentez la taille du module à 115% par exemple. Ceci permettra de faire grossir le module au survol de la souris et offrira l’effet zoom escompté. Sauvegardez le module.

3 – Dupliquer les modules en fonction des besoins

Une fois que votre module est parfait et que vous avez fini toutes les personnalisations, vous pouvez dupliquer le module autant de fois que vous le souhaitez. Ainsi, vous gagnerez du temps sur la conception de votre mise en page.

dupliquer le module d'appel à l'action
Dupliquer le module et changer les liens et les images
  1. Cliquez sur copier le module et n’oubliez pas de changer l’image d’arrière-plan et l’URL de destination.

4 – Effet zoom avec Divi : tuto en vidéo

Ce tutoriel est tout simple mais si vous souhaitez le voir en vidéo, c’est par ici :

5 – En conclusion : un effet zoom réussi !

Un effet de zoom sur une image avec un texte cliquable est si facile à réaliser avec Divi ! Nul besoin d’utiliser des extensions tierces pour ça !

D’ailleurs, j’imagine bien le site d’un graphiste (ou de tout autre métier d’art) utiliser ce système pour afficher un portfolio et renvoyer l’internaute vers chaque page de projet.

Vous pouvez évidemment aller bien plus loin que ça et ajouter un pivot de l’image au survol, changer la taille ou la couleur du texte, etc !

C’est justement le but d’utiliser un thème comme Divi : vous pouvez personnaliser votre site comme vous le souhaitez.

Ces autres articles qui traitent des images dans Divi pourraient vous intéresser :

Zoom Image Texte Divi
Effet Zoom Image Divi

Obtenir Divi

Formation Divi

Ebook Divi PDF

Astuces gratuites

Quiz Divi

Coaching Visio Divi

icon 256x256

Fièrement traduit par wpLingua, l'extension de traduction pour WordPress que je développe ! SEO-Friendly / Automatique / Éditable

16 Commentaires

  1. Virginie

    Merci pour cet effet hyper sympa et très facile à faire une fois le fonctionnement de Divi Builder.
    Je suis en train de créer mon site et cela me permet d’ajouter un aspect pro très plaisant.

  2. Lycia Diaz

    Merci Virginie 😉

  3. Marine

    Génial, merci Lycia !!

  4. Lycia Diaz

    Merci Marine 🙂

  5. Pinel Tona

    Cc.
    TOP TUTO. J’aime.

    Comment cela se fait sur ELEMENTOR ??

  6. Lycia Diaz

    Avec Elementor ? Je sais pas mais il doit sûrement avoir des options similaires

  7. chupa

    merci pour tout tes tuto tu vas m’être d’une grande aide mention + pour ton site !

  8. Lycia Diaz

    Merci beaucoup

  9. JANNOT

    tres beau tuto mais comment s’appel-t-il ? sur DIVI pro

  10. Lycia Diaz

    Aucune idée

  11. brunet

    Tuto très bien. Juste une question ! quand mon image se zoom , elle n’apparait pas en entière, est-ce normal

  12. Lycia Diaz

    Bizarre…

  13. Myriam

    Je découvre votre site une pépite !!!! je sens que je vais y passer beaucoup de temps merci pour tout le partage !!!

  14. Lycia Diaz

    Merci Myriam

  15. Nick Freund

    Merci pour cette belle lecture, je pourrais apprendre beaucoup. Meilleures salutations, Nick

  16. Lycia Diaz

    Merci Nick

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.