Créer un modèle de détail

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

Prérequis

• Elementor Pro version 3.20.0 ou supérieure
• WP-ImmoMakler (toute édition)

Note

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

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

Les widgets 1 clic affichent les templates HTML éprouvés de WP-ImmoMakler — galerie, données, carte, formulaire de contact et tout ce qui compose une vue détail complète.

1. Ouvrir le Theme Builder

   Naviguez vers Elementor → Theme Builder et créez un nouveau template de type Single Post via Ajouter un nouveau template.

2. Choisir un template vide

   Fermez la bibliothèque de templates pour commencer avec un modèle vide.

3. Définir le bien immobilier de prévisualisation

   Pour que l’éditeur affiche de vraies données au lieu de données de remplacement, définissez le bien immobilier de prévisualisation — voir Définir le bien immobilier de prévisualisation ci-dessous.

4. Insérer le widget

   Recherchez dans la barre latérale de widgets la catégorie WP-ImmoMakler : Version HTML en 1 clic et faites glisser le widget Vue détail de biens immobiliers (complète) sur la page.

   

5. Définir la condition

   Cliquez sur Publier, puis sur Ajouter une condition et sélectionnez dans le menu déroulant du groupe WP-ImmoMakler la condition Bien immobilier. Ce template sera ainsi utilisé pour toutes les pages de détail de biens immobiliers.

   

6. Terminé

   La vue détail est maintenant affichée avec le template HTML de WP-ImmoMakler.

   

Personnalisez votre titre de page

Le widget Vue détail de biens immobiliers (complète) 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 widget Vue détail de biens immobiliers (complète) 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 widget Galerie photo de biens immobiliers) au-dessus du titre.

Gérez le résumé

L’option Afficher le résumé (par défaut : activé) affiche ou masque le résumé (extrait de publication) sous le sous-titre. Vous pouvez saisir le texte manuellement ou le faire générer automatiquement avec la fonction IA active (PLUS). Si aucun extrait n’est enregistré, rien n’est affiché.

Option B : Template personnalisé

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

1. Ouvrir le Theme Builder

   Créez un template de type Single Post comme décrit ci-dessus.

2. Définir le bien immobilier de prévisualisation

   Pour que l’éditeur affiche de vraies données au lieu de données de remplacement, définissez le bien immobilier de prévisualisation — voir Définir le bien immobilier de prévisualisation ci-dessous.

3. Configurer la mise en page

   Sélectionnez un modèle vide. Créez la structure souhaitée avec des conteneurs — par exemple, une zone principale avec galerie et données à gauche, formulaire de contact et personne de contact à droite.

4. Insérer la galerie

   Faites glisser l’un des widgets de galerie sur la page :

   Widget	Description
   Galerie photo de biens immobiliers	Galerie d’images complète avec mode Slideshow et Statique, lightbox et toutes les options du Customizer configurables par instance de widget
   Galerie en grille	Vue en grille compacte sans Slideshow, avec lightbox

   Le widget Galerie photo de biens immobiliers propose les mêmes options que celles que vous connaissez depuis le Customizer — par instance de widget. Voir Configurer la galerie ci-dessous.

5. Ajouter les données du bien immobilier

   Ajoutez les widgets de données souhaités :

   Widget	Affiche
   Toutes les données du bien immobilier	Tableau de données librement configurable avec tous les champs du bien
   Liste de surfaces	Toutes les données de surface (surface habitable, surface du terrain, etc.)
   Liste de prix	Toutes les données de prix (prix d’achat, loyer hors charges, charges, etc.)
   Équipements/Caractéristiques	Caractéristiques des équipements sous forme de liste d’icônes
   Diagnostic énergétique	Données du diagnostic énergétique sous forme de tableau
   Liste d’icônes de données clés	Champs de données quelconques sous forme de liste d’icônes
   Tuiles de données clés	Données clés sous forme de tuiles visuelles

6. Insérer les textes de description

   Utilisez un widget texte Elementor avec le dynamic tag Bien immobilier : Textes de description pour afficher la description du bien immobilier depuis le logiciel d’agence. Dans le dynamic tag, vous pouvez sélectionner le champ de texte souhaité (description du bien, emplacement, équipements, informations complémentaires, etc.).

7. Ajouter la carte

   Faites glisser le widget Carte de localisation sur la page. Il affiche l’emplacement du bien immobilier sur Google Maps ou OpenStreetMap.

8. Concevoir la zone de contact

   Widget	Description
   Formulaire de contact de biens immobiliers	Formulaire de demande avec attribution automatique du bien immobilier
   Coordonnées de contact	Nom, téléphone, e-mail de la personne de contact
   Photo de la personne de contact	Photo de la personne de contact

