Créer un template de détail

Avec WPBakery Page Builder, vous pouvez personnaliser entièrement la vue détail de chaque bien immobilier. WP-ImmoMakler fournit des éléments WPBakery 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

• WPBakery Page Builder
• WP-ImmoMakler (toute édition)

Comment votre mise en page arrive sur les pages de détail des biens immobiliers

WPBakery n’a pas de Theme Builder : vous y concevez des pages individuelles, mais vous ne pouvez pas enregistrer une mise en page comme modèle pour tous les biens immobiliers. C’est le rôle d’une page modèle : vous concevez une page WordPress tout à fait normale avec WPBakery et vous l’enregistrez dans WP-ImmoMakler comme vue détail. WP-ImmoMakler affiche alors cette page sur chaque page de détail de bien immobilier, avec les données du bien consulté.

Vous pouvez laisser l’option Le plugin gère les vues liste et détail activée : une page modèle est prioritaire.

Note

Ne modifiez pas un bien immobilier individuel avec WPBakery. Les biens immobiliers importés sont écrasés lors du prochain import depuis votre logiciel de gestion immobilière, et vous devriez concevoir chaque bien séparément.

Impreza et Salient

Avec ses modèles de page, Impreza dispose de son propre système de templates, que vous pouvez utiliser comme alternative. La marche à suivre pour Impreza et Salient est décrite sous Impreza et Salient.

Option A : Vue détail de biens immobiliers (démarrage rapide)

L’élément complet affiche l’intégralité de la page de détail — galerie, données, carte, formulaire de contact et tout ce qui compose une vue détail complète.

1. Créer une page modèle

   Créez une nouvelle page sous Pages → Ajouter, par exemple avec le titre « Modèle : vue détail des biens immobiliers », puis ouvrez-la dans l’éditeur WPBakery.

2. Insérer l’élément

   Cliquez sur Ajouter un élément et recherchez Vue détaillée des biens immobiliers. Ajoutez l’élément sur la page.

3. Configurer les options

   Facultatif : désactivez l’affichage du titre de page si votre thème l’affiche déjà. L’option Afficher la galerie d’images permet en outre de masquer la galerie intégrée.

4. Enregistrer comme vue détail

   Dans la zone Modèle WP-ImmoMakler, choisissez sous Utiliser comme l’entrée Vue détaillée (bien) et publiez la page.

5. Tester

   Ouvrez un bien immobilier dans le frontend.

Personnalisez votre titre de page

L’élément Vue détaillée des biens immobiliers 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

L’élément Vue détaillée des biens immobiliers 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 l’élément Bien immobilier : galerie photo) au-dessus du titre.

Option B : Template personnalisé

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

1. Configurer la mise en page

   Créez une page modèle comme dans l’option A, puis construisez dans l’éditeur WPBakery 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.

2. Insérer la galerie

   Ajoutez l’élément Bien immobilier : galerie photo. Il affiche les photos du bien immobilier avec le même moteur de galerie que la section Galerie de photos du Customizer — toutes les options sont configurables par instance d’élément. Voir Configurer la galerie ci-dessous.

3. Ajouter les données du bien immobilier

   Ajoutez les éléments de données souhaités :

   Élément	Description
   Toutes les données immobilières	Tableau de données sous forme de liste de définition — les champs individuels peuvent être affichés ou masqués via des cases à cocher. La largeur de colonne des libellés, les bordures et les espacements sont configurables.
   Diagnostic de performance énergétique	Données du diagnostic énergétique avec adaptation par pays (DE, AT, ES, IT). Mêmes options de style que le tableau de données.

4. Insérer les textes de description

   Ajoutez l’élément Description du bien immobilier. Il propose de nombreuses options :

   • Sélection du champ de texte (description du bien immobilier, équipements, informations complémentaires, emplacement, description courte)
   • Nettoyage automatique du HTML et corrections typographiques
   • Détection des URLs et numéros de téléphone
   • Conversion des puces en listes HTML
   • Mise en retrait optionnelle des listes

   Ajoutez un élément distinct pour chaque texte de description — vous pouvez ainsi distribuer librement les textes sur la page.

5. Ajouter la carte

   Ajoutez l’élément Bien immobilier : carte des environs. 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 (par exemple 350px, 50vh, 100%).

6. Concevoir la zone de contact

   Élément	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 sous forme de liste de définition
   Photo de la personne de contact	Photo de la personne de contact avec format (3:2, 4:3, 1:1, etc.), bordure, espacements et rayon de bordure

