Divi 5 : Modules de bien immobilier individuel

WP-ImmoMakler intègre des modules Divi 5 natifs conçus spécifiquement pour les pages de détail des biens immobiliers (templates de bien individuel) et les pages d’archive. Vous construisez le template bloc par bloc et pouvez déterminer librement l’apparence et l’ordre des contenus.

Note

Ces modules nécessitent Divi 5. Ils ne sont pas visibles dans Divi 4. Pour Divi 4, les modules classiques de Divi 4 sont disponibles.

Prérequis

• Divi 5 (moteur Divi 5 activé)
• WP-ImmoMakler (toute édition)

Démarrage rapide : créer un template avec les modules de bien individuel

Dans le backend de votre site (wp-admin), accédez à Divi → Theme Builder et créez un template pour Tous les articles « Bien immobilier » (ou ouvrez-en un existant). Dans le Visual Builder, vous trouverez tous les modules listés ci-dessous en recherchant WP-ImmoMakler.

Modules de bien individuel disponibles

Galerie photos

Module	Description
WP-ImmoMakler Galerie photos	Galerie photos complète avec Slideshow, Lightbox et toutes les options du Customizer par instance
WP-ImmoMakler Galerie photos en grille	Vue en grille sans Slideshow. Ce module n’est plus développé

Note

Pour les nouveaux templates, utilisez le module Galerie photos avec la présentation Statique et la mise en page Mosaïque à la place de Galerie photos en grille. Il offre le même affichage ainsi que tous les autres réglages de galerie. Les templates existants utilisant le module en grille continuent de fonctionner sans changement.

Textes de description

Le module WP-ImmoMakler Texte de description affiche l’un des champs de texte libre :

Champ	Description
“Résumé”	L’extrait du bien immobilier, p. ex. comme introduction sous le titre
Description courte (trois lignes)	Texte d’introduction bref
Description du bien (standard)	Description détaillée
Équipements	Description des équipements
Localisation	Description de l’emplacement
Autres informations	Notes complémentaires

Chaque instance du module affiche exactement un champ de texte. Pour afficher plusieurs champs, insérez le module plusieurs fois et sélectionnez un champ différent à chaque fois.

Autres options du module :

Option	Description
Titre	Titre en texte libre (par défaut : nom du champ sélectionné)
Balise de titre	h1–h4

Le texte est automatiquement nettoyé : le HTML est limité aux balises autorisées, les puces sont converties en listes, les numéros de téléphone sont mis en lien et les URL sont rendues cliquables.

Données du bien immobilier

Module	Description
WP-ImmoMakler Données du bien immobilier	Tous les champs de données (général + prix) en liste de définition
WP-ImmoMakler Surfaces	Champs de surface uniquement en liste de définition
WP-ImmoMakler Prix	Champs de prix uniquement en liste de définition
WP-ImmoMakler Boîtes de données clés	Champs sélectionnés en grille de boîtes responsive avec icônes SVG
WP-ImmoMakler Liste d’icônes de données clés	Tous les champs visibles en liste horizontale d’icônes avec icônes SVG

Les trois modules en liste de définition (Données du bien immobilier, Surfaces, Prix) n’affichent que les champs pour lesquels une valeur a été saisie dans le logiciel CRM.

Les Boîtes de données clés et la Liste d’icônes de données clés conviennent pour des résumés compacts des données clés les plus importantes directement sous la galerie.

Dans les Boîtes de données clés, vous choisissez sous Entrées parmi toutes les données du bien immobilier les champs qui apparaissent sous forme de boîte. Par défaut, ce sont les données clés les plus importantes, comme le numéro d’objet, les prix, les surfaces, les pièces et les places de stationnement ; vous activez les autres champs si nécessaire. Les boîtes apparaissent dans l’ordre de la liste.

Le module Boîtes de données clés dispose des options supplémentaires suivantes :

Option	Description
Utiliser des abréviations	Raccourcit certains libellés sélectionnés : Surface habitable → « Wlf. ca. », Surface du terrain → « Grd. », le libellé du prix d’achat est masqué, valeur du type de logement → « Whg. »
Séparateur	Ligne de séparation verticale entre les boîtes, avec largeur, couleur et style de ligne réglables
Afficher les icônes	Icône SVG avant chaque champ de données clé

Diagnostic énergétique

Le module WP-ImmoMakler Valeurs du diagnostic énergétique affiche les données du diagnostic énergétique en liste de définition. Il prend en charge les formats régionaux :

• Allemagne (besoin en énergie de chauffage, classe d’efficacité, etc.)
• Autriche (HWB et fGEE)
• Espagne (Certificado Energético)
• Italie (APE)

