Divi 4: Single-Template erstellen

Mit dem Divi Theme Builder gestalten Sie die Detailansicht jeder Immobilie individuell. WP-ImmoMakler stellt dafür spezialisierte Divi-Module bereit, die alle Aspekte einer Immobilie abdecken — von der Bildergalerie über Datenblätter bis zu den Kontaktdaten.

Hinweis

Diese Anleitung gilt für Divi 4. Für Divi 5 lesen Sie Divi 5: Archiv- und Single-Template erstellen.

Voraussetzungen

• Divi Theme oder Divi Builder Plugin (Version 4.x)
• WP-ImmoMakler (beliebige Edition)

Tipp

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 dem Divi Theme Builder steuern möchten.

Option A: 1-Klick HTML-Version (Schnellstart)

Das 1-Klick-Modul zeigt die bewährte Detailansicht von WP-ImmoMakler an — inklusive Galerie, Daten, Karte, Kontaktformular und allem, was zu einer vollständigen Detailseite gehört.

1. Theme Builder öffnen

   Navigieren Sie im Backend Ihrer Website (wp-admin) unter Divi → Theme Builder.

   

2. Neues Template erstellen

   Klicken Sie auf Neue Vorlage hinzufügen und wählen Sie Neue Vorlage erstellen. Scrollen Sie im Panel Vorlageneinstellungen auf dem Tab Verwenden Sie Ein bis zum Abschnitt Immobilien und aktivieren Sie Alle Immobilien.

   

   Klicken Sie auf Vorlage erstellen.

   

3. Körper-Layout hinzufügen

   Klicken Sie im neuen Template auf Benutzerdefinierten Körper hinzufügen und wählen Sie Benutzerdefinierten Körper erstellen.

   

4. Zeile hinzufügen und Modul einfügen

   Der Visual Builder öffnet sich. Klicken Sie auf +, wählen Sie das einspaltrige Layout und suchen Sie anschließend nach dem Modul WP-ImmoMakler 1-Klick: Detailansicht.

   

5. Speichern und testen

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

Tipp

Das Modul 1-Klick: Detailansicht bietet die Option Überschrift anzeigen (Standard: an). Schalten Sie sie aus, um die vom HTML-Template ausgegebene Überschrift (h1) auszublenden — etwa wenn Sie den Seitentitel selbst gestalten oder Ihr Theme ihn bereits ausgibt.

Tipp

Das Modul 1-Klick: Detailansicht bietet die Option Bildergalerie anzeigen (Standard: an). Schalten Sie sie aus, um die in das HTML-Template integrierte Bildergalerie auszublenden — etwa wenn Sie oberhalb des Titels eine eigene Galerie (z. B. das Modul WP-ImmoMakler Bildergalerie) platzieren möchten.

Option B: Individuelles Template gestalten

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

1. Theme Builder öffnen

   Navigieren Sie im Backend Ihrer Website (wp-admin) unter Divi → Theme Builder.

2. Neues Template erstellen

   Klicken Sie auf Neue Vorlage hinzufügen und aktivieren Sie im Panel Vorlageneinstellungen unter Immobilien die Checkbox Alle Immobilien.

3. Körper-Layout hinzufügen

   Klicken Sie auf Benutzerdefinierten Körper hinzufügen und wählen Sie Benutzerdefinierten Körper erstellen. Erstellen Sie die gewünschte Seitenstruktur mit Zeilen und Spalten — z. B. ein Hauptbereich mit Galerie und Daten links, Kontaktdaten rechts.

4. Galerie einfügen

   Fügen Sie eines der Galerie-Module hinzu:

   Modul	Beschreibung
   WP-ImmoMakler Bildergalerie	Vollständige Bildergalerie mit Slideshow- und Statisch-Modus, Lightbox und allen Customizer-Optionen pro Modul-Instanz konfigurierbar
   WP-ImmoMakler Grid-Galerie	Schlanke Rasteransicht ohne Slideshow, mit Lightbox

   Das Bildergalerie-Modul stellt dieselben Optionen bereit, die Sie aus dem Customizer kennen — und zwar pro Modul-Instanz. Das ist sinnvoll, wenn ein Template eine andere Galerie-Form benötigt als die Customizer-Vorgabe (z. B. ein Cinemascope-Hero-Bild im Premium-Template, während das Standard-Template die übliche Slideshow zeigt), oder wenn mehrere Galerien mit unterschiedlichen Einstellungen auf einer Seite stehen sollen (Fotos oben als Slideshow, Grundrisse weiter unten als statisches Raster).

   Siehe Galerie konfigurieren weiter unten für die Detailbeschreibung der Optionen.

