Divi 4 : Créer un template de détail

Avec le Divi Theme Builder, vous pouvez personnaliser entièrement la vue détail de chaque bien immobilier. WP-ImmoMakler fournit des modules Divi spécialisés couvrant tous les aspects d’un bien immobilier — de la galerie d’images aux fiches techniques en passant par les coordonnées de contact.

Note

Ce guide concerne Divi 4. Pour Divi 5, consultez Divi 5 : Créer des templates d’archive et de détail.

Prérequis

• Thème Divi ou plugin Divi Builder (version 4.x)
• WP-ImmoMakler (toute édition)

Astuce

Dans le backend de votre site (wp-admin), désactivez l’option Le plugin gère les vues liste et détail sous WP-ImmoMakler → Paramètres → Theme Builder si vous souhaitez contrôler entièrement l’affichage avec le Divi Theme Builder.

Option A : Version HTML en 1 clic (démarrage rapide)

Le module 1 clic affiche la vue détail éprouvée de WP-ImmoMakler — galerie, données, carte, formulaire de contact et tout ce qui compose une page de détail complète.

1. Ouvrir le Theme Builder

   Naviguez dans le backend de votre site (wp-admin) vers Divi → Theme Builder.

   

2. Créer un nouveau template

   Cliquez sur Ajouter un nouveau template et sélectionnez Créer un nouveau template. Dans le panneau Paramètres du template, sur l’onglet Utiliser sur, faites défiler jusqu’à la section Biens immobiliers et activez Tous les biens immobiliers.

   

   Cliquez sur Créer le template.

   

3. Créer la mise en page du body

   Cliquez sur Ajouter un body personnalisé dans le nouveau template et sélectionnez Créer un body personnalisé.

   

4. Ajouter une ligne et insérer le module

   Le Visual Builder s’ouvre. Cliquez sur +, sélectionnez la mise en page à une colonne, puis recherchez le module WP-ImmoMakler 1-Click : Vue détaillée.

   

5. Enregistrer et tester

   Enregistrez le template et ouvrez n’importe quel bien immobilier dans le frontend.

Personnalisez votre titre de page

Le module 1 clic : Vue détail propose l’option Afficher le titre (par défaut : activé). Désactivez-la pour masquer le titre (h1) généré par le template HTML — par exemple lorsque vous souhaitez concevoir vous-même le titre de la page ou lorsque votre thème le génère déjà.

Utilisez votre propre galerie

Le module 1 clic : Vue détail propose l’option Afficher la galerie d’images (par défaut : activé). Désactivez-la pour masquer la galerie intégrée au template HTML — par exemple lorsque vous souhaitez placer votre propre galerie (comme le module WP-ImmoMakler Galerie d’images) au-dessus du titre.

Option B : Template personnalisé

Pour une liberté de conception totale, construisez la vue détail à partir de modules WP-ImmoMakler individuels. Chaque module représente un aspect spécifique du bien immobilier et peut être librement positionné et stylisé.

1. Ouvrir le Theme Builder

   Naviguez dans le backend de votre site (wp-admin) vers Divi → Theme Builder.

2. Créer un nouveau template

   Cliquez sur Ajouter un nouveau template et activez sous Biens immobiliers la case Tous les biens immobiliers dans le panneau Paramètres du template.

3. Créer la mise en page du body

   Cliquez sur Ajouter un body personnalisé, puis sélectionnez Créer un body personnalisé. Créez la structure souhaitée avec des lignes et des colonnes — par exemple, une zone principale avec galerie et données à gauche, coordonnées de contact à droite.

4. Insérer la galerie

   Ajoutez le module WP-ImmoMakler Galerie d’images : la galerie d’images complète avec mode slideshow et statique, lightbox et toutes les options du Customizer configurables par instance de module.

   Le module Galerie d’images propose les mêmes options que vous connaissez du Customizer — par instance de module. Cela est utile lorsqu’un template nécessite une forme de galerie différente de la configuration par défaut du Customizer (p. ex. une image hero au format cinémascope dans le template premium, tandis que le template standard utilise le slideshow habituel), ou lorsque plusieurs galeries avec des paramètres différents doivent figurer sur une même page (photos en haut comme slideshow, plans d’étage plus bas comme grille statique).

   Voir Configurer la galerie ci-dessous pour une description détaillée des options.

