Single-Template erstellen

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

Voraussetzungen

• Elementor Pro ab Version 3.20.0
• 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 Elementor Pro steuern möchten.

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

Die 1-Klick-Widgets zeigen die bewährten HTML-Templates von WP-ImmoMakler an — inklusive Galerie, Daten, Karte, Kontaktformular und allem, was zu einer vollständigen Detailansicht gehört.

1. Theme Builder öffnen

   Navigieren Sie zu Templates > Theme Builder und klicken Sie auf Single Post hinzufügen.

2. Leeres Template wählen

   Wählen Sie eine leere Vorlage.

3. Widget einfügen

   Suchen Sie in der Widget-Sidebar nach der Kategorie WP-ImmoMakler: 1-Klick HTML-Version und ziehen Sie das Widget Detailansicht (HTML) auf die Seite.

4. Condition setzen

   Klicken Sie auf Veröffentlichen und wählen Sie als Bedingung WP-ImmoMakler > Immobilie. Damit wird dieses Template für alle Immobilien-Detailseiten verwendet.

5. Fertig

   Die Detailansicht wird nun mit dem WP-ImmoMakler HTML-Template dargestellt.

Tipp

Das Widget Detailansicht (HTML) 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 Widget Detailansicht (HTML) 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 Widget Immobilien Fotogalerie) platzieren möchten.

Option B: Individuelles Template gestalten

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

1. Theme Builder öffnen

   Navigieren Sie zu Templates > Theme Builder und klicken Sie auf Single Post hinzufügen.

2. Seitenlayout einrichten

   Wählen Sie eine leere Vorlage. Erstellen Sie die gewünschte Seitenstruktur mit Containern — z. B. ein Hauptbereich mit Galerie und Daten links, Kontaktformular und Kontaktperson rechts.

3. Galerie einfügen

   Ziehen Sie eines der Galerie-Widgets auf die Seite:

   Widget	Beschreibung
   Immobilien Fotogalerie	Vollständige Bildergalerie mit Slideshow- und Statisch-Modus, Lightbox und allen Customizer-Optionen pro Widget-Instanz konfigurierbar
   Galerie Raster	Schlanke Rasteransicht ohne Slideshow, mit Lightbox

   Das Immobilien Fotogalerie-Widget stellt dieselben Optionen bereit, die Sie aus dem Customizer kennen — und zwar pro Widget-Instanz. Siehe Galerie konfigurieren weiter unten.

4. Immobiliendaten hinzufügen

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

   Widget	Zeigt
   Daten	Frei konfigurierbare Datentabelle mit allen Immobilienfeldern
   Flächen	Alle Flächenangaben (Wohnfläche, Grundstücksfläche usw.)
   Preise	Alle Preisangaben (Kaufpreis, Kaltmiete, Nebenkosten usw.)
   Ausstattung	Ausstattungsmerkmale als Icon-Liste
   Energieausweis	Energieausweisdaten als Datentabelle
   Icon-Liste	Beliebige Datenfelder als Icon-Liste
   Datenkacheln	Eckdaten als visuelle Kacheln

5. Beschreibungstexte einfügen

   Verwenden Sie ein Elementor Text-Widget mit dem Dynamic Tag Beschreibung, um die Objektbeschreibung aus der Maklersoftware anzuzeigen. Im Dynamic Tag können Sie das gewünschte Textfeld auswählen (Objektbeschreibung, Lage, Ausstattung, Sonstiges usw.).

6. Karte hinzufügen

   Ziehen Sie das Widget Karte auf die Seite. Es zeigt den Standort der Immobilie auf Google Maps oder OpenStreetMap an.

7. Kontaktbereich gestalten

   Widget	Beschreibung
   Kontaktformular	Anfrage-Formular mit automatischer Objekt-Zuordnung
   Kontaktdaten	Name, Telefon, E-Mail der Kontaktperson
   Kontaktfoto	Foto der Kontaktperson

8. Downloads und Links

   Fügen Sie das Widget Downloads & Links ein, um PDF-Exposés, Grundrisse und externe Links (z. B. virtuelle Rundgänge) anzuzeigen.

9. Videos und virtuelle Touren

   Widget	Beschreibung
   Videos	Eingebettete YouTube-/Vimeo-Videos
   Virtuelle Touren PLUS	360-Grad-Rundgänge
   Energieausweis-Diagramm PLUS	Grafische Energieausweis-Skala

10. Condition setzen

    Klicken Sie auf Veröffentlichen und wählen Sie die passende Bedingung:

    Bedingung	Beschreibung
    Immobilie	Template gilt für alle Immobilien
    Immobilie (Referenz-ID)	Template gilt nur für eine bestimmte Immobilie

Galerie konfigurieren

Das Immobilien Fotogalerie-Widget bietet pro Widget-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 Elementor-Widget.

Tipp

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

Dynamic Tags für die Detailansicht

Neben den spezialisierten Widgets können Sie Dynamic Tags in beliebigen Elementor-Widgets verwenden — z. B. in Überschriften, Textblöcken, Bildern oder Buttons.

Text-Tags

