Comment intégrer une visionneuse de modèles 3D dans WordPress en 4 étapes faciles

Catégorie blogFAQ

Les visionneuses de modèles 3D sont des outils formidables pour mettre en valeur vos produits tout en ajoutant un aspect moderne à votre site web. Notre plateforme – Visao – offre la possibilité de transformer n’importe quel fichier CAD en une visionneuse de produits 3D interactive et détaillée en quelques étapes seulement. De plus, il n’est pas nécessaire d’être un spécialiste des logiciels de modélisation 3D pour pouvoir le faire !

En fait, l’intégration d’une visionneuse peut sembler une tâche complexe et fastidieuse, mais elle peut en réalité être réalisée en 2 minutes, sans aucune compétence en développement web.

Suivez ce guide vidéo ou ce guide écrit étape par étape pour apprendre à le faire en utilisant un code HTML iframe !

  • Pas besoin de plugin d’onglets ou de plugin 3D !
  • Aucun plugin d’intégration de modèle 3D n’est nécessaire !

 

PARTIE 1 : Obtenir le code HTML de votre iframe

 A. Comprendre ce qu’est un iframe HTML

La meilleure façon de présenter une visionneuse de produits 3D sur une page Web est d’utiliser un iframe HTML. Un iframe est un cadre qui affiche une page HTML à l’intérieur d’une autre page. Dans l’exemple ci-dessous, un iframe est utilisé pour intégrer une vidéo Youtube (Youtube est le logiciel source) dans cet article de blog.

 

 

B. Comprendre quels sont les éléments d’une iframe

Cette illustration représente les différents éléments d’un code iframe construit pour supporter un contenu 3D. Dans la grande majorité des cas, il n’est pas nécessaire de modifier une partie du code.

Les experts 3D de Visao recommandent d’utiliser la largeur et la hauteur complètes du conteneur HTML plutôt que de définir des dimensions fixes en pixels. C’est pourquoi l’exemple ci-dessus utilise style= »width : 100% ; height : 100% ». Toutefois, si vous préférez modifier la hauteur et la largeur de la visionneuse du modèle 3D, vous pouvez le faire en donnant des attributs de pixel spécifiques à chaque élément. Voici un exemple avec une largeur de 500 pixels et une hauteur de 350 pixels (style= »width:500 ; height : « 350 »).

 

C. Copiez le code HTML de l’iframe

Si vous utilisez le logiciel de création de visionneuses de produits 3D de Visao, votre code iframe sera généré automatiquement. Pour y accéder, dans la section « Viewer » du logiciel, il suffit de cliquer sur l’icône « Edit ». Cliquez ensuite sur l’icône de copie à droite pour copier le code iframe généré.

Si vous n’utilisez pas le logiciel de Visao, vous pouvez utiliser le modèle suivant. Remplacez simplement l’URL du modèle par la vôtre.

<iframe src= »https://demo.visao.ca/viewer/nvx7YBzcT7CrZMp9ubwg5A?lang=en » title= »Tubular Chair – Background Demo » style= »border: none; width: 100%; height: 100%; » allow= »autoplay; fullscreen; vr » allowtransparency= »true » allowfullscreen= »true »></iframe>

 

PARTIE 2 : Intégrer la visionneuse sur le site Web

Pour intégrer le contenu 3D à votre site Web WordPress, vous devez coller le code iframe généré dans la section correspondante du site Web. Aucune extension n’est nécessaire.

 

A. Connectez-vous à votre compte WordPress

Allez dans votre compte pour modifier le site web.

 

B. Allez à la section Pages

Cliquez sur l’onglet « Pages » dans le menu de gauche.

 

C. Sélectionnez la page

Cliquez sur la page, puis sur la partie de la page que vous souhaitez modifier.

 

D. Ajouter un élément HTML à la zone souhaitée

Pour ajouter un bloc HTML personnalisé, cliquez sur l’icône + dans l’Inserteur de blocs et recherchez HTML personnalisé, ou tapez /html sur une nouvelle ligne et appuyez sur Entrée. Cliquez sur l’élément de code dans le menu et faites-le glisser vers la zone souhaitée. Si vous utilisez un plugin de création de site Web tel qu’Elementor, vous pouvez simplement ajouter un bloc HTML.

E. Collez le code iframe