5. Ajouter les données du bien immobilier

   Ajoutez les modules de données souhaités :

   Module	Description
   Tableau de données WP-ImmoMakler	Tableau de données sous forme de liste de définition avec champs configurables, largeur de colonne, séparateurs de lignes et couleurs de fond alternées
   Boîtes de données WP-ImmoMakler	Données clés sous forme de grille CSS responsive avec largeur de boîte et espacement ajustables
   WP-ImmoMakler Certificat de performance énergétique	Données du diagnostic énergétique avec support régional (Allemagne, Autriche, Espagne, Italie) et diagramme énergétique

6. Insérer les textes de description

   Utilisez le module WP-ImmoMakler Texte de description. Il propose de nombreuses options :

   • Sélection du champ de texte (description courte, description du bien immobilier, équipements, emplacement, informations complémentaires)
   • Nettoyage automatique du HTML et corrections typographiques
   • Détection des URLs et numéros de téléphone
   • Conversion des puces en listes
   • Mise en page en colonnes responsive (bureau, tablette, mobile)
   • Bouton « Voir plus/Voir moins » avec hauteur configurable
   • Titre personnalisé avec balise HTML au choix

7. Ajouter la carte

   Ajoutez le module Carte de situation de WP-ImmoMakler. Il affiche l’emplacement du bien immobilier avec le fournisseur de cartes que vous avez sélectionné dans le Customizer, sous WP-ImmoMakler → Cartes. La hauteur de la carte est configurable.

8. Insérer les coordonnées de contact

   Le module Coordonnées de WP-ImmoMakler affiche les informations de la personne de contact — avec photo, nom, téléphone, e-mail, etc. Vous pouvez afficher ou masquer des libellés individuels et ajuster l’espacement entre la photo et les données.

9. Vidéos et visites virtuelles

   Module	Description
   Vidéos WP-ImmoMakler	Vidéos YouTube/Vimeo intégrées
   Visite virtuelle de WP-ImmoMakler PLUS	Visites 360° avec format d’image configurable

10. Enregistrer et tester

    Enregistrez le template dans le Theme Builder et ouvrez un bien immobilier dans le frontend.

Modules single disponibles

Module	Description
WP-ImmoMakler 1-Click : Vue détaillée	Vue détail complète avec template HTML WP-ImmoMakler
Coordonnées de WP-ImmoMakler	Personne de contact avec photo et données
WP-ImmoMakler Texte de description	Champs de texte libre avec mise en forme
Tableau de données WP-ImmoMakler	Tableau de données sous forme de liste de définition
Boîtes de données WP-ImmoMakler	Données clés sous forme de grille responsive
WP-ImmoMakler Certificat de performance énergétique	Données du diagnostic énergétique avec diagramme
WP-ImmoMakler Galerie d’images	Galerie d’images complète avec mode slideshow/statique, toutes les options du Customizer par instance
Carte de situation de WP-ImmoMakler	Carte avec l’emplacement du bien immobilier
Vidéos WP-ImmoMakler	Vidéos intégrées
Visite virtuelle de WP-ImmoMakler PLUS	Visites 360°

Configurer la galerie

Le module WP-ImmoMakler Galerie d’images propose par instance de module les mêmes options que la section Galerie de photos du Customizer. Aperçu des groupes principaux :

