Single-Template erstellen

Mit dem Bricks Builder gestalten Sie die Detailansicht jeder Immobilie individuell. WP-ImmoMakler stellt dafür spezialisierte Bricks-Elemente bereit, die alle Aspekte einer Immobilie abdecken — von der Bildergalerie über Datenblätter bis zum Kontaktformular.

Voraussetzungen

• Bricks Builder (aktives Theme)
• WP-ImmoMakler (beliebige Edition)

Hinweis

Deaktivieren Sie im Backend Ihrer Website (wp-admin) unter WP-ImmoMakler → Einstellungen → Theme Builder die Option Plugin übernimmt Listen- und Detailansicht, wenn Sie die Darstellung vollständig mit Bricks steuern möchten.

Option A: Detailansicht (komplett)

Das Komplett-Element gibt die gesamte Detailseite aus — inklusive Galerie, Daten, Karte, Kontaktformular und allem, was zu einer vollständigen Detailansicht gehört.

1. Neues Template anlegen

   Navigieren Sie zu Bricks > Templates und erstellen Sie ein neues Template vom Typ Single.

2. Conditions setzen

   Öffnen Sie die Template-Einstellungen und setzen Sie unter Conditions den Post Type auf immomakler_property.

3. Element einfügen

   Öffnen Sie den Bricks-Editor und fügen Sie das Element Detailansicht (komplett) aus der Kategorie WP-ImmoMakler ein.

4. Speichern und testen

   Speichern Sie das Template und öffnen Sie eine beliebige Immobilie im Frontend.

Tipp

Das Element Detailansicht (komplett) bietet die Option Überschrift anzeigen (Standard: Ja). Wählen Sie Nein, um die vom HTML-Template ausgegebene Überschrift (h1) auszublenden — etwa wenn Sie den Seitentitel selbst gestalten oder Ihr Theme ihn bereits ausgibt.

Tipp

Das Element Detailansicht (komplett) bietet die Option Bildergalerie anzeigen (Standard: Ja). Wählen Sie Nein, um die in das HTML-Template integrierte Bildergalerie auszublenden — etwa wenn Sie oberhalb des Titels eine eigene Galerie (z. B. das Element Bildergalerie oder ein Bricks-Element mit dem Dynamic Tag {immomakler_property_images}) platzieren möchten.

Option B: Individuelles Template gestalten

Für volle Gestaltungsfreiheit bauen Sie die Detailansicht aus einzelnen WP-ImmoMakler-Elementen und Dynamic Tags zusammen. Jedes Element stellt einen bestimmten Aspekt der Immobilie dar und lässt sich frei positionieren und stylen.

1. Neues Template anlegen

   Erstellen Sie ein neues Bricks-Template vom Typ Single und setzen Sie die Condition auf den Post Type immomakler_property.

2. Seitenstruktur aufbauen

   Erstellen Sie die gewünschte Seitenstruktur mit Sections und Columns — z. B. ein Hauptbereich mit Galerie und Daten links, Kontaktformular rechts.

3. Galerie einfügen

   Sie haben drei Möglichkeiten, die Immobilienfotos darzustellen:

   Variante 1: WP-ImmoMakler Bildergalerie Fügen Sie das Element Bildergalerie aus der Kategorie WP-ImmoMakler ein. Es stellt dieselben Optionen bereit, die Sie aus dem Customizer kennen — und zwar pro Element-Instanz. Siehe Galerie konfigurieren weiter unten.

   Variante 2: Bricks-eigene Galerie-Elemente Verwenden Sie ein Bricks-eigenes Carousel, Slider oder Image Gallery-Element und setzen Sie als Bildquelle den Dynamic Tag {immomakler_property_images}. So haben Sie volle Kontrolle über Slider-Optionen, Animationen und Layout — mit allen Styling-Möglichkeiten von Bricks.

   Variante 3: Drittanbieter-Galerie Auch Galerie-Elemente von Drittanbietern (z. B. BricksExtras, BricksForge, Jetstylizer) lassen sich mit dem Dynamic Tag {immomakler_property_images} als Bildquelle nutzen. Wählen Sie dazu im jeweiligen Element die dynamische Bildquelle und fügen Sie den Tag ein.

   Mit dem Foto-Tag können Sie die Bilder außerdem filtern:

   • {immomakler_property_images} — Alle Bilder
   • {immomakler_property_images:non_floorplans} — Alle Bilder außer Grundrisse
   • {immomakler_property_images:floorplans} — Nur Grundrisse

