Créer un template de détail

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

• Bricks Builder (thème actif)
• WP-ImmoMakler (toute édition)

Note

WP-ImmoMakler détecte automatiquement vos modèles : dès qu’un modèle Bricks 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 : Vue détail (complète)

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

   Naviguez vers Bricks > Templates et créez un nouveau template de type Single.

2. Définir les conditions

   Ouvrez les paramètres du template et définissez, sous Conditions, le type de publication sur immomakler_object.

   Pour une vue détaillée dédiée aux projets de construction ou aux biens de référence, créez un second template : sous Conditions, choisissez la condition WP-ImmoMakler puis, sous Biens immobiliers, l’entrée Projets ou Biens de référence. Pour ces biens, ce template est prioritaire sur celui destiné à tous les biens immobiliers ; un template pour un bien unique l’emporte toujours.

3. Insérer l’élément

   Ouvrez l’éditeur Bricks et ajoutez l’élément Vue détaillée (complète) de la catégorie WP-ImmoMakler.

4. Enregistrer et tester

   Enregistrez le template et ouvrez n’importe quel bien immobilier dans le frontend.

Personnalisez votre titre de page

L’élément Vue détaillée (complète) propose l’option Afficher le titre (par défaut : Oui). Choisissez Non 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 (complète) propose l’option Afficher la galerie d’images (par défaut : Oui). Choisissez Non pour masquer la galerie intégrée au template HTML — par exemple lorsque vous souhaitez placer votre propre galerie (comme l’élément Galerie de photos ou un élément Bricks utilisant le Dynamic Tag {immomakler_property_images}) 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 et de dynamic tags. Chaque élément représente un aspect spécifique du bien immobilier et peut être librement positionné et stylisé.

1. Créer un nouveau template

   Créez un nouveau template Bricks de type Single et définissez la condition sur le type de publication immomakler_object.

2. Construire la structure de la page

   Créez la structure souhaitée avec des sections et des colonnes — par exemple, une zone principale avec galerie et données à gauche, et à droite une colonne latérale avec l’exposé PDF et l’interlocuteur. Le formulaire de contact a besoin de place pour des champs multi-colonnes et les textes de consentement ; placez-le dans sa propre section en pleine largeur sous les deux colonnes.

3. Insérer la galerie

   Vous avez trois possibilités pour afficher les photos du bien immobilier :

   Variante 1 : Galerie d’images WP-ImmoMakler Ajoutez l’élément Galerie de photos de la catégorie WP-ImmoMakler. Il propose les mêmes options que vous connaissez du Customizer — par instance d’élément. Voir Configurer la galerie ci-dessous.

   Variante 2 : Éléments de galerie natifs Bricks Utilisez un élément Carousel, Slider ou Image Gallery natif de Bricks et définissez le dynamic tag {immomakler_property_images} comme source d’image. Vous avez ainsi un contrôle total sur les options du slider, les animations et la mise en page — avec toutes les possibilités de style de Bricks.

   Variante 3 : Galerie tierce Les éléments de galerie de tiers (par exemple BricksExtras, BricksForge, Jetstylizer) peuvent également utiliser le dynamic tag {immomakler_property_images} comme source d’image. Sélectionnez la source d’image dynamique dans l’élément concerné et insérez le tag.

   Vous pouvez également filtrer les images avec le tag photo :

   • {immomakler_property_images} — Toutes les images
   • {immomakler_property_images:non_floorplans} — Toutes les images sauf les plans
   • {immomakler_property_images:floorplans} — Plans uniquement

4. Ajouter les données du bien immobilier

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

   Élément	Description
   Informations sur le 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
   Diagnostic de performance énergétique	Données du diagnostic énergétique avec adaptation par pays (DE, AT, ES, IT) et diagramme énergétique
   Équipement/caractéristiques	Caractéristiques sous forme de liste d’icônes avec mise en page, icônes et style configurables

5. Insérer les textes de description

   Utilisez un élément Bricks Basic Text ou Rich Text avec le dynamic tag {immomakler_description:key}. Champs de description disponibles :

   • {immomakler_description:objektbeschreibung} — Description du bien immobilier
   • {immomakler_description:ausstatt_beschr} — Description des équipements
   • {immomakler_description:lage} — Description de l’emplacement
   • {immomakler_description:sonstige_angaben} — Informations complémentaires
   • {immomakler_description:dreizeiler} — Description courte

   La sortie est automatiquement mise en forme : les puces sont converties en listes, les URLs et numéros de téléphone sont liés, et des corrections typographiques sont appliquées.

