Si vous êtes à la recherche d’une manière originale de mettre en forme une page contact, une approche graphique intéressante consiste à afficher un plan Google Maps qui occupe tout le fond d’écran du site.
Ensuite, on peut faire apparaitre un formulaire de contact dans un panneau flottant au-dessus de la carte.
Insérez une carte Google Maps
Première étape, sur votre page contact, ajoutez une section Plein écran et insérez un module Carte plein écran.
Module dont le nom est mal traduit car le terme qui le définirait au mieux serait plutôt “pleine largeur”. Vous verrez plus tard que pour passer la carte en plein écran, vous allez devoir avoir recours aux CSS.
Ouvrez les paramètres du module Carte plein écran et dans Avancé -> IDD et classes CSS -> ID CSS, ajoutez un identifiant tel que carte-plein-ecran (ou ce que bon vous semble).
Ensuite, configurez ce module avec votre clé d’API et faites les divers réglages nécessaires pour afficher la zone géographique qui vous intéresse.
Insérez votre formulaire de contact
Ajoutez une section normale
Ceci fait, rendez-vous dans ses paramètres.
Dans Styles -> Espacement -> Personnaliser la marge interne : mettez toutes les valeurs à 0.
Dans Avancé -> ID et classes CSS -> ID CSS, ajoutez un identifiant tel que section-formulaire (ou ce que bon vous semble).
Ajoutez une ligne dans la section
Dans les paramètres de la ligne, vous pouvez déjà configurer le fond selon vos envies, etc.
Ensuite, rendez-vous dans l’onglet Styles pour faire les réglages suivants.
Comme vous pouvez le voir sur la capture d’écran ci-dessus, il vous faut passer la ligne en pleine largeur et définir une largeur de gouttières personnalisée sur 1.
Puis, un peu en-dessous, dans Espacement, ajustez la marge interne avec les valeurs de votre choix (tout va dépendre du contenu que vous allez ajouter dans votre ligne et du rendu que vous désirez).
Pour dynamiser un peu votre page, vous pouvez ajouter une animation d’entrée sur votre ligne, de manière à ce que celle-ci apparaisse en slide-in depuis le bord de l’écran.
Ajoutez le formulaire de contact
Vous pouvez désormais insérer un module Formulaire de contact dans la ligne que vous venez de créer.
Pas d’impératif pour les réglages, tout dépend de vos envies.
Ajoutez les CSS
Et oui, pour que tout fonctionne correctement, il nous faut maintenant écrire quelques lignes de CSS.
Si vous ne savez pas où insérer les CSS nécessaires, vous pouvez lire notre tutoriel sur les 7 manières d’ajouter des CSS à Divi.
Détaillons ce code
- Ligne 1 : on inclut ces règles CSS dans une media query ne ciblant que les écrans assez larges (tablettes et ordinateurs). Ainsi, pas de souci d’affichage sur mobile où les 2 sections s’afficheront l’une après l’autre : déjà le plan Google Maps puis le formulaire de contact.
- Ligne 2 : on cible le module Carte avec l’identifiant CSS qu’on lui a attribué
- Ligne 3 : on fait un petit calcul
- 100 vh correspond à la hauteur total de l’écran sur lequel le site est visionné
- valeur à laquelle on soustrait la hauteur de la barre de navigation (80 px dans mon cas)
- Ligne 6 : on cible la section contenant le formulaire de contact
- Lignes 7 et 8 : on place cette section en position absolue, de manière à la disposer en bas de l’écran
- Ligne 9 : on met un z-index assez élevé afin d’être sûr que le formulaire de contact sera bien visible par-dessus le plan Google Maps et pas caché en dessous.
Notez que j’ai volontairement pris le parti de positionner mon formulaire de contact en bas à gauche de l’écran afin de ne pas masquer les divers outils du plan Google Maps (zoom, mode plein écran et Street View).
Pour finir, repartez avec un cadeau !
Si ce principe de mise en page avec un plan Google Maps en plein écran vous a plu, je vous propose de télécharger le layout que j’ai réalisé pour la démo de ce tutoriel.
Si vous ne savez pas comment importer ce layout, je vous invite à lire notre article Importer ou exporter un layout, une section, une rangée ou un module Divi. 😉
Merci Pierre, encore un tuyau plein de génie !!! (un bisontin)
Merci “voisin” ! 🙂
Super ce tuto Pierre. Les maps sont devenu payant maintenant ??
Merci Arnaud !
Depuis le 16 juillet 2018, l’affichage des cartes Google Maps est devenu payant, MAIS il faut savoir que chaque utilisateur se voit offrir un crédit de 200 $ qui lui permet de bénéficier jusqu’à 25 000 affichages par mois (pour une carte dynamique telle qu’utilisée dans le module de Divi).
Si tu n’avais pas encore créé de clé d’API, il te faut donc ouvrir un compte de facturation en rentrant un numéro de CB. Tu ne seras débité que si tu dépasses le seul alloué.
ah d’accord, merci pour l’info. C’est top cette map en plain écran!! 😉
Merci pour ce tuto !
Cependant, lorsque je sors du Visual Builder de Divi, ma carte plein écran est à la bonne place mais le formulaire est tout en haut à gauche de la page… Normal ?
Merci !