4. Immobiliendaten hinzufügen

   Fügen Sie die gewünschten Daten-Elemente hinzu:

   Element	Beschreibung
   Objektdaten	Datentabelle als Definitionsliste — einzelne Felder lassen sich über Checkboxen ein-/ausblenden
   Energieausweis	Energieausweisdaten mit länderspezifischer Anpassung (DE, AT, ES, IT) und Energiediagramm
   Ausstattung/Merkmale	Ausstattungsmerkmale als Icon-Liste mit konfigurierbarem Layout, Icons und Styling

5. Beschreibungstexte einfügen

   Verwenden Sie ein Bricks Basic Text- oder Rich Text-Element mit dem Dynamic Tag {immomakler_description:key}. Verfügbare Beschreibungsfelder:

   • {immomakler_description:objektbeschreibung} — Objektbeschreibung
   • {immomakler_description:ausstatt_beschr} — Ausstattungsbeschreibung
   • {immomakler_description:lage} — Lagebeschreibung
   • {immomakler_description:sonstige_angaben} — Sonstige Angaben
   • {immomakler_description:dreizeiler} — Kurzbeschreibung

   Die Ausgabe wird automatisch aufbereitet: Aufzählungszeichen werden in Listen konvertiert, URLs und Telefonnummern verlinkt, typografische Korrekturen angewendet.

6. Karte hinzufügen

   Fügen Sie das Element Umgebungskarte ein. Es zeigt den Standort der Immobilie auf Google Maps an.

7. Kontaktformular einfügen

   Fügen Sie das Element Kontaktformular ein. Es zeigt das WP-ImmoMakler Kontaktformular mit automatischer Objekt-Zuordnung an.

8. Videos einfügen

   Fügen Sie das Element Videos ein, um alle zur Immobilie hinterlegten Videos anzuzeigen.

9. Conditions für bedingte Anzeige

   Verwenden Sie Bricks Conditions, um Bereiche nur dann anzuzeigen, wenn die entsprechenden Daten vorhanden sind. Die Conditions finden Sie unter der Gruppe WP-ImmoMakler:

   • Beschreibungstexte — Textabschnitte nur anzeigen, wenn ein Beschreibungsfeld gefüllt ist
   • PDF — PDF-Download-Button nur anzeigen, wenn ein PDF vorhanden ist
   • Taxonomie-Conditions — Unterschiedliche Layouts je nach Immobilienart, Vermarktungsart oder Land

10. Speichern und testen

    Speichern Sie das Template und öffnen Sie eine Immobilie im Frontend.

Beispiel: Template-Aufbau

Section
├── Heading           → Dynamic Tag: {post_title}
├── Bildergalerie     → WP-ImmoMakler Element
├── Columns
│   ├── Objektdaten       → WP-ImmoMakler Element
│   └── Energieausweis    → WP-ImmoMakler Element
├── Heading           → Beschreibung
├── Basic Text        → Dynamic Tag: {immomakler_description:objektbeschreibung}
├── Heading           → Lage
├── Basic Text        → Dynamic Tag: {immomakler_description:lage}
├── Ausstattung       → WP-ImmoMakler Element
├── Umgebungskarte    → WP-ImmoMakler Element
├── Videos            → WP-ImmoMakler Element
└── Kontaktformular   → WP-ImmoMakler Element

Verfügbare Single-Elemente

Element	Beschreibung
Detailansicht (komplett)	Komplette Detailansicht mit WP-ImmoMakler HTML-Template
Objektdaten	Datentabelle als Definitionsliste mit Styling-Optionen
Energieausweis	Energieausweisdaten mit Diagramm und Länder-Support
Ausstattung/Merkmale	Icon-Liste mit Layout- und Styling-Kontrolle
Bildergalerie	Immobilien-Bildergalerie
Umgebungskarte	Google-Maps-Lagekarte
Kontaktformular	Kontaktformular mit Objekt-Zuordnung
Videos	Eingebettete Videos

Galerie konfigurieren

Das Bildergalerie-Element bietet pro Element-Instanz dieselben Optionen wie die Customizer-Sektion Bildergalerie. Die wichtigsten Gruppen im Überblick:

