Divi 5: Einzelobjekt-Module

WP-ImmoMakler bringt native Divi-5-Module mit, die speziell für Immobilien-Detailseiten (Single-Templates) und Archivseiten entworfen sind. Sie bauen das Template Baustein für Baustein auf und können Optik und Reihenfolge der Inhalte frei bestimmen.

Hinweis

Diese Module setzen Divi 5 voraus. In Divi 4 sind sie nicht sichtbar. Für Divi 4 stehen die klassischen Divi-4-Module zur Verfügung.

Voraussetzungen

• Divi 5 (Divi-5-Engine aktiviert)
• WP-ImmoMakler (beliebige Edition)

Schnellstart: Template mit Einzelobjekt-Modulen erstellen

Navigieren Sie im Backend Ihrer Website (wp-admin) unter Divi → Theme Builder und legen Sie ein Template für Alle „Immobilie” Beiträge an (oder öffnen Sie ein bestehendes). Im Visual Builder finden Sie alle unten aufgeführten Module unter dem Suchbegriff WP-ImmoMakler.

Verfügbare Einzelobjekt-Module

Bildergalerie

Modul	Beschreibung
WP-ImmoMakler Bildergalerie	Vollständige Bildergalerie mit Slideshow, Lightbox und allen Customizer-Optionen pro Instanz
WP-ImmoMakler Fotogalerie Raster	Rasteransicht ohne Slideshow. Das Modul wird nicht mehr weiterentwickelt

Hinweis

Für neue Vorlagen verwenden Sie statt Fotogalerie Raster das Modul Bildergalerie mit der Präsentation Statisch und dem Layout Mosaik. Es bietet dieselbe Darstellung und alle weiteren Galerie-Einstellungen. Bestehende Vorlagen mit dem Raster-Modul funktionieren unverändert weiter.

Beschreibungstexte

Das Modul WP-ImmoMakler Beschreibungstext zeigt eines der Freitext-Felder an:

Feld	Beschreibung
Zusammenfassung	Der Textauszug der Immobilie, etwa als Einleitung unter dem Titel
Kurzbeschreibung (Dreizeiler)	Kurzer Einleitungstext
Objektbeschreibung (Standard)	Ausführliche Beschreibung
Ausstattung	Ausstattungsbeschreibung
Lage	Lagebeschreibung
Sonstige Angaben	Weitere Hinweise

Jede Instanz des Moduls zeigt genau ein Textfeld. Um mehrere Felder darzustellen, fügen Sie das Modul mehrfach ein und wählen jeweils ein anderes Feld.

Weitere Optionen des Moduls:

Option	Beschreibung
Überschrift	Freitext-Überschrift (Standard: Name des gewählten Feldes)
Überschriften-Tag	h1–h4

Der Text wird automatisch bereinigt: HTML wird auf erlaubte Tags beschränkt, Aufzählungszeichen werden in Listen umgewandelt, Telefonnummern werden verlinkt und URLs werden anklickbar gemacht.

Immobiliendaten

Modul	Beschreibung
WP-ImmoMakler Immobiliendaten	Alle Datenfelder (Allgemein + Preise) als Definitionsliste
WP-ImmoMakler Flächen	Nur die Flächen-Felder als Definitionsliste
WP-ImmoMakler Preise	Nur die Preis-Felder als Definitionsliste
WP-ImmoMakler Eckdaten-Boxen	Ausgewählte Felder als responsives Box-Grid mit SVG-Icons
WP-ImmoMakler Eckdaten-Icon-Liste	Alle sichtbaren Felder als horizontale Icon-Liste mit SVG-Icons

Die drei Definitionslisten-Module (Immobiliendaten, Flächen, Preise) zeigen nur Felder an, für die in der Maklersoftware ein Wert hinterlegt ist.

Die Eckdaten-Boxen und die Eckdaten-Icon-Liste eignen sich für kompakte Zusammenfassungen der wichtigsten Kenndaten direkt unterhalb der Galerie.

In den Eckdaten-Boxen wählen Sie unter Einträge aus allen Immobiliendaten aus, welche Felder als Box erscheinen. Voreingestellt sind die wichtigsten Kenndaten wie Objektnummer, Preise, Flächen, Zimmer und Stellplätze; alle weiteren Felder schalten Sie bei Bedarf dazu. Die Boxen erscheinen in der Reihenfolge der Liste.

