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)

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

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 ou un template

   Créez un template WPBakery pour le type de publication Bien immobilier ou modifiez directement un bien immobilier existant.

2. Insérer l’élément

   Cliquez sur Ajouter un élément et recherchez Vue détail de 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 et tester

   Enregistrez et ouvrez un bien immobilier dans le frontend.

Personnalisez votre titre de page

L’élément Vue détail de 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étail de 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 Galerie photos) 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 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 Galerie photos. Il affiche les photos du bien immobilier avec le même moteur de galerie que la section Galerie d’images 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 du bien immobilier	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 é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 Carte de localisation. Il affiche l’emplacement du bien immobilier sur Google Maps. La hauteur de la carte est configurable (par exemple 350px, 50vh, 100%).

6. Concevoir la zone de contact

   Élément	Description
   Formulaire de contact	Formulaire de demande avec attribution automatique du bien immobilier
   Coordonnées de contact	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 Vidéos pour afficher toutes les vidéos associées au bien immobilier.

8. Enregistrer et tester

   Enregistrez et ouvrez un bien immobilier dans le frontend.

Éléments single disponibles

Élément	Description
Vue détail de biens immobiliers	Vue détail complète avec template HTML WP-ImmoMakler
Toutes les données du bien immobilier	Tableau de données sous forme de liste de définition avec options de style
Description du bien immobilier	Champs de texte libre avec mise en forme
Diagnostic énergétique	Données du diagnostic énergétique avec support multi-pays
Galerie photos	Galerie d’images complète avec mode slideshow/statique, toutes les options du Customizer par instance
Carte de localisation	Carte de localisation Google Maps
Vidéos	Vidéos intégrées
Formulaire de contact	Formulaire de contact avec attribution du bien immobilier
Coordonnées de contact	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 Galerie photos propose par instance les mêmes options que la section Galerie d’images 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
Effet de transition	Glissement (par défaut) ou Fondu (cross-fade)
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, Original ; statique avec en plus 2:1 et 3:1)
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
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 le template avec de vraies données du bien immobilier :

1. Enregistrez la page ou le template.
2. Ouvrez un bien immobilier dans le frontend.
3. Vérifiez que tous les éléments s’affichent correctement et que les données du bien immobilier sont bien affichées.

Astuce

Approche recommandée : Commencez avec l’élément complet Vue détail de 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

• Galerie d’images : Slideshow avec vignettes — Options de configuration du Customizer pour la galerie Swiper
• Créer un template de détail (Divi Theme Builder) — Le même guide pour Divi
• Créer un template de détail (Elementor Pro) — Le même guide pour Elementor Pro
• Créer un template de détail (Bricks Builder) — Le même guide pour Bricks