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.

Prérequis

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

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.

Ouvrir le Theme Builder

Naviguez dans le backend de votre site (wp-admin) vers Divi → Theme Builder.
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.

Vous créez une vue de détail propre aux projets de construction ou aux biens de référence sous la forme d’un template supplémentaire : dans la section Biens immobiliers, activez Projets (WP-ImmoMakler) ou Biens de référence (WP-ImmoMakler) à la place de Tous les biens immobiliers. Pour ces biens, ce template est prioritaire sur celui de tous les biens immobiliers ; un template destiné à des biens individuels l’emporte toujours. Les mêmes entrées sont également disponibles sur l’onglet d’exclusion, afin de retirer des projets ou des biens de référence d’un template.
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é.
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.
Enregistrer et tester

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

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

Ouvrir le Theme Builder

Naviguez dans le backend de votre site (wp-admin) vers Divi → Theme Builder.
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.
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.
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.

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
Liste des surfaces WP-ImmoMakler	Uniquement les surfaces du bien immobilier, avec les mêmes réglages que le tableau de données
Liste des prix WP-ImmoMakler	Uniquement les prix du bien immobilier, avec les mêmes réglages que le tableau de données
WP-ImmoMakler La liste des textes en bref	Données clés sur une ligne, séparées par un séparateur. Sous Champs, vous choisissez Comme dans la vue liste ou Sélection personnalisée ; pour la sélection propre, ajoutez une entrée Champ par champ et modifiez l’ordre par glisser-déposer. Le séparateur et sa couleur se règlent dans l’onglet Design
Localisation WP-ImmoMakler	Code postal et ville, si vous le souhaitez avec le type de bien, ou une ligne personnalisée à partir de jusqu’à quatre éléments comme le quartier et la ville. L’icône et sa couleur se règlent dans l’onglet Design
WP-ImmoMakler Équipements/Caractéristiques	Les caractéristiques d’équipement sous forme de liste ou côte à côte (mise en page Inline), avec une flèche, une coche, un point ou une étoile comme icône, dans la couleur et la taille de votre choix
Liste d’icônes de données clés WP-ImmoMakler	Données clés comme la surface habitable, les pièces et les places de stationnement côte à côte, chacune avec une icône. Dans l’onglet Contenu, vous choisissez les champs ; dans l’onglet Design, l’espacement, la couleur, la taille et l’épaisseur de trait des icônes ainsi que la police
Localisation WP-ImmoMakler	Code postal et ville, le cas échéant avec le type de bien, ou une ligne personnalisée composée de jusqu’à quatre éléments comme le quartier et la ville. L’icône et sa couleur se règlent dans l’onglet Design
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

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

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.

Si vous souhaitez placer la photo et le formulaire séparément, utilisez pour cela des modules dédiés :

Module	Description
Photo de l’interlocuteur WP-ImmoMakler	Uniquement la photo de la personne de contact, avec format d’image, espacements, rayon des coins et bordure dans l’onglet Design, sous Style de la photo
Formulaire de contact WP-ImmoMakler	Le formulaire de contact avec protection anti-spam ; dans l’onglet Design, sous Couleurs, vous réglez la couleur de fond et la couleur du texte du bouton ainsi que la couleur des liens

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
Téléchargements et liens WP-ImmoMakler	Les documents et liens du bien immobilier sous forme de liste. Vous choisissez les icônes dans l’onglet Contenu, sous Icônes, séparément pour les téléchargements et les liens, parmi les icônes de Divi ou Font Awesome

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
Photo de l’interlocuteur WP-ImmoMakler	Uniquement la photo de la personne de contact
Formulaire de contact WP-ImmoMakler	Formulaire de contact avec protection anti-spam
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
Liste des surfaces WP-ImmoMakler	Uniquement les surfaces sous forme de liste de définition
Liste des prix WP-ImmoMakler	Uniquement les prix sous forme de liste de définition
WP-ImmoMakler La liste des textes en bref	Données clés sur une ligne
Localisation WP-ImmoMakler	Code postal et ville ou éléments personnalisés
WP-ImmoMakler Équipements/Caractéristiques	Caractéristiques d’équipement avec icône
Liste d’icônes de données clés WP-ImmoMakler	Données clés côte à côte avec icônes
Localisation WP-ImmoMakler	Code postal et ville ou éléments personnalisés
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
Téléchargements et liens WP-ImmoMakler	Documents et liens du bien immobilier
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), Mosaïque (blocs de 4 photos avec mosaïques grandes et petites en alternance, sans image principale)
Effet de transition	Glissement (par défaut), Fondu ou « Aus- und Einblenden » — voir Galerie d’images : Slideshow
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, 2:1, 21:9, 3:1, 32:9 et Original)
Cadrage	Quelle partie d’une photo recadrée reste visible : centre (par défaut), haut ou bas
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
Options de mosaïque	Uniquement dans la mise en page statique « Mosaïque » : rapport d’aspect du bloc, répartition de la hauteur de ligne (1:1, 2:1 ou nombre d’or) et limiter le nombre d’images (4, 8, 12 ou 16 images)
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.

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
Lien vers la version imprimable en PDF PLUS	URL de l’exposé PDF du bien immobilier, par exemple comme lien du module Bouton de Divi
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.