Das Modul Eckdaten-Boxen hat folgende zusätzliche Optionen:

Option	Beschreibung
Abkürzungen verwenden	Verkürzt ausgewählte Bezeichnungen: Wohnfläche → „Wlf. ca.”, Grundstücksfläche → „Grd.”, Kaufpreis-Bezeichnung wird ausgeblendet, Wohnungstyp-Wert → „Whg.”
Trenner	Vertikale Trennlinie zwischen den Boxen, mit einstellbarer Breite, Farbe und Linientyp
Icons anzeigen	SVG-Icon vor jedem Eckdaten-Feld

Energieausweis

Das Modul WP-ImmoMakler Energieausweis Werte zeigt die Energieausweis-Daten als Definitionsliste an. Es unterstützt die regionalen Formate:

• Deutschland (Heizenergiebedarf, Effizienzklasse usw.)
• Österreich (HWB und fGEE)
• Spanien (Certificado Energético)
• Italien (APE)

Wie bei den anderen Datenlisten blenden Sie im Inhalt-Tab einzelne Felder aus. Mit der Option Diagramm anzeigen PLUS erscheint unter den Werten zusätzlich die grafische Energieausweis-Skala, sofern die Energieausweis-Funktion aktiviert ist. Module, die der Divi-5-Migrator aus dem Divi-4-Modul WP-ImmoMakler Energieausweis umgewandelt hat, zeigen die Skala auf diese Weise wie bisher.

Das Modul WP-ImmoMakler Energieausweis Diagramm PLUS zeigt ausschließlich die grafische Energieausweis-Skala ohne die Datenliste, damit Sie Skala und Werte getrennt platzieren können.

Kontakt

Modul	Beschreibung
WP-ImmoMakler Kontaktperson: Foto	Profilbild der Kontaktperson
WP-ImmoMakler Kontaktperson: Daten	Kontaktdaten (Name, Telefon, E-Mail, Adresse …) als Definitionsliste
WP-ImmoMakler Kontaktformular	Kontaktformular für Anfragen zur Immobilie
WP-ImmoMakler Downloads & Links	Datei-Downloads und externe Links

Das Modul Kontaktperson: Foto zeigt das Profilbild an, das bei der Kontaktperson in WP-ImmoMakler hinterlegt ist. Falls kein Bild vorhanden ist, gibt das Modul keinen Inhalt aus. Im Design-Tab lassen sich Seitenverhältnis, Innen- und Außenabstand, Eckenradius sowie Rahmen (Breite, Farbe, Stil) einstellen.

Das Modul WP-ImmoMakler PDF Exposé Button PLUS fügt einen Link-Button ein, der direkt das PDF-Exposé der Immobilie öffnet. Im Content-Tab lässt sich der Linktext frei eingeben und das Öffnen in einem neuen Tab ein- oder ausschalten. Im Design-Tab sind Schrift (Farbe, Größe, Gewicht, Familie) und Breite des Buttons einstellbar.

Hinweis

Das PDF-Exposé muss aktiviert sein (im Backend Ihrer Website (wp-admin) unter WP-ImmoMakler → Einstellungen → PDF-Druckansicht), damit der Button auf der Live-Seite funktioniert. Im Visual Builder zeigt das Modul einen Platzhalter-Link.

Ausstattung und Merkmale

Das Modul WP-ImmoMakler Ausstattung/Merkmale zeigt die Merkmale der Immobilie als Liste an.

Option	Beschreibung
Layout	Standard (untereinander) oder Inline (nebeneinander)
Icon anzeigen	Ein/Aus — zeigt ein Pfeil-Icon vor jedem Eintrag
Icon-Farbe	Farbe des Icons (nur wenn Icon anzeigen = An)
Icon-Größe	Größe des Icons (nur wenn Icon anzeigen = An)
Textfarbe	Farbe des Eintrags-Textes
Abstand zwischen Einträgen	Vertikaler Abstand

Karte und Videos