Zone	Options
Sélection des images	Toutes les images, plans uniquement, sans les plans
Type de galerie	Slideshow (galerie basée sur Swiper avec lightbox) ou Statique (grille d’images sans slider, lightbox au clic)
Mise en page du slideshow	Vertical (bande de vignettes en dessous), Horizontal (bande de vignettes à droite), Sans vignettes, Carrousel
Mise en page statique	Vertical (bande de vignettes en dessous), Horizontal (grille de vignettes à droite), Sans vignettes, Grille (toutes les images en mosaïques de même taille, sans image principale)
Effet de transition	Glissement (par défaut) ou Fondu (cross-fade)
Durée de transition	100–2000 ms (par défaut 400 ms)
Autoplay	Avance automatique avec délai en secondes configurable
Ratios d’aspect	Image principale et vignettes configurables indépendamment (16:9, 3:2, 4:3, 1:1, Section dorée, Original ; statique avec en plus 2:1 et 3:1)
Taille des vignettes	40–400 px de largeur (contrôle le nombre de vignettes visibles simultanément)
Vignettes sur mobile	Afficher ou masquer sur les appareils ≤ 768 px
Hauteur du carrousel	Unité pixel ou viewport (px, vw, vh, svh, lvh, dvh)
Grille statique	Lignes et colonnes configurables indépendamment par variante de mise en page
Hauteur de galerie (statique)	Automatique ou fixe
Indicateur de photos supplémentaires	Superposition compteur sur la dernière vignette (+N) ou bouton sous la galerie (« Afficher toutes les N photos »)
Animation au survol (statique)	Aucune / Zoom doux (par défaut) / Éclaircir — retour visuel au survol des images avec la souris
Options de grille	Uniquement dans la mise en page statique « Grille » : colonnes (maximum, 1–6), largeur minimale par mosaïque (en dessous de laquelle une colonne disparaît automatiquement), rapport d’aspect de la mosaïque, ajustement de l’image (Recadrer pour les photos ou Afficher en entier pour les plans) et titre de l’image en légende. Associé à la sélection d’images « plans uniquement », cela reproduit un encadré de plans comme celui du skin WP-ImmoMakler
Espacements + arrondi	Écart entre les images, rayon de bordure (chaque image individuellement ou uniquement les coins extérieurs de la galerie)
Couleur de navigation	Sélecteur de couleur pour les boutons fléchés et les points de pagination (mode slideshow)

Les descriptions des valeurs individuelles se trouvent dans la documentation du Customizer pour le slideshow et la galerie statique — la même terminologie s’applique au module Divi.

Astuce

Si le module doit afficher exactement la configuration par défaut du Customizer sans autre paramétrage, laissez simplement les options du module à leurs valeurs par défaut — celles-ci correspondent à la configuration par défaut du Customizer.

Utiliser le contenu dynamique

En plus des modules spécialisés, vous pouvez utiliser le contenu dynamique de Divi dans n’importe quel module standard. WP-ImmoMakler enregistre des champs dans le groupe WP-ImmoMakler :

Champ	Description
Titre du bien immobilier	Titre du bien immobilier depuis le logiciel immobilier
Sous-titre	Code postal, ville, type de bien
Prix	Prix formaté
Description courte	Résumé court
Description du bien immobilier	Description détaillée
Description des équipements	Description des équipements
Emplacement	Description de l’emplacement
Informations complémentaires	Informations additionnelles
Image mise en avant du bien immobilier	Image mise en avant du bien immobilier, pour les modules image et les arrière-plans
Premier fichier PDF joint	URL du premier PDF joint au bien immobilier
Premier fichier PDF joint avec « plan » dans le titre ou le nom de fichier	URL du premier fichier PDF joint dont le titre ou le nom de fichier contient « plan »
Lien retour vers la vue liste (vers la fiche du bien immobilier)	Pour votre propre bouton « Retour aux résultats » : ramène à la liste dont provient le visiteur et y fait défiler jusqu’à la fiche du bien immobilier — même avec un plugin de cache

Les champs de texte prennent en charge l’affichage optionnel d’icônes, du texte personnalisé avant/après et (pour les champs de description) la mise en forme automatique.

Aperçu et test

Comme Divi ne propose pas de mode d’aperçu en direct avec de vraies données du bien immobilier dans le Theme Builder, il est préférable de tester le template directement dans le frontend :

1. Enregistrez le template dans le Theme Builder.
2. Ouvrez n’importe quel bien immobilier dans le frontend.
3. Vérifiez que tous les modules s’affichent correctement et que les données du bien immobilier sont bien affichées.

Astuce

Approche recommandée : Commencez avec la version HTML en 1 clic pour vous familiariser avec les données disponibles. Créez ensuite progressivement un template personnalisé en remplaçant les sections individuelles par des modules spécialisés.

Cela pourrait aussi vous intéresser

• Divi Theme Builder : vue d’ensemble
• Créer un template d’archive
• Galerie : configurer le slideshow
• Galerie : vue statique