Tag	Beschreibung
Immobilien-Titel	Objekttitel aus der Maklersoftware
Status	Aktueller Status (aktiv, verkauft, vermietet usw.)
Vermarktungsart	Kauf oder Miete
Beschreibung	Freitextfelder (Objektbeschreibung, Lage, Ausstattung usw.)
Daten-Wert	Wert eines beliebigen Datenfeldes (z. B. Baujahr, Etage)
Daten-Label	Bezeichnung eines Datenfeldes
Flächen-Wert / Flächen-Label	Flächenwerte und -bezeichnungen
Preis-Wert / Preis-Label	Preiswerte und -bezeichnungen
Energie-Wert / Energie-Label	Energieausweisdaten und -bezeichnungen
Kontaktdaten-Wert	Felder der Kontaktperson (Name, Telefon, E-Mail usw.)

Bild-Tags

Tag	Beschreibung
Titelbild	Hauptbild der Immobilie (für Image-Widget oder Hintergrundbild)
Kontaktpersonen-Foto	Foto der Kontaktperson
Bild (bestimmter Index)	Einzelbild anhand der Position in der Galerie
Galerie-Bilder	Alle Fotos (für Gallery-Widget oder Carousel)
Galerie-Grundrisse	Nur Grundrisse

URL-Tags

Tag	Beschreibung
Direktlink	Permalink der Immobilie
PDF-URL	URL des automatisch generierten PDFs
PDF-Anhang-URL	URL eines manuell hochgeladenen PDF-Anhangs
Galerie-URL	URL der eigenständigen Galerieansicht

Display Conditions nutzen

Display Conditions sind besonders in der Detailansicht nützlich, um Bereiche nur dann anzuzeigen, wenn die entsprechenden Daten vorhanden sind. So vermeiden Sie leere Abschnitte.

Beispiel: Eine Immobilie ohne Videos sollte keinen leeren Video-Bereich zeigen.

Bedingung	Empfohlener Einsatz
Bilder vorhanden	Galerie-Widget ein-/ausblenden
Videos vorhanden	Video-Widget ein-/ausblenden
Downloads/Links vorhanden	Downloads-Abschnitt ein-/ausblenden
PDF vorhanden	PDF-Download-Button ein-/ausblenden
Energie-Daten vorhanden	Energieausweis-Abschnitt ein-/ausblenden
Kontaktdaten vorhanden	Kontaktperson-Abschnitt ein-/ausblenden
Beschreibungsfelder vorhanden	Einzelne Textabschnitte ein-/ausblenden
Datenfelder vorhanden	Bestimmte Datenzeilen oder Kacheln ein-/ausblenden
Virtuelle Touren vorhanden PLUS	Touren-Widget ein-/ausblenden

Taxonomie-basierte Bedingungen

Mit Taxonomie-Bedingungen können Sie unterschiedliche Layouts für verschiedene Immobilientypen erstellen:

• Vermarktungsart: Unterschiedliche Preisdarstellung für Kauf und Miete
• Objektart: Andere Datenfelder für Wohnungen als für Grundstücke
• Status: Besondere Darstellung für Referenzobjekte
• Nutzungsart: Gewerbliche Objekte anders als Wohnobjekte
• Land: Länderspezifische Feldzuordnungen

Verwandte Immobilien anzeigen

Möchten Sie unter der Detailansicht weitere Immobilien einblenden (z. B. über Elementors Loop Grid oder Posts-Widget), schließt WP-ImmoMakler die aktuell angezeigte Immobilie automatisch aus, wenn Sie der Abfrage eine bestimmte ID zuweisen.

1. Loop- oder Posts-Widget einfügen

   Fügen Sie ein Loop Grid- oder Posts-Widget unterhalb Ihrer Detailansicht ein und konfigurieren Sie es so, dass Immobilien (Beitragstyp Immobilie) angezeigt werden.

2. Abfrage ID setzen

   Öffnen Sie im Widget den Reiter Erweitert > Abfrage ID und tragen Sie als Wert immomakler_exclude_current ein.

3. Optional: nur verfügbare Immobilien anzeigen

   Um bereits verkaufte oder vermietete Objekte auszuschließen, öffnen Sie im Widget den Reiter Abfrage und fügen Sie unter Einschließen von > Begriffe den Begriff Immobilien-Status: offen hinzu.

4. Fertig

   WP-ImmoMakler entfernt die aktuell angezeigte Immobilie aus den Ergebnissen, sodass im Loop nur andere Immobilien erscheinen.

Hinweis

Die Abfrage ID greift nur auf Detailseiten von Immobilien. Auf anderen Seiten bleibt die Abfrage unverändert.

Vorschau und Testen

Beim Bearbeiten des Templates zeigt Elementor standardmäßig Platzhalter-Daten an. Um das Template mit echten Immobiliendaten zu testen:

1. Klicken Sie in der Elementor-Fußleiste auf das Zahnrad-Symbol (Seiteneinstellungen).
2. Wählen Sie unter Vorschaueinstellungen den Beitragstyp Immobilie und wählen Sie eine vorhandene Immobilie aus.
3. Das Template wird nun mit den Daten dieser Immobilie dargestellt.

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 Widgets ersetzen. Sie können die Sichtbarkeit beider Templates über die Theme Conditions steuern, um sie parallel zu testen.

Das könnte Sie auch interessieren

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