Comme pour les autres listes de données, vous masquez des champs individuels dans l’onglet Contenu. Avec l’option Afficher le diagramme PLUS, l’échelle graphique du diagnostic énergétique apparaît en plus sous les valeurs, à condition que la fonction de diagnostic énergétique soit activée. Les modules que le migrateur Divi 5 a convertis à partir du module Divi 4 WP-ImmoMakler Diagnostic énergétique affichent ainsi l’échelle, comme avant.

Le module WP-ImmoMakler Diagramme de diagnostic énergétique PLUS affiche uniquement l’échelle graphique du diagnostic énergétique sans la liste de données, afin que vous puissiez placer l’échelle et les valeurs séparément.

Contact

Module	Description
WP-ImmoMakler Personne de contact : Photo	Photo de profil de la personne de contact
WP-ImmoMakler Personne de contact : Données	Coordonnées de contact (nom, téléphone, e-mail, adresse …) en liste de définition
WP-ImmoMakler Formulaire de contact	Formulaire de contact pour les demandes relatives au bien immobilier
WP-ImmoMakler Téléchargements et liens	Téléchargements de fichiers et liens externes

Le module Personne de contact : Photo affiche la photo de profil enregistrée pour la personne de contact dans WP-ImmoMakler. Si aucune photo n’est disponible, le module ne génère aucun contenu. Dans l’onglet Design, vous pouvez régler le rapport d’aspect, les marges intérieures et extérieures, le rayon des coins ainsi que la bordure (largeur, couleur, style).

Le module WP-ImmoMakler Bouton Exposé PDF PLUS insère un bouton lien qui ouvre directement l’exposé PDF du bien immobilier. Dans l’onglet Contenu, vous pouvez saisir librement le texte du lien et activer ou désactiver l’ouverture dans un nouvel onglet. Dans l’onglet Design, la police (couleur, taille, graisse, famille) et la largeur du bouton sont réglables.

Note

L’exposé PDF doit être activé (dans le back-office de votre site (wp-admin) sous WP-ImmoMakler → Paramètres → Aperçu avant impression PDF) pour que le bouton fonctionne sur la page en ligne. Dans le Visual Builder, le module affiche un lien d’exemple.

Équipements et caractéristiques

Le module WP-ImmoMakler Équipements/Caractéristiques affiche les caractéristiques du bien immobilier sous forme de liste.

Option	Description
Disposition	Standard (empilé) ou En ligne (côte à côte)
Afficher l’icône	Activé/Désactivé — affiche une icône flèche avant chaque entrée
Couleur de l’icône	Couleur de l’icône (uniquement si Afficher l’icône = Activé)
Taille de l’icône	Taille de l’icône (uniquement si Afficher l’icône = Activé)
Couleur du texte	Couleur du texte de l’entrée
Espacement entre les entrées	Espacement vertical

Carte et vidéos

Module	Description
WP-ImmoMakler Carte de localisation	Carte de localisation avec le fournisseur de cartes sélectionné dans le Customizer ; hauteur et réglages de carte configurables par module
WP-ImmoMakler Vidéos	Vidéos YouTube/Vimeo intégrées. Le rapport d’aspect de l’intégration est réglable dans l’onglet Design. Avec Masquer la colonne si aucune vidéo n’est disponible, toute la colonne du module disparaît pour les biens sans vidéos
WP-ImmoMakler Visite virtuelle PLUS	Visites virtuelles du bien immobilier. Si l’affichage sous forme de vignette avec lightbox et demande de consentement est activé dans les réglages, cela s’applique également ici. Le rapport d’aspect et le rayon des coins sont réglables dans l’onglet Design

Modules d’archive (pour les templates de vue liste)

Ces modules sont destinés aux templates d’archive (p. ex. la page de synthèse des biens immobiliers) :

Module	Description
WP-ImmoMakler 1 clic : Vue liste	Liste complète des biens immobiliers avec formulaire de recherche, pagination et toutes les options de liste. Hauteur minimale réglable dans l’onglet Design
WP-ImmoMakler Formulaire de recherche de biens PLUS	Formulaire de recherche uniquement — idéal lorsque le formulaire et la vue liste doivent être positionnés séparément. Nombre de colonnes réglable
WP-ImmoMakler Liste des résultats de biens immobiliers	Uniquement la liste des résultats, sans formulaire de recherche, carte ni titre — pour les templates où vous placez le formulaire de recherche comme module indépendant
WP-ImmoMakler Carte de la liste de biens immobiliers PLUS	Carte affichant tous les biens immobiliers de la recherche actuelle en vue cluster
WP-ImmoMakler Localisation	Code postal et ville du bien immobilier avec icône de carte, p. ex. pour les fiches d’un Divi Loop. Avec Afficher le type de bien, le type de bien suit, et dans la vue détail également le type de commercialisation
WP-ImmoMakler Navigation des pages	Numéros de page et nombre de résultats sous une boucle Divi de la synthèse des biens immobiliers (voir Modules dans une boucle Divi)