5. Immobiliendaten hinzufügen

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

   Modul	Beschreibung
   Objektdaten	Datentabelle als Definitionsliste mit konfigurierbaren Feldern, Spaltenbreite, Zeilentrennung und alternierenden Hintergrundfarben
   Daten-Kästen	Eckdaten als responsives CSS-Grid mit anpassbarer Boxbreite und Abstand
   Energieausweis	Energieausweisdaten mit regionalem Support (Deutschland, Spanien, Italien) und Energiediagramm

6. Beschreibungstexte einfügen

   Verwenden Sie das Modul WP-ImmoMakler Beschreibungstext. Es bietet umfangreiche Optionen:

   • Auswahl des Textfeldes (Dreizeiler, Objektbeschreibung, Ausstattung, Lage, Sonstige Angaben)
   • Automatische HTML-Bereinigung und typografische Korrekturen
   • URL- und Telefonnummern-Erkennung
   • Aufzählungszeichen-Konvertierung in Listen
   • Responsives Spaltenlayout (Desktop, Tablet, Mobil)
   • „Mehr anzeigen/Weniger”-Umschalter mit konfigurierbarer Höhe
   • Eigene Überschrift mit wählbarem HTML-Tag

7. Karte hinzufügen

   Fügen Sie das Modul WP-ImmoMakler Lagekarte hinzu. Es zeigt den Standort der Immobilie auf Google Maps an. Die Kartenhöhe ist konfigurierbar.

8. Kontaktdaten einfügen

   Das Modul WP-ImmoMakler Kontaktdaten zeigt die Angaben zur Kontaktperson an — mit Foto, Name, Telefon, E-Mail usw. Sie können einzelne Labels ein-/ausblenden und den Abstand zwischen Foto und Daten anpassen.

9. Videos und virtuelle Touren

   Modul	Beschreibung
   WP-ImmoMakler Videos	Eingebettete YouTube-/Vimeo-Videos
   WP-ImmoMakler Virtueller Rundgang PLUS	360-Grad-Touren mit konfigurierbarem Seitenverhältnis

10. Speichern und testen

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

Verfügbare Single-Module

Modul	Beschreibung
1-Klick: Detailansicht	Komplette Detailansicht mit WP-ImmoMakler HTML-Template
Kontaktdaten	Kontaktperson mit Foto und Daten
Beschreibungstext	Freitext-Beschreibungsfelder mit Formatierung
Objektdaten	Datentabelle als Definitionsliste
Daten-Kästen	Eckdaten als responsives Grid
Energieausweis	Energieausweisdaten mit Diagramm
Bildergalerie	Vollständige Bildergalerie mit Slideshow-/Statisch-Modus, alle Customizer-Optionen pro Instanz
Grid-Galerie	Schlanke Rasteransicht ohne Slideshow, mit Lightbox
Lagekarte	Google-Maps-Karte
Videos	Eingebettete Videos
Virtueller Rundgang PLUS	360-Grad-Touren

Galerie konfigurieren

Das WP-ImmoMakler Bildergalerie-Modul bietet pro Modul-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 — dieselbe Vokabular gilt für das Divi-Modul.

Tipp

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

Dynamic Content nutzen

Neben den spezialisierten Modulen können Sie Divis Dynamic Content in beliebigen Standard-Modulen verwenden. WP-ImmoMakler registriert Felder in der Gruppe WP-ImmoMakler:

Feld	Beschreibung
Objekttitel	Immobilientitel aus der Maklersoftware
Subtitle	PLZ, Ort, Objektart
Preis	Formatierter Preis
Dreizeiler	Kurzbeschreibung
Objektbeschreibung	Ausführliche Beschreibung
Ausstattung/Beschreibung	Ausstattungsbeschreibung
Lage	Lagebeschreibung
Sonstige Angaben	Zusätzliche Informationen

Jedes Feld unterstützt optionale Icon-Darstellung, individuellen Vor-/Nachtext und (bei Beschreibungsfeldern) automatische Formatierung.

Vorschau und Testen

Da Divi im Theme Builder keinen Live-Vorschau-Modus mit echten Immobiliendaten bietet, testen Sie das Template am besten direkt im Frontend:

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

Tipp

Empfohlene Vorgehensweise: Beginnen Sie mit der 1-Klick HTML-Version, um sich mit den verfügbaren Daten vertraut zu machen. Erstellen Sie dann schrittweise ein individuelles Template, indem Sie einzelne Bereiche durch spezialisierte Module ersetzen.

Das könnte Sie auch interessieren

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