6. Ajouter la carte

   Ajoutez l’élément 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.

7. Insérer le formulaire de contact

   Ajoutez l’élément Formulaire de contact. Il affiche le formulaire de contact WP-ImmoMakler avec l’attribution automatique du bien immobilier. Attribuez à la section du formulaire l’ID kontakt sous Attributes, afin qu’un bouton avec le lien #kontakt mène directement au formulaire.

   Pour l’interlocuteur, il existe les éléments Photo de la personne de contact et Coordonnées. La photo dispose de réglages de rapport d’aspect, de largeur et de bordure (avec rayon d’angle, par exemple 50 % pour une photo ronde) ; les coordonnées se sélectionnent champ par champ, comme pour les données du bien immobilier. Si l’interlocuteur n’a pas de photo, l’élément n’affiche rien.

8. Insérer les vidéos

   Ajoutez l’élément Vidéos pour afficher toutes les vidéos associées au bien immobilier.

9. Conditions pour l’affichage conditionnel

   Utilisez les conditions Bricks pour afficher des sections uniquement lorsque les données correspondantes sont disponibles. Les conditions se trouvent sous le groupe WP-ImmoMakler :

   • Contenu du bien — Afficher une section avec son titre uniquement s’il y a des vidéos, une visite virtuelle, une carte, etc., ou un bouton de téléchargement PDF uniquement si un document PDF est disponible
   • Données du bien immobilier — Afficher une ligne uniquement si un champ de données a une valeur
   • Textes de description — Afficher les sections de texte uniquement si un champ de description est renseigné
   • Bien de référence — Masquer par exemple le bouton de demande sur les biens de référence
   • Projet — Afficher ou masquer des éléments uniquement sur la page de détail d’un projet de construction
   • Conditions de taxonomie — Mises en page différentes selon le type de bien, le type de commercialisation ou le pays

10. Enregistrer et tester

    Enregistrez le template et ouvrez un bien immobilier dans le frontend.

Exemple : structure du template

Section
├── Heading           → Dynamic tag : {post_title}
├── Galerie d'images  → Élément WP-ImmoMakler
├── Columns
│   ├── Données du bien immobilier   → Élément WP-ImmoMakler
│   └── Diagnostic énergétique → Élément WP-ImmoMakler
├── Heading           → Description
├── Basic Text        → Dynamic tag : {immomakler_description:objektbeschreibung}
├── Heading           → Emplacement
├── Basic Text        → Dynamic tag : {immomakler_description:lage}
├── Équipements       → Élément WP-ImmoMakler
├── Carte de localisation → Élément WP-ImmoMakler
├── Vidéos            → Élément WP-ImmoMakler
├── Aside
│   ├── Photo de la personne de contact → Élément WP-ImmoMakler
│   ├── Coordonnées                     → Élément WP-ImmoMakler
│   └── Button                          → Lien : #kontakt
Section (ID : kontakt)
└── Formulaire de contact → Élément WP-ImmoMakler

Éléments single disponibles

Élément	Description
Vue détaillée (complète)	Vue détail complète avec template HTML WP-ImmoMakler
Informations sur le bien immobilier	Tableau de données sous forme de liste de définition avec options de style
Diagnostic de performance énergétique	Données du diagnostic énergétique avec diagramme et support multi-pays
Équipement/caractéristiques	Liste d’icônes avec contrôle de la mise en page et du style
Galerie de photos	Galerie d’images du bien immobilier
Carte des environs	Carte indiquant l’emplacement du bien immobilier
Formulaire de contact	Formulaire de contact avec attribution du bien immobilier
Coordonnées	Données de l’interlocuteur sous forme de liste de définition, champs sélectionnables individuellement
Photo de la personne de contact	Photo de l’interlocuteur avec rapport d’aspect, largeur et bordure
Vidéos	Vidéos sous forme de vignette avec lightbox ; format d’image et rayon des angles réglables
Visites virtuelles PLUS	Visites virtuelles à 360° sous forme de vignette avec lightbox ; format d’image et rayon des angles réglables

Biens similaires

PLUS Affichez des biens similaires (même type de bien, même type de commercialisation, à proximité) avec une Query Loop Bricks et votre propre fiche :

1. Créer la fiche

   Créez un Bloc pour la fiche et concevez-le comme les fiches de votre aperçu des biens, par exemple avec la Galerie, le dynamic tag {immomakler_value:ort}, un titre avec {post_title} et les Encadrés de données clés.

2. Activer la Query Loop

   Activez la Query Loop sur le bloc et choisissez sous Requête le type Biens similaires (WP-ImmoMakler).

