Utiliser le bloc Visites virtuelles

Avec le bloc Gutenberg Visites virtuelles PLUS (immomakler/single-virtual-tours), vous intégrez des visites virtuelles à 360° d’un bien immobilier directement dans des templates de blocs ou dans n’importe quelle page. Chaque URL de visite reconnue est rendue sous forme d’<iframe> intégré. Le bloc correspond en termes de fonctionnalités et de rendu au widget Elementor du même nom, « Visites virtuelles ».

Prérequis

WordPress avec l’éditeur Gutenberg (à partir de WordPress 5.0)
WP-ImmoMakler PLUS (le bloc n’est pas disponible dans l’édition Basic)
Le bien immobilier doit avoir un lien avec une URL de visite à 360° reconnue enregistré

Insérer le bloc

Modifier un bien ou ouvrir un template

Ouvrez un bien immobilier existant dans l’éditeur ou un template basé sur des blocs pour le type de publication Bien immobilier (requiert un thème de blocs ou le Site Editor).
Insérer le bloc

Cliquez sur le symbole + et recherchez Visites virtuelles, ou naviguez vers la catégorie Widgets. Insérez le bloc.
Vérifier l’aperçu

Dans l’éditeur — pour autant qu’au moins un exemple de bien avec des URLs de visite soit disponible — un aperçu en temps réel avec les iFrames s’affiche. Si aucune URL de visite n’est disponible, un texte de remplacement apparaît.

Configurer le style

Dans le panneau de bloc Visite virtuelle, vous définissez l’apparence :

Ratio d’aspect

Option	Description
16:9 (paysage)	Format standard pour les contenus vidéo — recommandé pour la plupart des visites
3:2 (paysage)	Format paysage large, valeur par défaut de ce bloc
4:3 (paysage)	Format d’écran classique
1:1 (carré)	Affichage carré

La valeur configurée est appliquée comme propriété CSS aspect-ratio à la fois sur l’enveloppe du bloc et sur l’<iframe>. L’overlay du bloqueur de contenu (p. ex. Borlabs Cookie) hérite également du ratio d’aspect.

Rayon des coins

Le rayon des coins est appliqué comme border-radius sur l’<iframe>. Les quatre coins peuvent être ajustés ensemble ou indépendamment :

Tous les côtés égaux : Active une seule entrée pour les quatre coins à la fois (par défaut : activé).
Côtés individuels : Désactivez le commutateur pour ajuster haut, droite, bas et gauche séparément.

Unités prises en charge : px, %, em, rem.

Classes CSS pour des personnalisations supplémentaires

/* Enveloppe du bloc */
.wp-block-immomakler-single-virtual-tours { }

/* iframe intégré */
.wp-block-immomakler-single-virtual-tours .immomakler-virtual-tour { }

Hook de filtre

Le HTML de chaque <iframe> individuel peut être personnalisé via le filtre immomakler_virtual_tour_html — p. ex. pour insérer un overlay de consentement personnalisé :

add_filter(
    'immomakler_virtual_tour_html',
    function ( string $iframe_html, string $url, string $preview_image_url ): string {
        // Retourner son propre HTML, p. ex. avec enveloppe de consentement
        return $iframe_html;
    },
    10,
    3
);

Fournisseurs compatibles

Le bloc affiche toutes les URLs de visite que WP-ImmoMakler reconnaît comme visites à 360°. Vous trouverez un aperçu des fournisseurs pris en charge sous Visites à 360°.