Biens similaires

Le module WP-ImmoMakler Biens similaires PLUS affiche des biens immobiliers ayant le même type de bien et le même type de commercialisation à proximité du bien consulté. Pour en savoir plus sur la sélection des biens, consultez Biens similaires.

Rétractation

Ces deux modules ne sont liés à aucun bien immobilier. Vous pouvez les utiliser sur n’importe quelle page, par exemple dans le pied de page ou sur une page de rétractation dédiée.

Module	Description
WP-ImmoMakler Bouton de rétractation	Bouton pour se rétracter d’un contrat. Il renvoie vers votre page de rétractation, ouvre le formulaire dans une superposition ou sert de déclencheur pour la popup de votre page builder. Le libellé, la page de rétractation, un lien personnalisé et une classe CSS supplémentaire sont réglables, la police du bouton dans l’onglet Design
WP-ImmoMakler Formulaire de rétractation	Formulaire pour se rétracter d’un contrat, avec accusé de réception automatique. Vous pouvez pré-remplir facultativement la désignation du bien via un identifiant de bien immobilier

Le migrateur Divi 5 convertit automatiquement les mises en page utilisant les modules Divi 4 Bouton de rétractation et Formulaire de rétractation en modules natifs.

Modules dans une boucle Divi

Les modules de la vue détail fonctionnent également à l’intérieur d’une boucle Divi. Chaque entrée de la boucle affiche alors les données de son propre bien immobilier — vous pouvez ainsi par exemple composer vous-même des fiches de biens à partir de Galerie photos, Localisation et Boîtes de données clés.

Si la boucle se trouve dans un template pour la synthèse des biens immobiliers, elle tient compte de la sélection du formulaire de recherche et du tri choisi.

Pagination et chargement supplémentaire

Dans la synthèse des biens immobiliers, la boucle se pagine avec la page : sous /immobilien/page/2/, elle affiche la deuxième page de résultats. Le nombre de biens affichés par page se règle dans le back-office de votre site (wp-admin) sous Apparence → Customizer → WP-ImmoMakler → Vue liste des biens immobiliers avec Nombre de biens par page ; ce nombre s’applique alors à la place du réglage Articles par page propre à la boucle. Insérez les numéros de page avec le module WP-ImmoMakler Navigation des pages sous la boucle.

PLUS Attribuez à la section ou à la ligne contenant la boucle l’ID CSS properties sous Avancé → Attributs. La synthèse des biens immobiliers charge alors les résultats sans recharger la page : une modification dans le formulaire de recherche actualise immédiatement la liste, et selon le réglage, les numéros de page font défiler la liste ou d’autres biens sont chargés lors du défilement ou via un bouton.

Créer un lien sur les entrées

Pour qu’un clic sur l’entrée mène au bien immobilier :

• Saisissez comme titre du module Titre un lien dont l’adresse et le texte sont des contenus dynamiques : comme adresse “Link zur Immobilie” du groupe WP-ImmoMakler, comme texte Titre de l’article de la boucle. Le titre devient ainsi un véritable lien, également accessible au clavier et aux lecteurs d’écran. Dans le Visual Builder, Divi affiche un titre ainsi lié sous la forme du texte indicatif $variable(…)$ ; sur le site web, chaque entrée affiche le titre du bien immobilier avec son lien.
• Si toute la fiche doit être cliquable, attribuez au module Titre la classe CSS immomakler-card-link sous Avancé → Attributs. Le lien du titre s’étend alors sur toute la colonne ; la galerie photos et les autres liens et boutons de la fiche restent utilisables.
• Dans la Galerie photos, réglez l’option Clic sur une photo sur Voir le bien. Un clic sur une photo ouvrira alors le bien immobilier au lieu du lightbox.

Attention

L’option Lien → URL du lien pour le module ne convient pas pour les entrées d’une boucle : Divi lie ces liens par script au chargement de la page. Les biens immobiliers que la synthèse charge ensuite restent alors sans lien.

Astuce

Pour le titre du bien immobilier dans la boucle, utilisez un module Titre avec le contenu dynamique Titre de l’article de la boucle. Le module Divi propre Titre de l’article affiche sur une page de synthèse le titre de cette synthèse, pas celui de l’entrée de la boucle.

Afficher les rubriques uniquement si du contenu est disponible

Tous les biens immobiliers n’ont pas de vidéos, de visite virtuelle ou de description d’équipement. Pour qu’aucun titre ne se retrouve au-dessus d’une rubrique vide, n’affichez les sections, lignes, colonnes et modules qu’en cas de besoin, à l’aide de la condition Contenu du bien :

