Virtuelle Touren Block einsetzen

Mit dem Gutenberg-Block Virtuelle Touren PLUS (immomakler/single-virtual-tours) binden Sie virtuelle 360°-Touren einer Immobilie direkt in Block-Templates oder beliebige Seiten ein. Jede erkannte Tour-URL wird als eingebettetes <iframe> gerendert. Der Block entspricht in Funktionsumfang und Ausgabe dem gleichnamigen Elementor-Widget „Virtuelle Touren”.

Voraussetzungen

WordPress mit Gutenberg-Editor (ab WordPress 5.0)
WP-ImmoMakler PLUS (der Block ist in der Basic-Edition nicht verfügbar)
Die Immobilie muss einen Link mit einer erkannten 360°-Tour-URL hinterlegt haben

Block einfügen

Immobilie bearbeiten oder Template öffnen

Öffnen Sie eine bestehende Immobilie im Editor oder ein Block-basiertes Template für den Beitragstyp Immobilie (erfordert ein Block-Theme oder den Site Editor).
Block einfügen

Klicken Sie auf das +-Symbol und suchen Sie nach Virtuelle Touren oder navigieren Sie zur Kategorie Widgets. Fügen Sie den Block ein.
Vorschau prüfen

Im Editor wird — sofern mindestens eine Beispiel-Immobilie mit Tour-URLs vorhanden ist — eine Live-Vorschau mit den iFrames angezeigt. Sind keine Tour-URLs vorhanden, erscheint ein Platzhaltertext.

Stil konfigurieren

Im Block-Panel Virtuelle Tour legen Sie das Erscheinungsbild fest:

Seitenverhältnis

Option	Beschreibung
16:9 (Querformat)	Standardformat für Videoinhalte – empfohlen für die meisten Touren
3:2 (Querformat)	Breites Querformat, Standard dieses Blocks
4:3 (Querformat)	Klassisches Bildschirmformat
1:1 (Quadrat)	Quadratische Darstellung

Der eingestellte Wert wird als aspect-ratio-CSS-Eigenschaft sowohl auf den Block-Wrapper als auch auf das <iframe> angewendet. Der Content-Blocker-Overlay (z. B. Borlabs Cookie) übernimmt das Seitenverhältnis ebenfalls.

Eckenradius

Der Eckenradius wird als border-radius auf das <iframe> angewendet. Die vier Ecken lassen sich gemeinsam oder unabhängig voneinander einstellen:

Alle Seiten gleich: Aktiviert eine einzige Eingabe für alle vier Ecken gleichzeitig (Standard: eingeschaltet).
Einzelne Seiten: Schalten Sie den Umschalter aus, um Oben, Rechts, Unten und Links getrennt einzustellen.

Unterstützte Einheiten: px, %, em, rem.

CSS-Klassen für eigene Anpassungen

/* Block-Wrapper */
.wp-block-immomakler-single-virtual-tours { }

/* Eingebettetes iframe */
.wp-block-immomakler-single-virtual-tours .immomakler-virtual-tour { }

Filter-Hook

Das HTML jedes einzelnen <iframe> lässt sich über den Filter immomakler_virtual_tour_html anpassen — z. B. um einen eigenen Consent-Overlay einzufügen:

add_filter(
    'immomakler_virtual_tour_html',
    function ( string $iframe_html, string $url, string $preview_image_url ): string {
        // Eigenes HTML zurückgeben, z. B. mit Consent-Wrapper
        return $iframe_html;
    },
    10,
    3
);

Kompatible Anbieter

Der Block zeigt alle Tour-URLs an, die WP-ImmoMakler als 360°-Tour erkennt. Eine Übersicht der unterstützten Anbieter finden Sie unter 360-Grad-Touren.