Modul	Beschreibung
WP-ImmoMakler Lagekarte	Standortkarte mit dem im Customizer gewählten Karten-Anbieter; Höhe und Karten-Einstellungen pro Modul einstellbar
WP-ImmoMakler Videos	Eingebettete YouTube-/Vimeo-Videos. Seitenverhältnis der Einbettung im Design-Tab einstellbar. Mit Spalte ausblenden, wenn keine Videos vorhanden verschwindet bei Immobilien ohne Videos die ganze Spalte des Moduls
WP-ImmoMakler Virtueller Rundgang PLUS	Virtuelle Rundgänge der Immobilie. Ist in den Einstellungen die Anzeige als Vorschaubild mit Lightbox und Einwilligungsabfrage aktiv, gilt sie auch hier. Seitenverhältnis und Eckenradius sind im Design-Tab einstellbar

Archiv-Module (für Listenansicht-Vorlagen)

Diese Module sind für Archiv-Templates gedacht (z. B. Immobilien-Übersichtsseite):

Modul	Beschreibung
WP-ImmoMakler 1-Klick: Listenansicht	Vollständige Immobilien-Liste inkl. Suchformular, Paginierung und alle Listenoptionen. Mindesthöhe im Design-Tab einstellbar
WP-ImmoMakler Immobilien Suchformular PLUS	Nur das Suchformular — ideal, wenn Formular und Listenansicht getrennt positioniert werden sollen. Spaltenanzahl einstellbar
WP-ImmoMakler Immobilien Ergebnisliste	Nur die Ergebnisliste ohne Suchformular, Karte und Überschrift — für Vorlagen, in denen Sie das Suchformular als eigenes Modul platzieren
WP-ImmoMakler Karte Immobilien-Liste PLUS	Karte mit allen Immobilien der aktuellen Suchanfrage als Cluster-Ansicht
WP-ImmoMakler Ortsangabe	Postleitzahl und Ort der Immobilie mit Karten-Icon, etwa für die Karten eines Divi Loops. Mit Objektart anzeigen folgt die Objektart, in der Detailansicht auch die Vermarktungsart
WP-ImmoMakler Seitennavigation	Seitenzahlen und Anzahl der Ergebnisse unter einem Divi Loop der Immobilien-Übersicht (siehe Module in einem Divi Loop)

Ähnliche Immobilien

PLUS Für ähnliche Immobilien gibt es kein eigenes Modul: Sie bauen einen Divi Loop mit Ihrer eigenen Karte und schalten in den Loop-Einstellungen Nur ähnliche Immobilien ein (siehe Ähnliche Immobilien einfügen). Welche Immobilien erscheinen, beschreibt Ähnliche Objekte.

Widerruf

Diese beiden Module sind nicht an eine Immobilie gebunden. Sie können sie auf jeder Seite verwenden, etwa im Footer oder auf einer eigenen Widerrufs-Seite.

Modul	Beschreibung
WP-ImmoMakler Widerrufsbutton	Button zum Widerruf eines Vertrags. Er verlinkt auf Ihre Widerrufs-Seite, öffnet das Formular in einem Overlay oder dient als Auslöser für das Popup Ihres Page Builders. Beschriftung, Widerrufs-Seite, eigener Link und eine zusätzliche CSS-Klasse sind einstellbar, die Schrift des Buttons im Design-Tab
WP-ImmoMakler Widerrufsformular	Formular zum Widerruf eines Vertrags mit automatischer Eingangsbestätigung. Optional belegen Sie die Objektbezeichnung über eine Immobilien-ID vor

Layouts mit den Divi-4-Modulen Widerrufsbutton und Widerrufsformular wandelt der Divi-5-Migrator automatisch in die nativen Module um.

Module in einem Divi Loop

Die Module für die Detailansicht funktionieren auch innerhalb eines Divi Loops. Jeder Eintrag des Loops zeigt dann die Daten seiner eigenen Immobilie — so bauen Sie etwa Immobilien-Karten aus Bildergalerie, Ortsangabe und Eckdaten-Boxen selbst zusammen.

Liegt der Loop in einer Vorlage für die Immobilien-Übersicht, berücksichtigt er die Auswahl im Suchformular und die gewählte Sortierung.

Blättern und Nachladen