Bouton vers l’exposé PDF

PLUS Pour un bouton qui ouvre l’exposé PDF du bien immobilier, vous n’avez pas besoin d’un module dédié. Insérez le module Bouton de Divi, ouvrez la section Lien dans l’onglet Contenu et, pour l’URL du lien, choisissez Lien vers la version imprimable en PDF dans le groupe WP-ImmoMakler via l’icône de contenu dynamique. L’exposé PDF doit être activé dans le backend de votre site web (wp-admin) sous WP-ImmoMakler → Réglages → Aperçu avant impression PDF.

Afficher des modules uniquement pour certains biens immobiliers

Avec les conditions de Divi, vous n’affichez un module que pour les biens immobiliers concernés, par exemple la galerie de plans uniquement pour les biens avec plans ou une remarque uniquement pour les biens de référence. Divi 4 n’accepte pas de conditions propres aux plugins. WP-ImmoMakler propose donc ses vérifications sous forme de champs pour la condition Custom Field de Divi. Dans la traduction allemande de Divi 4, cette condition s’appelle Benutzerdefinierte Breite.

Ouvrir les conditions

Ouvrez les réglages du module et, dans l’onglet Avancé, la section Conditions.
Ajouter Custom Field

Ajoutez la condition Custom Field.
Choisir le champ

Choisissez le champ dans la liste, par exemple immomakler_has_floorplans.
Choisir la règle

Choisissez la règle : Has Any Value affiche le module si la vérification est vraie, Has No Value si elle ne l’est pas. Pour les catégories, choisissez Contains et saisissez le nom du terme, par exemple Achat.

Champ	Signification
`immomakler_has_images`, `immomakler_has_floorplans`, `immomakler_has_videos`, `immomakler_has_downloads`, `immomakler_has_pdf`, `immomakler_has_links`, `immomakler_has_epass`, `immomakler_has_map`, `immomakler_has_contact`, `immomakler_has_contact_photo`, `immomakler_has_features` …	Le bien immobilier possède ce contenu : images, plans, vidéos, documents, un PDF, liens, un certificat énergétique, une carte, un interlocuteur, sa photo, des caractéristiques. S’y ajoutent les textes descriptifs, par exemple `immomakler_has_objektbeschreibung`, et avec WP-ImmoMakler Plus PLUS `immomakler_has_virtual_tours`
`immomakler_is_reference`, `immomakler_is_project`	Le bien immobilier est un bien de référence ou un projet de construction, respectivement
`immomakler_terms_type`, `immomakler_terms_vermarktung`, `immomakler_terms_nutzungsart`, `immomakler_terms_status`, `immomakler_terms_location`, `immomakler_terms_feature`, `immomakler_terms_country`	Les noms des termes du bien immobilier dans cette catégorie (type de bien, type de commercialisation, type d’utilisation, statut, localisation, caractéristiques, pays), séparés par des virgules
`immomakler_field_<champ>`, par exemple `immomakler_field_kaufpreis`, `immomakler_field_contact_email_zentrale`	La valeur d’un champ de données telle que l’affiche la vue détaillée ; vide si la vue détaillée masque le champ. `contact_` désigne les champs de l’interlocuteur

La liste des champs affiche, à côté de chaque champ, la valeur du bien immobilier de l’aperçu. Lors du passage à Divi 5, les conditions sont conservées ; Divi 5 y propose en plus les mêmes vérifications comme conditions à part entière.

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 :

Enregistrer le template

Enregistrez le template dans le Theme Builder.
Ouvrir un bien immobilier

Ouvrez n’importe quel bien immobilier dans le frontend.
Vérifier l’affichage

Vérifiez que tous les modules s’affichent correctement et que les données du bien immobilier sont bien affichées.