Single-Template erstellen

Mit dem WPBakery Page Builder gestalten Sie die Detailansicht Ihrer Immobilien 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)

So kommt Ihr Layout auf die Immobilien-Detailseiten

WPBakery hat keinen Theme Builder: Sie gestalten damit einzelne Seiten, können ein Layout aber nicht als Vorlage für alle Immobilien hinterlegen. Diese Aufgabe übernimmt eine Vorlagenseite: Sie gestalten eine ganz normale WordPress-Seite mit WPBakery und melden sie bei WP-ImmoMakler als Detailansicht an. WP-ImmoMakler zeigt diese Seite dann auf jeder Immobilien-Detailseite an — mit den Daten der jeweils aufgerufenen Immobilie.

Die Option Plugin übernimmt Listen- und Detailansicht können Sie dabei aktiviert lassen: Eine Vorlagenseite hat Vorrang.

Hinweis

Bearbeiten Sie keine einzelne Immobilie mit WPBakery. Importierte Immobilien werden beim nächsten Import aus Ihrer Maklersoftware überschrieben, und jede Immobilie müssten Sie einzeln gestalten.

Impreza und Salient

Impreza bringt mit seinen Seitenvorlagen ein eigenes Template-System mit, das Sie alternativ nutzen können. Wie Sie bei Impreza und Salient vorgehen, lesen Sie unter Impreza und Salient.

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. Vorlagenseite anlegen

   Legen Sie unter Seiten → Erstellen eine neue Seite an, zum Beispiel mit dem Titel “Vorlage: Immobilien Detailansicht”, und öffnen Sie sie im WPBakery-Editor.

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. Als Detailansicht anmelden

   Wählen Sie im Bereich WP-ImmoMakler Vorlage unter Verwenden als den Eintrag Detailansicht (Immobilie) und veröffentlichen Sie die Seite.

5. Testen

   Öffnen Sie eine Immobilie im Frontend.

Eigenen Seitentitel gestalten

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.

Eigene Galerie verwenden

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

   Legen Sie wie in Option A eine Vorlagenseite an und 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 Immobilie: Umgebungskarte ein. Es zeigt den Standort der Immobilie mit dem Karten-Anbieter, den Sie im Customizer unter WP-ImmoMakler → Karten gewählt haben. Die Kartenhöhe ist konfigurierbar (z. B. 350px, 50vh, 100%).

6. Kontaktbereich gestalten

   Element	Beschreibung
   Immobilien 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 Immobilie: Videos ein, um alle zur Immobilie hinterlegten Videos anzuzeigen. Virtuelle Rundgänge gibt dieses Element nicht aus — sie erscheinen nur im Komplett-Element Immobilien Detailansicht.

8. Als Detailansicht anmelden und testen

   Wählen Sie im Bereich WP-ImmoMakler Vorlage unter Verwenden als den Eintrag Detailansicht (Immobilie), veröffentlichen Sie die Seite 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
Eckdaten-Boxen	Ausgewählte Immobiliendaten als Boxen mit Beschriftung und Wert
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
Immobilie: Umgebungskarte	Karte mit der Lage der Immobilie
Immobilie: Videos	Eingebettete Videos
Immobilien 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
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 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 die Vorlagenseite mit echten Immobiliendaten zu testen:

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

Die Adresse der Vorlagenseite selbst eignet sich dafür nicht: Dort liegt keine Immobilie im Kontext, und Besucher werden zur Immobilien-Listenansicht weitergeleitet.

Mit Bedingungen auf der Vorlagenseite verwenden Sie verschiedene Layouts für verschiedene Immobilien — etwa eines für Häuser und eines für Wohnungen. Siehe Verschiedene Vorlagen für verschiedene Immobilien.

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

• Vorlagenseiten
• Archiv-Template erstellen
• Impreza und Salient
• Galerie: Slideshow konfigurieren