3. Définir le nombre

   Dans le champ Nombre de biens similaires, indiquez combien de biens doivent apparaître (par défaut : 3).

Le bien actuellement affiché n’est jamais inclus. Dans l’éditeur, la boucle affiche les biens similaires du bien d’aperçu que vous avez choisi sous Populate Content. Les critères de similarité sont décrits sous Biens similaires.

Configurer la galerie

L’élément Galerie de photos propose, par instance d’élément, les mêmes options que la section Galerie de photos du Customizer. Les groupes les plus importants en un coup d’œil :

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 miniatures en bas), Horizontal (bande de miniatures à droite), Sans miniatures, Carrousel
Mise en page statique	Vertical (bande de miniatures en bas), Horizontal (grille de miniatures à droite), Sans miniatures, 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–2 000 ms (par défaut 400 ms)
Lecture automatique	Défilement automatique avec délai configurable en secondes
Proportions	Image principale et miniatures 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 miniatures	Largeur 40–400 px (contrôle le nombre de miniatures visibles simultanément)
Miniatures 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 la galerie (statique)	Automatique ou fixe
Indication de photos supplémentaires	Superposition de compteur sur la dernière miniature (+N) ou bouton sous la galerie (“Afficher 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 détaillées des valeurs individuelles se trouvent dans la documentation du Customizer pour la Slideshow et la galerie statique — le même vocabulaire s’applique à l’élément Bricks.

Astuce

Si vous souhaitez que l’élément affiche exactement la valeur par défaut du Customizer sans aucune configuration supplémentaire, laissez simplement les options de l’élément à leurs valeurs par défaut — celles-ci correspondent aux valeurs par défaut du Customizer.

Dynamic tags pour la vue détail

En plus des éléments spécialisés, vous pouvez utiliser des dynamic tags dans n’importe quel élément Bricks :

Tag	Description
{immomakler_value:key}	Valeur formatée d’un champ de données (prix, surface, pièces, etc.)
{immomakler_label:key}	Libellé traduit d’un champ de données
{immomakler_description:key}	Texte de description avec mise en forme automatique
{immomakler_property_images}	Photos du bien immobilier en tant que source d’image

Conditions pour l’affichage conditionnel

Les conditions vous permettent d’éviter les sections vides sur la page de détail :

Condition	Utilisation recommandée
Contenu du bien	Afficher les vidéos, visites, plans, carte, diagnostic énergétique ou un bouton de téléchargement PDF uniquement s’ils sont disponibles
Données du bien immobilier	Afficher des lignes de données ou des vignettes individuelles uniquement si elles ont une valeur
Bien de référence	Masquer le bouton de demande ou les prix sur les biens de référence
Projet	Afficher ou masquer des éléments uniquement sur la page de détail d’un projet de construction
Textes de description	Afficher les sections de texte uniquement si une description est disponible
Pays	Affichage spécifique par pays (par exemple, diagnostic énergétique uniquement pour la France)
Type de bien	Champs différents pour les appartements et les terrains
Type de commercialisation	Affichage de prix différent pour l’achat et la location
Statut	Affichage particulier pour les biens immobiliers de référence

Aperçu et test

Bricks offre un aperçu en direct directement dans l’éditeur. Pour tester le template avec de vraies données du bien immobilier :

1. Ouvrir le template

   Ouvrez le template dans l’éditeur Bricks.

2. Choisir un bien immobilier de prévisualisation

   Dans les paramètres du template, sous Populate Content, choisissez « Single (post/page/CPT) » comme Content Type, puis un bien immobilier. Sans ce réglage, les éléments WP-ImmoMakler restent vides dans l’éditeur car aucun bien immobilier n’est chargé.

3. Vérifier dans le frontend

   Vérifiez également le résultat dans le frontend en ouvrant directement un bien immobilier.

Astuce

Approche recommandée : Commencez avec l’élément complet Vue détaillée (complète) pour vous familiariser avec les données disponibles. Créez ensuite progressivement un template personnalisé en remplaçant les sections individuelles par des éléments spécialisés et des dynamic tags.

Cela pourrait aussi vous intéresser

• Bricks Builder : vue d’ensemble — Tous les éléments, dynamic tags et conditions en un coup d’œil
• Créer un template d’archive — Concevoir la vue liste de biens immobiliers avec Bricks
• Créer un template de détail (Elementor Pro) — Le même guide pour Elementor Pro
• Créer un template de détail (Divi Theme Builder) — Le même guide pour Divi