Tutoriels

Comment intégrer une photo 360 sur WordPress

Vous souhaitez intégrer le meilleur lecteur de photo 360 sur WordPress ? En quelques étapes, apprenez à intégrer n’importe quelle photo ou image 360 ​​sur votre site web.


Etape 1 : Téléchargez vos images 360°

Commencez par Téléchargez votre/vos image(s) sur panoraven :

Si vous souhaitez intégrer plus d’une image dans un seul lecteur (mode galerie), vous pouvez en télécharger plusieurs d’un seul coup. Si vous préférez obtenir une seule image par lecteur, téléchargez les photos une par une. Pour information, vous pouvez aussi les glisser-déposer.


Etape 2 : Copiez le code d’intégration fourni

Une fois le téléchargement terminé, vous aurez accès au lecteur 360°. Au-dessus du lecteur figure une série de boutons. Le bouton “code d’intégration” permet de copier le code directement dans le presse-papier. Cliquez simplement dessus.

Copier le code d’intégration en cliquant simplement sur ce bouton

Etape 3 : Créez le bon bloc WordPress

Ça y est, vous êtes sur WordPress et plus précisément sur le tableau de bord d’édition d’un article (ou d’une page). Appuyez sur le bouton + en bas à droite pour créer un nouveau bloc. C’est dans ce bloc que sera intégré le lecteur 360 degrés.

Commencez par créer un nouveau bloc depuis la console d’édition

WordPress va alors vous demander quel type de bloc vous souhaitez créer. Le bloc qui nous intéresse s’intitule “Custom HTML”et se trouve dans le groupe “Widget”. Pour le trouver plus rapidement, vous pouvez alternativement taper “HTML” dans la barre de recherche. Cliquez ensuite pour créer le bloc en question.

Cliquez sur le type de bloc “Custom HTML”

Vous devriez alors voir apparaître le bloc dans l’écran d’édition, c’est un champ de texte à remplir avec l’instruction “Write HTML” en filigrane, comme le montre l’image ci-dessous.

Le bloc Custom HTML est maintenant créé

Étape 4 : Intégrez votre photo 360° sur WordPress!

C’est dans ce bloc que vous allez copier le code d’intégration de l’image. Vous avez dû le récupérer à l’étape 2. L’image ci-dessous montre à quoi doit ressembler le code en question :

Copiez le code d’intégration (Etape 2) dans le bloc

Vous pouvez taper sur « Preview » (bouton à côté de HTML) pour voir ce que donnera le code une fois l’article publié.

Le lecteur 360 est intégré sur votre site!

Et voilà, vous venez d’intégrer sur wordpress, une photo 360° via le plus rapide et le plus élégant de tous les lecteurs 360° 🙂


Share