Ajoutez votre image interactive à n'importe quel site

WordPress

1. 1Ouvrez la page ou l'article dans l'éditeur WordPress.
2. 2Cliquez sur + et ajoutez un bloc HTML personnalisé à l'endroit où l'image doit apparaître.
3. 3Collez le code dans le bloc. Dans les versions récentes de WordPress, cliquez d'abord sur Modifier le HTML, collez le code et cliquez sur Mettre à jour.
4. 4Cliquez sur Enregistrer (ou Publier), puis ouvrez la page ou l'aperçu pour voir l'image interactive.

Il vous faut un compte Administrateur ou Éditeur, sinon WordPress supprime le script. Éditeur classique : collez le code dans l'onglet Code (appelé Texte dans les anciennes versions). Sur WordPress.com, les scripts ne fonctionnent qu'avec un forfait payant dont les fonctions d'hébergement sont activées.

Elementor

1. 1Modifiez la page avec Elementor.
2. 2Faites glisser le widget HTML à l'endroit où l'image doit apparaître.
3. 3Collez le code dans le champ Code HTML.
4. 4Cliquez sur Publier (ou Mettre à jour).

Par défaut, seuls les administrateurs peuvent utiliser le widget HTML ; les autres rôles peuvent être autorisés dans le Role Manager d'Elementor.

Shopify

1. 1Dans votre interface administrateur Shopify, allez dans Boutique en ligne et cliquez sur Modifier le thème (dans certaines interfaces : Personnaliser).
2. 2Ouvrez la page ou le modèle où l'image doit apparaître, par exemple la page d'accueil ou un modèle de produit.
3. 3Cliquez sur Ajouter une section et choisissez Liquid personnalisé.
4. 4Collez le code dans le champ Code Liquid et cliquez sur Enregistrer.

Liquid personnalisé est inclus dans les thèmes gratuits de Shopify comme Dawn et dans la plupart des thèmes Online Store 2.0.

Wix

1. 1Ouvrez votre site dans l'éditeur Wix.
2. 2Cliquez sur Ajouter des éléments (+) → Code d'intégration → Intégrations populaires → HTML intégré.
3. 3Cliquez sur Saisir code, collez le code et cliquez sur Appliquer.
4. 4Faites glisser les coins du cadre jusqu'à ce que toute l'image soit visible, puis cliquez sur Publier.

Wix affiche le code intégré dans un cadre de taille fixe : si l'image est coupée, agrandissez le cadre. Dans le nouvel éditeur Wix Harmony : + Ajouter → Éléments → Intégrer → Code d'intégration, puis l'icône des paramètres et Saisir le code HTML.

Squarespace

1. 1Modifiez la page et cliquez sur Ajouter un bloc à l'endroit où l'image doit apparaître.
2. 2Choisissez Code, puis cliquez sur l'icône crayon du nouveau bloc.
3. 3Collez le code, laissez le mode sur HTML et Afficher la source désactivé.
4. 4Cliquez à côté du bloc et enregistrez la page.

Squarespace n'exécute les scripts des blocs Code qu'avec le forfait Essentiel, Plus ou Advanced. Tant que vous êtes connecté, l'image peut ne pas s'afficher ; vérifiez la page en ligne ou une fenêtre privée.

Webflow

1. 1Ouvrez la page dans le Designer Webflow.
2. 2Ouvrez le panneau Add et faites glisser un élément Code Embed sur la page.
3. 3Collez le code et cliquez sur Save & Close.
4. 4Publiez le site. L'image apparaît sur le site publié ; le Designer affiche un espace réservé.

Code Embed nécessite un forfait Site payant ou un Workspace payant (Core, Growth, Agency ou Freelancer).

Framer

1. 1Ouvrez la page dans Framer.
2. 2Cliquez sur Insert et ajoutez un composant Embed.
3. 3Ouvrez l'onglet HTML du composant et collez le code.
4. 4Redimensionnez l'élément pour que toute l'image soit visible, puis cliquez sur Publish. Les scripts ne s'exécutent que sur le site publié, pas dans l'éditeur.

Google Sites

1. 1Ouvrez votre site dans Google Sites.
2. 2Cliquez sur Insérer → Intégrer et passez à l'onglet Intégrer le code.
3. 3Collez le code, cliquez sur Suivant, puis sur Insérer.
4. 4Redimensionnez le cadre pour que toute l'image soit visible, puis cliquez sur Publier.

HTML

1. 1Ouvrez le fichier HTML ou le modèle de votre page.
2. 2Collez le code dans <body>, à l'endroit où l'image doit apparaître.
3. 3Enregistrez la page et mettez-la en ligne.

Plusieurs images sur une page : ajoutez un <div class="iactiveImg" data-ii="…"></div> par image. La ligne <script> n'est nécessaire qu'une seule fois.