Collez votre code HTML iframe dans le champ prévu à cet effet.

 

F. Réviser et publier les changements sur la page web

bouton « Publier ». Votre visionneuse de modèles 3D apparaîtra maintenant sur votre site Web, comme celle-ci !

 

 

Utilisation de l’API de Visao

Vous cherchez à développer des fonctionnalités avancées qui fonctionnent en complément de la visionneuse 3D de Visao ? En utilisant le protocole de développement (API) de Visao, vous pouvez créer des projets en ligne qui s’exécutent au-dessus de la visionneuse 3D de Visao. Vous pouvez ainsi concevoir votre propre logique d’interaction avec un objet 3D. Des options avancées telles que les plugins d’analyse, les configurateurs de produits aux CPQ, tout peut être créé !

Cliquez ici pour accéder à notre API afin de créer des options avancées

 

FAQ

Le temps de téléchargement d’une visionneuse 3D peut-il avoir un impact négatif sur le SEO d’un site web ?

Les fichiers 3D n’ont pas d’impact négatif sur le référencement d’un site web, et même le contraire. Étant donné que les moteurs de recherche considèrent le contenu d’une iframe comme appartenant à un autre site web, il n’aura pas d’impact direct sur le classement SEO.  Cependant, un aspect à surveiller est le poids de l’iframe, qui peut ralentir le chargement du site web. En effet, un temps de chargement trop élevé peut affecter négativement l’expérience utilisateur, le référencement technique et par conséquent affecter le référencement global.

Pour éviter de ralentir un site web lors de l’intégration d’une iframe contenant un fichier modèle 3D, il est possible d’ajouter l’option attribut loading= »lazy » dans le shortcode de l’iframe.

Avec cette option de délai, l’iframe ne se chargera que lorsque l’invité fera défiler la page où se trouve l’iframe. La page ne sera pas affectée négativement par le chargement de l’affichage du modèle 3D puisqu’il ne se chargera que lorsque l’utilisateur arrivera à l’emplacement précis du modèle. Avant cela, une image du contenu 3D sera affichée.

Ce tutoriel s’applique-t-il également aux vidéos à 360 degrés ?

Oui, les vidéos à 360 degrés et les images à 360 degrés peuvent également être intégrées dans un site WordPress en utilisant des iframes ! Des plugins peuvent également être utilisés, mais ce ne sont pas nos options d’intégration préférées car elles prennent plus de temps à installer.

Si je dois modifier des caractéristiques de mon fichier 3D, dois-je recréer un nouveau code iframe ?

Si vous utilisez un logiciel web tel que Visao, vous n’avez pas besoin de recréer un nouveau shortcode iframe car le lien URL reste le même. En effet, vous pouvez simplement recharger la page web contenant l’iframe et les nouvelles fonctionnalités apparaîtront. Aucun téléchargement de version de logiciel n’est nécessaire !

Comment puis-je modifier la couleur d’arrière-plan de mon visualiseur 3D ? Et la couleur de la police des boutons ?

Il n’est pas possible de modifier la couleur de l’arrière-plan ou de la police des boutons de votre visionneuse 3D directement à partir du code HTML. La modification du style css n’affectera pas l’aspect du style de la visionneuse car il s’agit d’un lien url externe.

Quel est le ratio d’aspect de l’affichage du modèle 3D une fois intégré ?

La visionneuse de modèles 3D adopte le rapport d’aspect du bloc HTML dans lequel elle est placée. Par conséquent, que ce soit sur un navigateur mobile ou sur un ordinateur, l’expérience de visualisation par défaut restera la même.

 

Affichez en 3D avec Visao !

Visao propose un logiciel de création de visionneuses de produits en 3D basé sur le web qui permet aux fabricants d’utiliser leurs fichiers CAD pour créer des présentations interactives en 3D de leurs produits pour le marketing, les processus de vente, les salons professionnels et la production. Nous fournissons également une liste complète de services pour vous accompagner dans le processus de création de votre propre expérience engageante en quelques semaines seulement !

Prêt à afficher une visionneuse de produits en 3D avec des animations personnalisées et du contenu dynamique ? Demandez une démo virtuelle du logiciel 3D et de réalité augmentée de Visao et nous serons heureux de vous accompagner dans vos démarches !