1. Ouvrez les réglages de l’élément qui englobe la rubrique avec son titre — généralement la ligne.
2. Sous Avancé → Conditions → Ajouter une condition, choisissez l’entrée Contenu du bien dans le groupe WP-ImmoMakler.
3. Sous Contenu du bien, choisissez le contenu, et sous Afficher uniquement si, choisissez disponible.

Options disponibles :

Contenu du bien immobilier	disponible quand …
Images, Plans d’étage	au moins une photo ou un plan (image ou PDF) est enregistré
Vidéos, Visites virtuelles PLUS	au moins une vidéo ou une visite est enregistrée
Documents à télécharger, Liens	au moins un document ou un lien est enregistré
Document PDF	au moins un des documents est un fichier PDF
Résumé, Brève description, Description du bien, Description de l’équipement, Description de l’emplacement, Autres informations	le texte n’est pas vide
Caractéristiques de l’équipement	au moins une caractéristique d’équipement est définie
Diagnostic de performance énergétique	des données de diagnostic énergétique sont disponibles
Carte	un service de carte est configuré et un emplacement est indiqué
Interlocuteur	des données de contact sont disponibles pour le bien
Photo de l’interlocuteur	l’interlocuteur a une photo

Utilisez inexistant pour afficher à la place un contenu de repli — par exemple une remarque lorsqu’aucun plan n’est disponible. Plusieurs conditions peuvent être combinées : affichez par exemple la rubrique Emplacement lorsque Description de l’emplacement ou Carte est disponible.

En dehors d’un bien immobilier — sur une page normale ou dans la vue liste hors boucle — tout contenu est considéré comme inexistant.

Le même groupe WP-ImmoMakler propose en outre trois autres conditions :

Condition	Réglages	Exemple
Données du bien immobilier	un champ de données du bien immobilier ou de l’interlocuteur ; a une valeur / n’a pas de valeur	Afficher une remarque sur les charges uniquement lorsque Loyer hors charges a une valeur
Catégorie de bien	une catégorie (type de bien, type de commercialisation, type d’usage, statut, emplacement, équipements, pays), est / n’est pas et une valeur ; [renseigné] correspond à toute valeur	Afficher la remarque sur l’indice des loyers uniquement pour le type de commercialisation Location
Bien de référence	est un bien de référence / n’est pas un bien de référence	Masquer le bouton de demande sur les biens de référence

WP-ImmoMakler propose les mêmes conditions avec les mêmes vérifications dans Elementor Pro et Bricks.

Aperçu dans le Visual Builder

Tous les modules affichent un aperçu dans le Divi Visual Builder avec un bien immobilier d’exemple. Le bien immobilier d’exemple affiché est celui que WP-ImmoMakler utilise comme enregistrement de prévisualisation — le même que celui utilisé dans d’autres aperçus (Elementor, Gutenberg).

Astuce

Si l’aperçu apparaît vide ou incomplet, le bien immobilier d’exemple n’a peut-être pas de valeurs saisies pour les champs concernés (p. ex. pas de diagnostic énergétique). Sur le frontend, les données réelles du bien immobilier consulté sont affichées.

Structure de template recommandée

Un template de bien individuel typique pourrait ressembler à ceci :

1. Galerie photos (Galerie photos ou Galerie photos en grille) — pleine largeur
2. Liste d’icônes de données clés — ligne étroite avec les données clés les plus importantes
3. Deux colonnes : texte de description à gauche, carte de localisation à droite
4. Données du bien immobilier ou Surfaces + Prix côte à côte
5. Diagnostic énergétique (si des données sont disponibles)
6. Deux colonnes : formulaire de contact à gauche, personne de contact à droite

Astuce

Pour les moteurs de recherche et les lecteurs d’écran, une structure propre est payante : le titre du bien immobilier est le seul titre de niveau H1, et les rubriques en dessous (description du bien, données de base, emplacement…) sont en H2. Réglez le niveau dans le module Titre, dans l’onglet Design, sous Titres → Niveau de titre — indépendamment de la taille de police. Sous Avancé → HTML → Type d’élément, définissez en outre l’élément HTML : les lignes contenant une rubrique deviennent section, la colonne avec les données de contact devient aside, et dans la boucle de la vue liste, chaque entrée devient article.

Cela pourrait aussi vous intéresser

• Divi Theme Builder : Créer un template de détail — Guide étape par étape pour construire le template
• Divi 5 : Créer des templates d’archive et de détail — Construire des templates avec les modules natifs
• Divi 5 : Migration depuis Divi 4 — Comment les mises en page Divi 4 existantes sont migrées lors de la mise à jour
• Galerie d’images : Slideshow avec vignettes — Paramètres de la galerie Swiper
• Galerie d’images : Image statique — Paramètres de la galerie statique