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

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

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

3. Insérer l’élément

   Ouvrez l’éditeur Bricks et ajoutez l’élément Vue détail (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étail (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étail (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 d’images 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_property.

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, formulaire de contact à droite.

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 d’images 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
   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
   Diagnostic énergétique	Données du diagnostic énergétique avec adaptation par pays (DE, AT, ES, IT) et diagramme énergétique
   Équipements/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 de localisation. Il affiche l’emplacement du bien immobilier sur Google Maps.

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.

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 :

   • Textes de description — Afficher les sections de texte uniquement si un champ de description est renseigné
   • PDF — Afficher le bouton de téléchargement PDF uniquement si un PDF est disponible
   • 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
└── Formulaire de contact → Élément WP-ImmoMakler

Éléments single disponibles

Élément	Description
Vue détail (complète)	Vue détail complète avec template HTML WP-ImmoMakler
Données du bien immobilier	Tableau de données sous forme de liste de définition avec options de style
Diagnostic énergétique	Données du diagnostic énergétique avec diagramme et support multi-pays
Équipements/Caractéristiques	Liste d’icônes avec contrôle de la mise en page et du style
Galerie d’images	Galerie d’images du bien immobilier
Carte de localisation	Carte de localisation Google Maps
Formulaire de contact	Formulaire de contact avec attribution du bien immobilier
Vidéos	Vidéos intégrées

Configurer la galerie

L’élément Galerie d’images propose, par instance d’élément, les mêmes options que la section Galerie d’images 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
Effet de transition	Glissement (par défaut) ou Fondu enchaîné (Cross-Fade)
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, Original ; statique en plus 2:1 et 3:1)
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
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
Textes de description	Afficher les sections de texte uniquement si une description est disponible
PDF	Afficher le bouton de téléchargement PDF uniquement si un PDF 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. Ouvrez le template dans l’éditeur Bricks.
2. Bricks affiche automatiquement les données d’un article du type de publication assigné. Vous pouvez sélectionner un article spécifique via les paramètres d’aperçu.
3. 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étail (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