fbpx

Bons plans Alpa14 | Des offres et des réductions intéressantes à découvrir 😃

Divi Supreme : Module Hotspots image pour votre site WordPress Divi

Image Hotspots de Divi Supreme, un module très engageant !

Dans ce nouveau tuto WordPress Divi, je vous présente  Image Hotspots, un des 49 modules du très bon plugin Divi, Divi Supreme. Grâce à lui, vous allez pouvoir placer des points sur une image, points (Hotspots) qui pourront réagir au passage ou au clic de la souris en laissant apparaitre une infobulle (Tooltip). Ce module très esthétique, est parfait pour mettre en valeur une page d’un site WordPress en présentant de manière claire et simple un produit et ses options. Dans ce tuto, je prends un exemple et je vous guide pas à pas dans la configuration de ce module Divi Supreme Image Hotspots. Si vous ne connaissez pas Divi Supreme et ses nombreux nouveaux modules pour Divi, je vous invite à regarder cette vidéo de ma chaîne où je passe en revue tous les modules et extensions de ce très bon plugin pour Divi.
Bon visionnage à toutes et à tous ! 😊

Code Promo Divi Supreme
Licence Divi
.

1) Insérer votre contenu

Appeler tout d’abord le module Hotspots de Divi Supreme en cliquant sur le disque (+) de l’insertion d’un module.
La fenêtre des réglages s’ouvre. Dans l’onglet Contenu, insérer l’image souhaitée à légender (1), puis insérer un nouvel hotspot en cliquant sur « Ajouter un nouvel article » (2).

Vous êtes maintenant dans les paramètres du contenu de votre 1er hotspot.
– Dans Hotspot (1) : Vous pouvez choisir ici comme HotSpot soit une icône, une image ou du texte.
– Dans Tooltip (2) : C’est l’infobulle qui apparaîtra au passage ou au clic de la souris. Vous pouvez l’activez ou pas et entrer ici votre contenu.
– Dans Lien (3) : Vous pouvez entrer ici une adresse URL et vous serez conduit à cette adresse lors d’un clic sur le Hotspot.
– Dans Fond (4) : Vous pourrez ici modifier la couleur du Hotspot.

Insérer l'image du module Divi Supreme Hotspots
Onglet Contenu du module Divi Supreme Image Hotspots

 2) Apporter de la mise en forme, du style à votre Hotspot

Rendez-vous maintenant dans l’onglet Style.
Pour résumer, ici vous allez pouvoir personnaliser votre module et apporter des réglages esthétiques au Hostspot lui-même (A) et au Tooltip (B) qui est l’infobulle qui apparaît au passage ou au clic de la souris.

– Dans Hotspot Text (1) : Vous allez pouvoir ici modifier l’apparence du texte (taille, couleur, police etc.) dans le cas où vous auriez choisi de faire apparaître du texte sur le Hotspot à la place de l’icône (qui est le choix par défaut.)

– Dans Hotspot Settings (2) : C’est une option importante car c’est ici notamment que vous allez pouvoir placer le Hotspot sur un endroit précis de votre image (en jouant sur les tirettes « Left position » (position de gauche) et « Top position » (position du haut).

– Dans Hotspot Icône (3) : Vous allez pouvoir ici modifier l’apparence de l’icône (taille, couleur  etc.)

– Dans Hotspot Image (4) : Vous allez pouvoir ici modifier l’apparence de l’image (taille, bordure etc.) dans le cas où vous auriez choisi de faire apparaître une image sur le Hotspot à la place de l’icône (qui est le choix par défaut.)

– Dans Tooltip Settings (5) : Vous allez pouvoir modifier ici l’apparence de l’infobulle avec la couleur de fond mais aussi une option importante qui est le choix d’apparition de l’infobulle (droite, gauche, haut ou bas)

– Dans Tooltip Heading Text (6) : Au cas où vous auriez donné un caractère de titre à une partie de votre contenu en appliquant par exemple (H1 ou H2 etc.), c’est ici que vous allez pouvoir modifier l’esthétique de votre titre en changeant la police, sa taille, sa couleur etc.)

– Dans Tooltip Body (7) : Vous allez pouvoir modifier ici l’apparence du contenu de l’infobulle, le texte classique, le corps du texte (Taille, police, couleur etc.)

