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

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.

Eigenen Seitentitel gestalten

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.

Eigene Galerie verwenden

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

2. Seitenstruktur aufbauen

   Erstellen Sie die gewünschte Seitenstruktur mit Sections und Columns — z. B. ein Hauptbereich mit Galerie und Daten links, rechts eine Seitenleiste mit PDF-Exposé und Ansprechpartner. Das Kontaktformular braucht Platz für mehrspaltige Felder und die Einwilligungstexte; setzen Sie es in eine eigene Section in voller Breite unter die beiden Spalten.

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 mit dem Karten-Anbieter, den Sie im Customizer unter WP-ImmoMakler → Karten gewählt haben.

7. Kontaktformular einfügen

   Fügen Sie das Element Kontaktformular ein. Es zeigt das WP-ImmoMakler Kontaktformular mit automatischer Objekt-Zuordnung an. Geben Sie der Section des Formulars unter Attribute die ID kontakt, dann springt ein Button mit dem Link #kontakt direkt zum Formular.

   Für den Ansprechpartner gibt es die Elemente Kontaktperson-Foto und Kontaktdaten. Das Foto hat Einstellungen für Seitenverhältnis, Breite und Rahmen (mit Eckenradius, z. B. 50 % für ein rundes Foto); die Kontaktdaten wählen Sie wie bei den Objektdaten Feld für Feld aus. Hat die Kontaktperson kein Foto, gibt das Element nichts aus.

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:

   • Immobilieninhalt — eine Rubrik samt Überschrift nur anzeigen, wenn es Videos, einen virtuellen Rundgang, eine Karte usw. gibt
   • Immobiliendaten — eine Zeile nur anzeigen, wenn ein Datenfeld einen Wert hat
   • Beschreibungstexte — Textabschnitte nur anzeigen, wenn ein Beschreibungsfeld gefüllt ist
   • PDF — PDF-Download-Button nur anzeigen, wenn ein PDF vorhanden ist
   • Referenzobjekt — etwa den Anfrage-Button bei Referenzobjekten ausblenden
   • 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
├── Aside
│   ├── Kontaktperson-Foto → WP-ImmoMakler Element
│   ├── Kontaktdaten       → WP-ImmoMakler Element
│   └── Button             → Link: #kontakt
Section (ID: kontakt)
└── 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	Karte mit der Lage der Immobilie
Kontaktformular	Kontaktformular mit Objekt-Zuordnung
Kontaktdaten	Daten des Ansprechpartners als Definitionsliste, Felder einzeln wählbar
Kontaktperson-Foto	Foto des Ansprechpartners mit Seitenverhältnis, Breite und Rahmen
Videos	Eingebettete Videos

Ähnliche Immobilien

PLUS Ähnliche Immobilien – gleiche Objektart, gleiche Vermarktungsart, in der Nähe – zeigen Sie mit einer Bricks-Abfrageschleife und Ihrer eigenen Karte:

1. Legen Sie einen Block für die Karte an und gestalten Sie ihn wie die Karten Ihrer Immobilien-Übersicht, etwa mit Bildergalerie, dem Dynamic Tag {immomakler_value:ort}, einer Überschrift mit {post_title} und den Eckdaten-Boxen.
2. Aktivieren Sie am Block die Abfrageschleife und wählen Sie unter Abfrage den Typ Ähnliche Immobilien (WP-ImmoMakler).
3. Stellen Sie im Feld Anzahl ähnlicher Immobilien ein, wie viele erscheinen sollen (Standard: 3).

Die gerade angezeigte Immobilie ist nie dabei. Im Editor zeigt die Schleife die ähnlichen Immobilien der Vorschau-Immobilie, die Sie unter Inhalt befüllen gewählt haben. Welche Immobilien als ähnlich gelten, beschreibt Ähnliche Objekte.

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
Static-Layout	Vertikal (Vorschauleiste unten), Horizontal (Vorschau-Raster rechts), Ohne Vorschaubilder, Raster (alle Bilder als gleich große Kacheln, ohne Hauptbild), Mosaik (Blöcke aus je 4 Fotos mit großen und kleinen Kacheln im Wechsel, ohne Hauptbild)
Übergangseffekt	Schieben (Standard), Überblenden oder Aus- und Einblenden — siehe Bildergalerie: Slideshow
Ü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
Raster-Optionen	Nur im Static-Layout “Raster”: Spalten (maximal, 1–6), Mindestbreite je Kachel (darunter entfällt automatisch eine Spalte), Kachel-Seitenverhältnis, Bildanpassung (Zuschneiden für Fotos oder Vollständig anzeigen für Grundrisse) und Bildtitel als Bildunterschrift. Mit der Bildauswahl “Nur Grundrisse” ergibt das eine Grundriss-Box wie im WP-ImmoMakler Skin
Mosaik-Optionen	Nur im Static-Layout “Mosaik”: Block-Seitenverhältnis, Aufteilung der Reihenhöhe (1:1, 2:1 oder Goldener Schnitt) und Bildanzahl begrenzen (4, 8, 12 oder 16 Bilder)
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
Immobilieninhalt	Videos, Rundgänge, Grundrisse, Karte oder Energieausweis nur anzeigen, wenn vorhanden
Immobiliendaten	Einzelne Datenzeilen oder Kacheln nur mit Wert anzeigen
Referenzobjekt	Anfrage-Button oder Preise bei Referenzobjekten ausblenden
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. Wählen Sie in den Template-Einstellungen unter Inhalt befüllen als Inhaltstyp “Einzeln (Beitrag/Seite/CPT)” und dann eine Immobilie. Ohne diese Einstellung bleiben die WP-ImmoMakler-Elemente im Editor leer, weil keine Immobilie geladen ist.
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