Single-Template erstellen

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

Voraussetzungen

• WPBakery Page Builder
• 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 WPBakery steuern möchten.

Option A: Immobilien Detailansicht (Schnellstart)

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

1. Seite oder Template erstellen

   Erstellen Sie ein WPBakery-Template für den Beitragstyp Immobilie oder bearbeiten Sie eine bestehende Immobilie direkt.

2. Element einfügen

   Klicken Sie auf Element hinzufügen und suchen Sie nach Immobilien Detailansicht. Fügen Sie das Element auf der Seite ein.

3. Optionen konfigurieren

   Optional: Deaktivieren Sie die Anzeige des Seitentitels, wenn Ihr Theme diesen bereits ausgibt. Über die Option Bildergalerie anzeigen lässt sich zudem die integrierte Galerie ausblenden.

4. Speichern und testen

   Speichern Sie und öffnen Sie eine Immobilie im Frontend.

Tipp

Das Element Immobilien Detailansicht bietet die Option Überschrift anzeigen (Standard: an). Deaktivieren Sie sie, 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 Immobilien Detailansicht bietet die Option Bildergalerie anzeigen (Standard: an). Deaktivieren Sie sie, um die in das HTML-Template integrierte Bildergalerie auszublenden — etwa wenn Sie oberhalb des Titels eine eigene Galerie (z. B. das Element Immobilie: Fotogalerie) platzieren möchten.

Option B: Individuelles Template gestalten

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

1. Seitenlayout einrichten

   Erstellen Sie im WPBakery-Editor die gewünschte Seitenstruktur mit Zeilen und Spalten — z. B. ein Hauptbereich mit Galerie und Daten links, Kontaktdaten rechts.

2. Galerie einfügen

   Fügen Sie das Element Immobilie: Fotogalerie ein. Es zeigt die Immobilienfotos mit derselben Galerie-Engine wie die Customizer-Sektion Bildergalerie — alle Optionen sind pro Element-Instanz konfigurierbar. Siehe Galerie konfigurieren weiter unten.

3. Immobiliendaten hinzufügen

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

   Element	Beschreibung
   Alle Immobiliendaten	Datentabelle als Definitionsliste — einzelne Felder lassen sich über Checkboxen ein-/ausblenden. Spaltenbreite der Labels, Rahmen und Abstände sind konfigurierbar.
   Energieausweis	Energieausweisdaten mit länderspezifischer Anpassung (DE, AT, ES, IT). Dieselben Styling-Optionen wie die Datentabelle.

4. Beschreibungstexte einfügen

   Fügen Sie das Element Immobilien-Beschreibung ein. Es bietet umfangreiche Optionen:

   • Auswahl des Textfeldes (Objektbeschreibung, Ausstattung, Sonstige Angaben, Lage, Dreizeiler)
   • Automatische HTML-Bereinigung und typografische Korrekturen
   • URL- und Telefonnummern-Erkennung
   • Aufzählungszeichen-Konvertierung in HTML-Listen
   • Optionale Listeneinrückung

   Fügen Sie für jeden Beschreibungstext ein eigenes Element ein — so können Sie die Texte frei auf der Seite verteilen.

5. Karte hinzufügen

   Fügen Sie das Element Umgebungskarte ein. Es zeigt den Standort der Immobilie auf Google Maps an. Die Kartenhöhe ist konfigurierbar (z. B. 350px, 50vh, 100%).

6. Kontaktbereich gestalten

   Element	Beschreibung
   Kontaktformular	Anfrage-Formular mit automatischer Objekt-Zuordnung
   Kontaktdaten	Name, Telefon, E-Mail der Kontaktperson als Definitionsliste
   Kontaktperson-Foto	Foto der Kontaktperson mit Seitenverhältnis (3:2, 4:3, 1:1 usw.), Rahmen, Abständen und Border-Radius

7. Videos einfügen

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

8. Speichern und testen

   Speichern Sie und öffnen Sie eine Immobilie im Frontend.

Verfügbare Single-Elemente

Element	Beschreibung
Immobilien Detailansicht	Komplette Detailansicht mit WP-ImmoMakler HTML-Template
Alle Immobiliendaten	Datentabelle als Definitionsliste mit Styling-Optionen
Immobilien-Beschreibung	Freitext-Beschreibungsfelder mit Formatierung
Energieausweis	Energieausweisdaten mit Länder-Support
Immobilie: Fotogalerie	Vollständige Bildergalerie mit Slideshow-/Statisch-Modus, alle Customizer-Optionen pro Instanz
Umgebungskarte	Google-Maps-Lagekarte
Videos	Eingebettete Videos
Kontaktformular	Kontaktformular mit Objekt-Zuordnung
Kontaktdaten	Kontaktperson-Daten als Definitionsliste
Kontaktperson-Foto	Foto mit Seitenverhältnis und Styling

Galerie konfigurieren

Das Immobilie: Fotogalerie-Element bietet pro 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 WPBakery-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.

Hinweis

Die abhängige Anzeige (z. B. Statisch-Optionen verschwinden im Slideshow-Modus) folgt in WPBakery dem dependency-System, das nur einen direkten Eltern-Parameter prüfen kann. In manchen Konstellationen sind dadurch Felder sichtbar, die im jeweils aktiven Modus keinen Effekt haben — das Rendering filtert solche Werte beim Anzeigen heraus.

Styling-Optionen

Datentabellen (Immobiliendaten, Energieausweis, Kontaktdaten)

Alle Definitionslisten-Elemente teilen dieselben Styling-Optionen:

• Spaltenbreite links — Breite der Label-Spalte
• Rahmen — Trennlinien zwischen Zeilen
• Abstände — Innenabstand der Zellen
• CSS-Editor — Eigene CSS-Regeln direkt am Element

Kontaktperson-Foto

Das Foto-Element bietet erweiterte Gestaltungsmöglichkeiten:

• Seitenverhältnis — Original, 3:2, 4:3, 1:1, 3:4, 2:3
• Abstände — Margin und Padding (alle vier Seiten unabhängig)
• Border-Radius — Alle vier Ecken unabhängig konfigurierbar
• Rahmen — Farbe, Breite und Stil (solid, dashed, dotted, double)

Vorschau und Testen

WPBakery zeigt im Backend-Editor eine vereinfachte Vorschau der Elemente. Um das Template mit echten Immobiliendaten zu testen:

1. Speichern Sie die Seite oder das Template.
2. Öffnen Sie eine Immobilie im Frontend.
3. Prüfen Sie, ob alle Elemente korrekt dargestellt werden und die Daten der Immobilie angezeigt werden.

Tipp

Empfohlene Vorgehensweise: Beginnen Sie mit dem Komplett-Element Immobilien Detailansicht, um sich mit den verfügbaren Daten vertraut zu machen. Erstellen Sie dann schrittweise ein individuelles Layout, indem Sie einzelne Bereiche durch spezialisierte Elemente ersetzen.

Das könnte Sie auch interessieren

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