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.

@media all and (min-width: 980px) {
	#carte-plein-ecran .et_pb_map {
 	 height: calc(100vh - 80px);
	}

	#section-formulaire {
		position: absolute;
		bottom: 0;
		z-index: 100;
	}
}

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. 😉

Partager