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.

Plus rapide avec l'assistant de configuration

L’assistant de configuration crée, si vous le souhaitez, des modèles de démarrage déjà conçus dans le Theme Builder : bien, bien de référence et projet de construction comme modèles pour articles uniques, construits à partir de widgets individuels dans des conteneurs. Vous les adaptez ensuite dans Elementor. Vous avez besoin des instructions suivantes si vous construisez votre modèle vous-même.

Prérequis

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

Note

WP-ImmoMakler détecte automatiquement vos modèles : dès qu’un modèle Elementor Pro s’applique à une page de biens immobiliers, la page est affichée avec ce modèle. Les pages sans modèle correspondant continuent d’être affichées avec les modèles propres à WP-ImmoMakler. Vous n’avez rien à configurer.

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étaillée de l’immobilier (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.

   

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

Personnalisez votre titre de page

Le widget Vue détaillée de l’immobilier (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étaillée de l’immobilier (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 de photos 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 de photos 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	N’est plus dans le panneau des widgets : la mise en page a été intégrée au widget Galerie de photos de biens immobiliers en tant que mise en page statique Mosaïque. Les instances déjà placées continuent d’être affichées

   Le widget Galerie de photos 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 immobilières	Tableau de données librement configurable avec tous les champs du bien
   Liste des surfaces	Toutes les données de surface (surface habitable, surface du terrain, etc.)
   Liste des prix	Toutes les données de prix (prix d’achat, loyer hors charges, charges, etc.)
   Équipement/caractéristiques	Caractéristiques des équipements sous forme de liste d’icônes
   Diagnostic de performance énergétique	Données du diagnostic énergétique sous forme de tableau
   Liste des icônes de référence	Champs de données quelconques sous forme de liste d’icônes
   Boîtes de données de référence	Données clés sous forme de tuiles visuelles

6. Insérer les textes de description

   Faites glisser le widget Textes descriptifs sur la page pour afficher les textes issus du logiciel immobilier. Sous Affichage, choisissez entre Toutes les descriptions (avec intertitres) - brève description, description du bien, équipements et informations complémentaires regroupés dans un seul bloc, avec des sous-titres, comme dans la vue détail classique - et Texte unique, qui affiche l’un de ces textes : résumé, brève description, description du bien, équipements, emplacement ou informations complémentaires. Le titre automatique peut être activé ou désactivé et défini en H2, H3 ou H4. Avec Toutes les descriptions (avec intertitres), vous définissez le niveau des sous-titres sous Balise de l’intertitre (H2 à H6) ; avec Automatiquement, ils se trouvent un niveau sous le titre. Si aucun contenu n’est disponible pour la sélection, le widget est entièrement masqué.

   Dans la section Filtre de texte, vous définissez la préparation du texte, avec les six mêmes interrupteurs que dans le dynamic tag Bien immobilier : Textes de description : Nettoyer le HTML (sauf <p>, <br>, <b> et <strong>), Lier des URL et des adresses e-mail, Liens vers des numéros de téléphone, Convertir les énumérations (-, -, +) en une liste, Indentation facile des listes à puces et Exécuter des améliorations typographiques. Les six sont activés par défaut.

   Le dynamic tag Bien immobilier : Textes de description reste par ailleurs disponible pour afficher un champ de texte unique dans n’importe quel autre widget (p. ex. un widget texte).

7. Ajouter la carte

   Faites glisser le widget Carte des environs du bien immobilier individuel sur la page. Il affiche l’emplacement du bien immobilier avec le fournisseur de cartes que vous avez sélectionné dans le Customizer, sous WP-ImmoMakler → Cartes.

8. Concevoir la zone de contact

   Widget	Description
   Formulaire de contact immobilier	Formulaire de demande avec attribution automatique du bien immobilier
   Coordonnées	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 du certificat é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
    Projet	Template valide uniquement pour les projets de construction, pas pour leurs unités

Configurer la galerie

Le widget Galerie de photos de biens immobiliers propose par instance de widget les mêmes options que la section Galerie de photos 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
Mise en page statique	Vertical (bande de vignettes en bas), 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	Glisser (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)
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, 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 (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
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)
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 : 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 »
Bien immobilier : Lien vers la page de galerie extra	URL de la vue galerie autonome
Bien immobilier : Lien retour vers la vue liste (vers la fiche du bien immobilier)	Pour un bouton « Retour aux résultats » : ramène à la liste dont provient le visiteur - recherche filtrée, page 3, carrousel de la page d’accueil - et y fait défiler jusqu’à la fiche du bien immobilier

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
Projet	Afficher ou masquer des éléments uniquement sur la page de détail d’un projet de construction
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.

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.

Afficher uniquement les biens similaires

PLUS Si la boucle ne doit pas afficher des biens quelconques mais uniquement des biens similaires — même type de bien, même type de commercialisation et proximité de localisation —, saisissez dans le widget, sous Avancé > Identifiant de requête, la valeur immomakler_similar_properties. WP-ImmoMakler filtre alors les résultats selon les mêmes règles que le bloc automatique Biens similaires et exclut le bien actuellement affiché. L’identifiant de requête n’est actif que sur les pages de détail de biens immobiliers ; sur les autres pages, la requête reste inchangée.

Note

Le nombre de biens, le tri et la mise en page de la carte se règlent via les paramètres propres au widget Loop Grid/Articles — l’identifiant de requête détermine uniquement quels biens sont inclus dans les résultats.

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. Ouvrir les paramètres de page

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

2. Ouvrir les paramètres d’aperçu

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

3. Choisir un bien immobilier

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

4. Appliquer l’aperçu

   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