7. Insérer les vidéos

   Ajoutez l’élément Bien immobilier : vidéos pour afficher toutes les vidéos associées au bien immobilier. À partir de PLUS, l’élément Bien immobilier : visites virtuelles affiche les visites virtuelles à 360° du bien sous forme d’image d’aperçu qui ouvre la visite dans une lightbox après le consentement des visiteurs. Le format d’image et le rayon des angles se règlent dans l’élément.

8. Enregistrer comme vue détail et tester

   Dans la zone Modèle WP-ImmoMakler, choisissez sous Utiliser comme l’entrée Vue détaillée (bien), publiez la page et ouvrez un bien immobilier dans le frontend.

Éléments single disponibles

Élément	Description
Vue détaillée des biens immobiliers	Vue détail complète avec template HTML WP-ImmoMakler
Toutes les données immobilières	Tableau de données sous forme de liste de définition avec options de style
Boîtes de données de référence	Données sélectionnées du bien immobilier sous forme de boîtes avec libellé et valeur
Description du bien immobilier	Champs de texte libre avec mise en forme
Diagnostic de performance énergétique	Données du diagnostic énergétique avec support multi-pays
Bien immobilier : galerie photo	Galerie d’images complète avec mode slideshow/statique, toutes les options du Customizer par instance
Bien immobilier : carte des environs	Carte indiquant l’emplacement du bien immobilier
Bien immobilier : vidéos	Vidéos sous forme d’image d’aperçu avec lightbox ; format d’image et rayon des angles réglables
Bien immobilier : visites virtuelles PLUS	Visites virtuelles sous forme d’image d’aperçu avec lightbox ; format d’image et rayon des angles réglables
Formulaire de contact immobilier	Formulaire de contact avec attribution du bien immobilier
Coordonnées	Données de la personne de contact sous forme de liste de définition
Photo de la personne de contact	Photo avec format et style

Configurer la galerie

L’élément Bien immobilier : galerie photo propose par instance 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 à l’élément WPBakery.

Astuce

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

Note

L’affichage conditionnel (p. ex. les options statiques disparaissent en mode slideshow) suit le système dependency de WPBakery, qui ne peut vérifier qu’un paramètre parent direct. Dans certaines configurations, des champs peuvent donc rester visibles alors qu’ils n’ont aucun effet dans le mode actif — le rendu filtre ces valeurs lors de l’affichage.

Options de style

Tableaux de données (Données du bien immobilier, Diagnostic énergétique, Coordonnées de contact)

Tous les éléments de liste de définition partagent les mêmes options de style :

• Largeur de colonne gauche — Largeur de la colonne des libellés
• Bordure — Séparateurs entre les lignes
• Espacements — Espacement intérieur des cellules
• Éditeur CSS — Règles CSS personnalisées directement sur l’élément

Photo de la personne de contact

L’élément photo offre des possibilités de mise en forme avancées :

• Format — Original, 3:2, 4:3, 1:1, 3:4, 2:3
• Espacements — Marge et padding (les quatre côtés indépendamment)
• Rayon de bordure — Les quatre coins configurables indépendamment
• Bordure — Couleur, largeur et style (solid, dashed, dotted, double)

Aperçu et test

WPBakery affiche un aperçu simplifié des éléments dans l’éditeur backend. Pour tester la page modèle avec de vraies données du bien immobilier :

1. Enregistrer la page modèle

   Enregistrez la page modèle.

2. Ouvrir un bien immobilier

   Ouvrez un bien immobilier dans le frontend.

3. Vérifier l’affichage

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

L’adresse de la page modèle elle-même ne convient pas pour cela : aucun bien immobilier n’y est dans le contexte, et les visiteurs sont redirigés vers la vue liste des biens immobiliers.

Avec des conditions sur la page modèle, vous utilisez des mises en page différentes pour des biens immobiliers différents — par exemple une pour les maisons et une pour les appartements. Voir Différents modèles pour différents biens immobiliers.

Astuce

Approche recommandée : Commencez avec l’élément complet Vue détaillée des biens immobiliers pour vous familiariser avec les données disponibles. Créez ensuite progressivement une mise en page personnalisée en remplaçant les sections individuelles par des éléments spécialisés.

Cela pourrait aussi vous intéresser

• Pages modèles
• Créer un template d’archive
• Impreza et Salient
• Galerie d’images : Slideshow avec vignettes — Options de configuration du Customizer pour la galerie Swiper