– Dans Texte (8) : Vous allez pouvoir choisir un texte clair dans le cas où vous auriez un fond foncé ou un texte foncé dans le cas où vous auriez un texte clair.

Une autre option intétessante à noter, c’est l’option intitulée « Animation » qui est tout en bas de la fenêtre, vous allez pouvoir activer et paramétrer ici un pulsation du hotspot, ce qui est assez esthétique et attire bien l’attention du visiteur tout en restant assez discret.

Nous avons fait ici le tour des principales options disponibles afin de paramétrer ce premier hotspot.

Pour ajouter un nouvel hotspot, cliquez sur la petite flèche retour dans l’angle supérieur gauche de la fenêtre des réglages du module.

Pour créer un nouvel hotspot recliquez sur « Ajouter un nouvel article » ou sinon vous pouvez simplement dupliquer le 1er Hotspot pour conserver votre mise en forme (en cliquant sur les 2 petits rectangle du 1er hotspot). Vous aurez ensuite simplement besoin de modifier le contenu de l’infobulle et le positionnement du hotspot.

 

Apporter du Style au module Hotspot Divi Supreme
Option animation - pulsation hotspot Divi Supreme
Dupliquer un hotspot Divi Supreme
Code Promo Divi Supreme
MalerLite

Par où commencer pour créer son site Internet ?

Toute personne disposant d’un ordinateur et d’une connexion Internet peut créer son propre site Web. Il existe de nombreux outils en ligne qui facilitent le processus. Les sites Web peuvent être utilisés pour promouvoir votre entreprise, communiquer avec les clients et partager vos idées.

Dans cette vidéo qui est qui est une retransmission d’un Webinar, Léopoldine la fondatrice de la société Webmyday, explique les différentes étapes à suivre et les bonnes questions à se poser pour créer son premier site web professionnel. Elle passe en revue les services et les outils nécessaires à la conception Web et propose des conseils pour créer un site Web efficace.

Cette vidéo est une excellente ressource pour les débutants qui souhaitent en savoir plus sur les étapes à suivre dans la conception Web ou pour les propriétaires d’entreprise qui ont besoin de créer un site Internet pour leur activité. 

Sommaire de la vidéo

0:00 Introduction
2:41 La formation Webmyday qu’est-ce que c’est ?
6:22 Faire ou faire faire son site Internet ?
16:31 Solutions pour faire son site soi-même
18:24 Solutions pour faire faire son site
22:33 Coût d’un site Internet
25:55 Un CMS, qu’est-ce que c’est ?
26:46 Les CMS les plus connus
32:57 Le nom de domaine
33:39 L’ hébergement
34:54 Quelques hébergeurs
38:35 4 choses que doit comprendre votre hébergement
40:01 WordPress qu’est-ce que c’est ?
40:29 Différence entre WP.com et wp.org
43:00 Les différentes composants de WP
46:33 En résumé les étapes pour travailler avec WordPress
47:47 Conclusion

Sommaire de la vidéo

Vous serez peut-être également intéressé par ces articles …

Enregistrer son écran pour créer des formations

Enregistrer son écran pour créer des formations

Vous recherchez un logiciel de capture pour filmer l’écran de votre PC ou de votre Mac ? Vous souhaitez créer des démos de logiciels, des démos de jeux, des tutoriels ou des vidéos de formation d’aspect professionnel ? Alors vous avez sans doute besoin de DemoCreator de Wondershare !

lire plus
Divi Supreme : Module Text Path

Divi Supreme : Module Text Path

Divi Supreme possède un excellent nouveau module intitulé Text Path qui vous permet de créer de magnifiques chemins de texte. Avec ce module, vous pouvez facilement créer des motifs et des dessins complexes dans votre texte.

lire plus
Créer un pop-up sur un site Divi

Créer un pop-up sur un site Divi

Ce tutoriel vous propose une solution simple et pratique pour créer un pop-up. En effet, je vous présente un plugin gratuit pour Divi intitulé « Popups for Divi » qui vous permettra de transformer toute section de votre site web en fenêtre pop-up.

lire plus
Offrez-moi un café! Merci :)