Bereich	Optionen
Bildauswahl	Alle Bilder, nur Grundrisse, ohne Grundrisse
Galerie-Typ	Slideshow (Swiper-basierte Galerie mit Lightbox) oder Statisch (Bild-Raster ohne Slider, Lightbox bei Klick)
Slideshow-Layout	Vertikal (Vorschauleiste unten), Horizontal (Vorschauleiste rechts), Ohne Vorschaubilder, Karussell
Übergangseffekt	Schieben (Standard) oder Überblenden (Cross-Fade)
Übergangsdauer	100–2000 ms (Standard 400 ms)
Autoplay	Automatisches Wechseln mit konfigurierbarer Sekunden-Verzögerung
Seitenverhältnisse	Haupt- und Vorschaubilder unabhängig konfigurierbar (16:9, 3:2, 4:3, 1:1, Goldener Schnitt, Original; statisch zusätzlich 2:1 und 3:1)
Vorschau-Größe	40–400 px Breite (steuert Anzahl gleichzeitig sichtbarer Vorschaubilder)
Mobile Vorschaubilder	Anzeigen oder Ausblenden auf Geräten ≤ 768 px
Karussell-Höhe	Pixel- oder Viewport-Einheit (px, vw, vh, svh, lvh, dvh)
Statisch-Raster	Zeilen und Spalten unabhängig konfigurierbar pro Layout-Variante
Galerie-Höhe (statisch)	Automatisch oder fest
Mehr-Fotos-Hinweis	Zähler-Overlay auf dem letzten Vorschaubild (+N) oder Button unter der Galerie („Alle N Fotos anzeigen”)
Hover-Animation (statisch)	Keine / Sanftes Einzoomen (Standard) / Aufhellen — visuelle Rückmeldung beim Drüberfahren mit der Maus
Abstände + Rundung	Gap zwischen Bildern, Border-Radius (jedes Bild einzeln oder nur Galerie-Außenkanten)
Navigationsfarbe	Farbpicker für Pfeil-Buttons und Pagination-Dots (Slideshow-Modus)

Die Beschreibungen der einzelnen Werte sind im Customizer-Doku zur Slideshow und statischen Galerie zu finden — dasselbe Vokabular gilt für das Bricks-Element.

Tipp

Wenn das Element ohne weitere Konfiguration genau die Customizer-Vorgabe anzeigen soll, lassen Sie die Element-Optionen einfach auf ihren Standardwerten — diese stimmen mit der Customizer-Vorgabe überein.

Dynamic Tags für die Detailansicht

Neben den spezialisierten Elementen können Sie Dynamic Tags in beliebigen Bricks-Elementen verwenden:

Tag	Beschreibung
{immomakler_value:key}	Formatierter Wert eines Datenfeldes (Preis, Fläche, Zimmer usw.)
{immomakler_label:key}	Übersetztes Label eines Datenfeldes
{immomakler_description:key}	Beschreibungstext mit automatischer Formatierung
{immomakler_property_images}	Immobilienfotos als Bildquelle

Conditions für bedingte Anzeige

Mit Conditions vermeiden Sie leere Abschnitte auf der Detailseite:

Condition	Empfohlener Einsatz
Beschreibungstexte	Textabschnitte nur bei vorhandener Beschreibung anzeigen
PDF	PDF-Download-Button nur bei vorhandenem PDF anzeigen
Land	Länderspezifische Darstellung (z. B. Energieausweis nur für Deutschland)
Immobilienart	Andere Felder für Wohnungen als für Grundstücke
Vermarktungsart	Unterschiedliche Preisdarstellung für Kauf und Miete
Status	Besondere Darstellung für Referenzobjekte

Vorschau und Testen

Bricks bietet eine Live-Vorschau direkt im Editor. Um das Template mit echten Immobiliendaten zu testen:

1. Öffnen Sie das Template im Bricks-Editor.
2. Bricks zeigt automatisch die Daten eines Beitrags des zugewiesenen Post Types an. Über die Vorschau-Einstellungen können Sie einen bestimmten Beitrag auswählen.
3. Prüfen Sie das Ergebnis zusätzlich im Frontend, indem Sie eine Immobilie direkt aufrufen.

Tipp

Empfohlene Vorgehensweise: Beginnen Sie mit dem Komplett-Element Detailansicht (komplett), um sich mit den verfügbaren Daten vertraut zu machen. Erstellen Sie dann schrittweise ein individuelles Template, indem Sie einzelne Bereiche durch spezialisierte Elemente und Dynamic Tags ersetzen.

Das könnte Sie auch interessieren

• Bricks Builder Übersicht
• Archiv-Template erstellen
• Galerie: Slideshow konfigurieren
• Galerie: Statische Ansicht