+33 (0)9 79 36 16 30

Plugin 360 WordPress
easystory360 Ultimate

 

Bienvenue sur la page officiel du plugin Easystory360 Ultimate pour WordPress.

Ce plugin vous permet d’intégrer facilement vos stories VR360 immersives sur votre site WORDPRESS, quel que soit votre thème ou constructeur (Divi, Elementor, éditeur classique, Gutenberg).

Pour tester les différents éléments présentés ci-dessous, si vous n’avez pas encore de compte easystory360, vous pouvez utiliser ce lien de Story :

https://viewer.easystory360.tools/viewer/-OUdum3R4toniFfeazfE/3

 

1. Installation du plugin 360 WordPress

  • Téléchargez l’archive ZIP du plugin Easystory360 Ultimate.
  • Dans votre tableau de bord WordPress, allez dans Extensions > Ajouter, puis Téléverser une extension.
  • Sélectionnez le fichier ZIP et cliquez sur Installer, puis sur Activer.

plugin 360 wordpress

 

 

2. Ajouter une Story avec le Générateur de code

Le plugin inclut un générateur de code HTML pour vos stories Easystory360, accessible dans le menu latéral de l’admin WordPress, rubrique “Easystory360 Generator”.

  1. Ouvrez Easystory360 Generator dans l’admin.
  2. Collez l’URL de votre story (format : https://viewer.easystory360.tools/viewer/[ID]).
  3. Définissez les options : largeur, hauteur, ratio, bouton plein écran…
  4. Cliquez sur Générer le code HTML.
  5. Un code est affiché : cliquez sur Copier.
  6. Collez ce code dans n’importe quel module HTML de Divi, Elementor, ou Gutenberg (bloc HTML).

 

3. Utiliser le widget Easystory360

Vous pouvez ajouter une Story VR dans n’importe quelle sidebar ou footer de votre site via le widget intégré.

  1. Dans l’admin WordPress, rendez-vous dans Apparence > Widgets.
  2. Ajoutez le widget Easystory360 Story à l’endroit désiré.
  3. Renseignez l’URL de votre story et les options d’affichage (taille, ratio, bouton plein écran).
  4. Enregistrez : la Story VR apparaît directement dans la zone sélectionnée.

 

4. Ajouter une Story dans l’éditeur classique (TinyMCE)

Le plugin ajoute un bouton dédié dans l’éditeur classique (TinyMCE, “Ajouter un média” au-dessus de la zone de texte).

  1. Cliquez sur le bouton Easystory360 (icône orange ou caméra vidéo).
  2. Renseignez les paramètres de votre story.
  3. Cliquez sur Insérer : le code s’ajoute automatiquement à l’article ou la page.

 

5. Utilisation dans DIVI, Elementor, Gutenberg…

Le code HTML généré par le plugin est compatible avec tous les constructeurs de pages :

  • DIVI : Ajoutez un module “Code” ou “HTML” et collez le code.
  • Elementor : Utilisez un widget “HTML” pour intégrer la story.
  • Gutenberg : Ajoutez un bloc “HTML personnalisé” et collez le code généré.

Les options d’affichage (taille, ratio, bouton plein écran) restent actives partout.

 

 

6. Options disponibles

Vous pouvez personnaliser l’affichage de chaque story :

  • width : Largeur (ex : 100%, 400px, 60vw)
  • height : Hauteur (ex : 400px, 60vh)
  • ratio : Ratio d’aspect (ex : 16:9, 4:3)
  • Plein écran : Afficher le bouton de passage en plein écran sur la story

Astuce : Le ratio prend la priorité sur la hauteur si les deux sont définis.

 

7. Internationalisation (FR / EN)

Le plugin détecte automatiquement la langue de votre site WordPress.

Tous les textes, boutons et notices sont affichés en français ou en anglais selon la langue de l’admin.

 

 

8. Exemples de code

Voici un exemple à coller dans un module HTML :

<div class="es360u-story-embed" style="position:relative;width:100%;height:400px;">
  <iframe src="https://viewer.easystory360.tools/viewer/votre-ID" allowfullscreen allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; microphone" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;"></iframe>
  <button type="button" class="es360u-fullscreen-btn" onclick="var ifr=document.querySelector('.es360u-story-embed iframe'); if(ifr.requestFullscreen){ifr.requestFullscreen();}">&#x26F6;</button>
</div>

Remplacez votre-ID par l’identifiant de votre story, par exemple pour la Story :
https://viewer.easystory360.tools/viewer/-OUdum3R4toniFfeazfE/3 

 

votre-ID = -OUdum3R4toniFfeazfE/3

En insérant le code complet, vous obtenez ceci :


 

9. Support et FAQ

Pour toute question, consultez la documentation sur explorations360.com

ou contactez l’équipe support si besoin.

Bonne création immersive avec Easystory360 !