In der Immobilien-Übersicht blättert der Loop mit der Seite: Unter /immobilien/page/2/ zeigt er die zweite Seite der Ergebnisse. Wie viele Immobilien eine Seite zeigt, legen Sie im Backend Ihrer Website (wp-admin) unter Darstellung → Customizer → WP-ImmoMakler → Immobilien Listenansicht mit Anzahl Immobilien pro Seite fest; diese Zahl gilt dann statt Beiträge pro Seite des Loops. Die Seitenzahlen fügen Sie mit dem Modul WP-ImmoMakler Seitennavigation unter dem Loop ein.

PLUS Geben Sie der Sektion oder Zeile, die den Loop enthält, unter Erweitert → Attribute die CSS-ID properties. Dann lädt die Immobilien-Übersicht die Ergebnisse ohne Neuladen der Seite: Eine Änderung im Suchformular aktualisiert die Liste sofort, und je nach Einstellung blättern die Seitenzahlen die Liste um oder weitere Immobilien werden beim Scrollen bzw. per Button nachgeladen.

Einträge verlinken

Damit ein Klick auf den Eintrag zur Immobilie führt:

• Tragen Sie als Titel des Überschrift-Moduls einen Link ein, dessen Adresse und Text dynamische Inhalte sind: als Adresse Link zur Immobilie aus der Gruppe WP-ImmoMakler, als Text Schleifen-Beitragstitel. So ist der Titel ein echter Link, den auch Tastatur und Screenreader erreichen. Im Visual Builder zeigt Divi einen so verlinkten Titel als Platzhalter $variable(…)$ an; auf der Website erscheint in jedem Eintrag der Titel der Immobilie mit ihrem Link.
• Soll die ganze Karte anklickbar sein, geben Sie dem Überschrift-Modul unter Erweitert → Attribute die CSS-Klasse immomakler-card-link. Der Link des Titels reicht dann über die ganze Spalte; die Bildergalerie und andere Links und Buttons in der Karte bleiben bedienbar.
• Stellen Sie in der Bildergalerie die Option Klick auf ein Foto auf Zur Immobilie. Dann öffnet ein Klick auf ein Foto die Immobilie statt der Großansicht.

Achtung

Die Option Link → Link-URL für das Modul eignet sich für Einträge eines Loops nicht: Divi verknüpft diese Links beim Laden der Seite per Script. Immobilien, die die Übersicht nachlädt, bleiben dann ohne Link.

Tipp

Für den Titel der Immobilie im Loop verwenden Sie ein Überschrift-Modul mit dem dynamischen Inhalt Schleifen-Beitragstitel. Das Divi-Modul Posttitel zeigt auf einer Übersichtsseite den Titel der Übersicht, nicht den des Loop-Eintrags.

Rubriken nur bei vorhandenen Inhalten zeigen

Nicht jede Immobilie hat Videos, einen virtuellen Rundgang oder eine Ausstattungsbeschreibung. Damit dann keine Überschrift über einer leeren Rubrik steht, blenden Sie Sektionen, Zeilen, Spalten und Module mit der Bedingung Immobilieninhalt nur bei Bedarf ein:

1. Öffnen Sie die Einstellungen des Elements, das die Rubrik samt Überschrift umfasst — meist die Zeile.
2. Wählen Sie unter Erweitert → Bedingungen → Bedingung hinzufügen aus der Gruppe WP-ImmoMakler den Eintrag Immobilieninhalt.
3. Wählen Sie unter Inhalt der Immobilie den Inhalt und unter Nur anzeigen, wenn die Einstellung vorhanden.

Zur Auswahl stehen:

Inhalt der Immobilie	vorhanden, wenn …
Bilder, Grundrisse	mindestens ein Foto bzw. ein Grundriss (Bild oder PDF) hinterlegt ist
Videos, Virtuelle Rundgänge PLUS	mindestens ein Video bzw. ein Rundgang hinterlegt ist
Dokumente zum Download, Links	mindestens ein Dokument bzw. ein Link hinterlegt ist
PDF-Dokument	mindestens eines der Dokumente eine PDF-Datei ist
Zusammenfassung, Kurzbeschreibung, Objektbeschreibung, Ausstattungsbeschreibung, Lagebeschreibung, Sonstige Angaben	der Text nicht leer ist
Ausstattungsmerkmale	mindestens ein Ausstattungsmerkmal gesetzt ist
Energieausweis	Energieausweisdaten vorliegen
Karte	ein Kartendienst eingerichtet und ein Ort angegeben ist
Ansprechpartner	Kontaktdaten zur Immobilie vorliegen
Foto des Ansprechpartners	der Ansprechpartner ein Foto hat