9. Téléchargements et liens

   Ajoutez le widget Téléchargements et liens pour afficher les exposés PDF, les plans et les liens externes (par exemple, visites virtuelles).

10. Vidéos et visites virtuelles

    Widget	Description
    Vidéos	Vidéos YouTube/Vimeo intégrées
    Visites virtuelles PLUS	Visites 360°
    Diagramme de diagnostic énergétique PLUS	Échelle graphique du diagnostic énergétique

11. Définir la condition

    Cliquez sur Publier, puis sur Ajouter une condition et sélectionnez la condition appropriée dans le groupe WP-ImmoMakler :

    Condition	Description
    Bien immobilier	Template valide pour tous les biens immobiliers
    Bien de référence	Template valide uniquement pour un bien immobilier spécifique

Configurer la galerie

Le widget Galerie photo de biens immobiliers propose par instance de widget les mêmes options que la section Galerie d’images du Customizer. Voici un aperçu des groupes les plus importants :

Zone	Options
Sélection d’images	Toutes les images, plans uniquement, sans 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 Slideshow	Vertical (bande de vignettes en bas), Horizontal (bande de vignettes à droite), Sans vignettes, Carrousel
Effet de transition	Glisser (par défaut) ou Fondu enchaîné (Cross-Fade)
Durée de transition	100–2000 ms (par défaut 400 ms)
Lecture automatique	Défilement automatique avec délai en secondes configurable
Ratios d’aspect	Images principales et vignettes configurables indépendamment (16:9, 3:2, 4:3, 1:1, Nombre d’or, Original ; statique en plus 2:1 et 3:1)
Taille des vignettes	40–400 px de largeur (détermine le nombre de vignettes visibles simultanément)
Vignettes mobiles	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 plus de photos	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
Espacement + arrondi	Espace entre les images, rayon de bordure (chaque image individuellement ou uniquement les bords 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 Slideshow et la galerie statique — le même vocabulaire s’applique au widget Elementor.

Astuce

Si vous souhaitez que le widget affiche exactement la valeur par défaut du Customizer sans configuration supplémentaire, laissez simplement les options du widget sur leurs valeurs par défaut — celles-ci correspondent au préréglage du Customizer.

Dynamic tags pour la vue détail

En plus des widgets spécialisés, vous pouvez utiliser des dynamic tags dans n’importe quel widget Elementor — par exemple dans des titres, des blocs de texte, des images ou des boutons. Tous les tags WP-ImmoMakler apparaissent dans le dialogue de sélection des tags sous le groupe WP-ImmoMakler.

Tags texte

Tag	Description
Bien immobilier : Titre	Titre du bien immobilier depuis le logiciel immobilier
Bien immobilier : Statut	Statut actuel (actif, vendu, loué, etc.)
Bien immobilier : Type de commercialisation	Achat ou location
Bien immobilier : Textes de description	Champs de texte libre (description du bien, emplacement, équipements, etc.)
Bien immobilier : Valeur : Données du bien	Valeur d’un champ de données quelconque (par exemple année de construction, étage)
Bien immobilier : Nom (multilingue) : Données du bien	Intitulé d’un champ de données
Bien immobilier : Valeur : Surfaces / Bien immobilier : Nom (multilingue) : Surfaces	Valeurs et intitulés de surface
Bien immobilier : Valeur : Prix / Bien immobilier : Nom (multilingue) : Prix	Valeurs et intitulés de prix
Bien immobilier : Valeur : Diagnostic énergétique / Bien immobilier : Nom (multilingue) : Diagnostic énergétique	Données et intitulés du diagnostic énergétique
Bien immobilier : Valeur : Coordonnées de contact	Champs de la personne de contact (nom, téléphone, e-mail, etc.)

Tags image

Tag	Description
Bien immobilier : Image principale	Image principale du bien immobilier (pour widget Image ou arrière-plan)
Photo : Personne de contact	Photo de la personne de contact
Photo individuelle du bien	Image individuelle selon sa position dans la galerie
Photos du bien immobilier	Toutes les photos (pour widget Gallery ou Carousel)
Plans	Plans uniquement

Tags URL

Tag	Description
Bien immobilier : Lien vers la vue détail	Lien permanent du bien immobilier
Bien immobilier : Lien vers la vue d’impression PDF	URL du PDF généré automatiquement
Bien immobilier : Premier fichier PDF joint	URL d’un PDF téléchargé manuellement
Bien immobilier : Lien vers la page de galerie extra	URL de la vue galerie autonome

Utiliser les conditions d’affichage

Les conditions d’affichage sont particulièrement utiles dans la vue détail pour n’afficher les sections que lorsque les données correspondantes sont disponibles. Cela évite les sections vides. Vous trouvez les conditions dans l’onglet Avancé d’un widget ou d’un conteneur, dans le groupe WP-ImmoMakler, et les combinez avec un opérateur (N’est pas vide / Est vide).

Exemple : Un bien immobilier sans vidéos ne devrait pas afficher de section vidéo vide — condition Vidéo + N’est pas vide.

Condition	Utilisation recommandée
Images disponibles	Afficher/masquer le widget galerie
Vidéos disponibles	Afficher/masquer le widget vidéo
Téléchargements/liens disponibles	Afficher/masquer la section téléchargements
PDF disponible	Afficher/masquer le bouton de téléchargement PDF
Données énergétiques disponibles	Afficher/masquer la section diagnostic énergétique
Coordonnées de contact disponibles	Afficher/masquer la section personne de contact
Champs de description disponibles	Afficher/masquer les sections de texte individuelles
Champs de données disponibles	Afficher/masquer certaines lignes de données ou tuiles
Visites virtuelles disponibles PLUS	Afficher/masquer le widget visites

Conditions basées sur les taxonomies

Les conditions de taxonomie vous permettent de créer des mises en page différentes pour différents types de biens :

• Type de commercialisation : affichage de prix différent pour l’achat et la location
• Type de bien : champs de données différents pour les appartements et les terrains
• Statut : affichage particulier pour les biens de référence
• Type d’utilisation : biens commerciaux traités différemment des biens résidentiels
• Pays : attributions de champs spécifiques par pays

Afficher les biens immobiliers associés

Si vous souhaitez afficher des biens immobiliers supplémentaires sous la vue détail (par exemple via le widget Loop Grid ou Posts d’Elementor), il est logique que le bien immobilier actuellement affiché n’y apparaisse pas une nouvelle fois. Elementor Pro dispose de son propre réglage pour cela — vous n’avez besoin d’aucun identifiant de requête de WP-ImmoMakler.

1. Ajouter un widget Loop ou Posts

   Ajoutez un widget Loop Grid ou Posts sous votre vue détail et configurez-le pour afficher des biens immobiliers (type de contenu Bien immobilier).

2. Exclure le bien immobilier actuel

   Dans le widget, ouvrez l’onglet Requête et sélectionnez Article actuel sous Exclure par.

3. Facultatif : afficher uniquement les biens immobiliers disponibles

   Pour exclure les biens immobiliers déjà vendus ou loués, ajoutez le terme Statut du bien immobilier : disponible sous Inclure par > Termes dans le même onglet.

4. Terminé

   Le bien immobilier actuellement affiché n’apparaît plus dans la boucle.

Obsolète : identifiant de requête immomakler_exclude_current

Jusqu’à la version 5.66, nous recommandions pour le même usage l’identifiant de requête immomakler_exclude_current (onglet Avancé > Identifiant de requête). Il est obsolète depuis la version 5.67 et sera supprimé dans une future version majeure.

Les templates existants continuent de fonctionner sans changement — il n’y a aucune urgence. Adaptez-les quand cela vous convient : videz le champ Identifiant de requête et sélectionnez plutôt Article actuel sous Exclure par dans l’onglet Requête. Le réglage propre à Elementor peut être combiné avec les autres options d’exclusion du widget et laisse le champ Identifiant de requête libre pour d’autres usages.

L’identifiant de requête n’est de toute façon actif que sur les pages de détail de biens immobiliers ; sur les autres pages, la requête reste inchangée.

Définir le bien immobilier de prévisualisation

Lors de la modification du template, Elementor affiche par défaut des données de remplacement. Pour que l’éditeur affiche un vrai bien immobilier, définissez le bien immobilier de prévisualisation dans les paramètres de page — de préférence dès le début, pour travailler avec de vraies données pendant la construction :

1. Cliquez sur l’icône d’engrenage (Paramètres de page) dans le pied de page du panneau éditeur.

2. Ouvrez la section Paramètres d’aperçu.

3. Sous Prévisualiser le contenu dynamique en tant que, sélectionnez Bien immobilier et recherchez un bien immobilier existant.

4. Cliquez sur Appliquer et aperçu. Le template est maintenant affiché avec les données de ce bien immobilier.

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 widgets spécialisés. Vous pouvez contrôler la visibilité des deux templates via les conditions de thème pour les tester en parallèle.

Cela pourrait aussi vous intéresser

• Elementor Pro : vue d’ensemble
• Créer un template d’archive
• Galerie : configuration Slideshow
• Galerie : vue statique