Mit nicht vorhanden zeigen Sie umgekehrt einen Ersatz an, etwa einen Hinweis, wenn kein Grundriss vorliegt. Mehrere Bedingungen lassen sich kombinieren: Die Rubrik Lage zeigen Sie zum Beispiel, wenn Lagebeschreibung oder Karte vorhanden ist.

Außerhalb einer Immobilie — auf einer normalen Seite oder in der Listenansicht außerhalb eines Loops — gilt jeder Inhalt als nicht vorhanden.

In derselben Gruppe WP-ImmoMakler finden Sie drei weitere Bedingungen:

Bedingung	Einstellungen	Beispiel
Immobiliendaten	ein Datenfeld der Immobilie oder der Kontaktperson; einen Wert hat / keinen Wert hat	Einen Hinweis zu den Nebenkosten nur zeigen, wenn Kaltmiete einen Wert hat
Immobilien-Kategorie	eine Kategorie (Objektart, Vermarktungsart, Nutzungsart, Status, Ort, Ausstattung, Land), ist / ist nicht und ein Wert; [angegeben] trifft auf jeden Wert zu	Den Mietspiegel-Hinweis nur bei der Vermarktungsart Miete zeigen
Referenzobjekt	ein Referenzobjekt ist / kein Referenzobjekt ist	Den Anfrage-Button bei Referenzobjekten ausblenden

Dieselben Bedingungen mit denselben Prüfungen bietet WP-ImmoMakler auch in Elementor Pro und Bricks.

Vorschau im Visual Builder

Alle Module zeigen im Divi Visual Builder eine Vorschau mit einer Beispiel-Immobilie an. Die angezeigte Beispiel-Immobilie ist jene, die WP-ImmoMakler als Vorschau-Datensatz verwendet — dieselbe, die auch in anderen Vorschauen (Elementor, Gutenberg) zum Einsatz kommt.

Tipp

Falls die Vorschau leer oder unvollständig erscheint, sind für die Beispiel-Immobilie möglicherweise keine Werte für die betreffenden Felder hinterlegt (z. B. kein Energieausweis). Im Frontend werden die tatsächlichen Daten der aufgerufenen Immobilie angezeigt.

Empfohlener Template-Aufbau

Ein typisches Einzelobjekt-Template könnte so aussehen:

1. Fotogalerie (Bildergalerie oder Fotogalerie Raster) — volle Breite
2. Eckdaten-Icon-Liste — schmale Zeile mit den wichtigsten Kenndaten
3. Zweispaltig: links Beschreibungstext, rechts Lagekarte
4. Immobiliendaten oder Flächen + Preise nebeneinander
5. Energieausweis (sofern Daten vorhanden)
6. Zweispaltig: links Kontaktformular, rechts Kontaktperson

Tipp

Für Suchmaschinen und Screenreader lohnt eine saubere Gliederung: Der Titel der Immobilie ist die einzige Überschrift der Ebene H1, die Rubriken darunter (Objektbeschreibung, Grunddaten, Lage …) sind H2. Die Ebene stellen Sie im Überschrift-Modul unter Design → Überschriften → Überschriftenebene ein, die Schriftgröße davon unabhängig. Unter Erweitert → HTML → Elementtyp legen Sie außerdem das HTML-Element fest: Zeilen mit einer Rubrik werden zu section, die Spalte mit den Kontaktdaten zu aside und im Loop der Listenansicht jeder Eintrag zu article.

Das könnte Sie auch interessieren

• Divi Theme Builder: Single-Template erstellen — Schritt-für-Schritt-Anleitung für den Aufbau des Templates
• Divi 5: Archiv- und Single-Template erstellen — Vorlagen mit den nativen Modulen aufbauen
• Divi 5: Umstieg von Divi 4 — Wie bestehende Divi-4-Layouts beim Umstieg übernommen werden
• Galerie: Slideshow konfigurieren — Einstellungen der Swiper-Galerie
• Galerie: Statische Ansicht — Einstellungen der statischen Galerie