> ## Documentation Index > Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt > Use this file to discover all available pages before exploring further. # Démarrer avec l'éditeur graphique > Ouvrez et naviguez dans l'éditeur graphique Kameleoon pour créer des variations d'expériences A/B directement sur votre site web sans écrire de code. *Regardez le [tutoriel vidéo](https://academy.kameleoon.com/get-started-with-web-experimentation/164219) pour des instructions sur l'utilisation de l'éditeur graphique.* L'éditeur graphique est l'outil visuel no-code de Kameleoon pour créer des variations d'expériences A/B. Il se charge directement au-dessus de votre site web dans le navigateur, ce qui vous permet de cliquer sur n'importe quel élément et de le modifier sans écrire de code. Vous pouvez mettre à jour du texte, remplacer des images, restyler des boutons et ajuster des mises en page, puis prévisualiser et lancer votre expérience immédiatement. Créer des variations de test nécessite généralement d'écrire et de déployer du code, ce qui crée un goulot d'étranglement lorsque les responsables produit, les marketeurs ou les designers dépendent des ressources d'ingénierie. L'éditeur graphique supprime ce goulot d'étranglement afin que toute votre équipe puisse mener des expériences en toute autonomie. **Avant de commencer :** * L'éditeur graphique ne fonctionne pas en mode navigation privée. * Lorsque les cookies inter-sites sont bloqués, l'éditeur graphique ne fonctionnera pas. * Firefox bloque les cookies par défaut. Si vous utilisez Firefox, vous devez activer manuellement les cookies. **Améliorez l'utilisation de l'éditeur graphique avec l'[extension de l'éditeur graphique Kameleoon](#extension-de-l’éditeur-graphique-kameleoon).** Pour dépanner les problèmes avec l'éditeur graphique et consulter les bonnes pratiques, [consultez l'article de dépannage](./troubleshooting-the-graphic-editor). ## Ouvrir l'éditeur graphique Le mode édition de Kameleoon fournit les outils pour créer des variations de pages web et lancer des expériences A/B. ### Via votre site web Pour lancer Kameleoon : 1. Accédez à une page web sur laquelle vous avez installé le script Kameleoon. 2. Appuyez sur **shift + F2** sur Windows, ou **fn + shift + F2** sur Mac. Si rien ne se passe, ajoutez `#kameleoon=true` à la fin de votre URL. 3. Une fois Kameleoon chargé, une pop-in s'ouvre. Remplissez votre nom d'utilisateur et votre mot de passe pour accéder à l'éditeur. 4. Une pop-in s'ouvre vous invitant à sélectionner une expérience (si vous en avez déjà créé une) ou à en créer une nouvelle. Cliquez sur **Create** pour créer une expérience. 5. Remplissez les informations de votre expérience et sélectionnez **Classic A/B** sous **Experiment type**. 6. Cliquez sur **Start**. L'éditeur graphique s'ouvre sur votre page web. ### Via l'application Kameleoon Vous pouvez également lancer l'éditeur depuis l'application Kameleoon. 1. Connectez-vous à votre [application Kameleoon](https://login.kameleoon.com/app). 2. Cliquez sur **New experiment** > **With the graphic editor**. 3. Remplissez les informations de votre expérience et sélectionnez **Graphic A/B** sous **Experiment type**. 4. Cliquez sur **Create**. L'éditeur graphique s'ouvre sur votre page web. ## Structure ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/experimentation/web-experimentation/graphic-based-experiments/getting-started-with-the-graphic-editor/0.png) ### Panneau d'expérience (côté gauche) **Fonction** : Gère l'expérience actuelle, y compris les variations et les éléments sur la page. **Caractéristiques** : * Ajouter des variations et des éléments. * Modifier les sélecteurs CSS. * Voir et gérer les éléments présents sur différentes pages. ### Zone d'édition principale (centre) **Fonction** : Permet une interaction directe avec les éléments de la page web pour l'édition. **Caractéristiques** : * Sélectionner et modifier du texte, des images et autres contenus. * Accéder aux raccourcis d'édition. ### Panneau de droite (côté droit) **Onglets :** Design, État, Historique **Caractéristiques** : * Personnaliser le contenu, le texte, l'arrière-plan, la bordure, l'ombre, le padding, la marge, et plus encore. * Gérer les états de l'élément (par exemple, default, hovered, active, focus, disabled). * Gérer l'historique des modifications pour chaque élément. ### Barre d'outils supérieure **Fonction** : Offre des outils pour visualiser et finaliser les modifications. **Caractéristiques** : * Basculement du mode appareil. * Simuler les changements. * Finaliser l'expérience. ## Personnaliser l'affichage de l'éditeur graphique * **Zoom** : Ajustez le niveau de zoom pour s'adapter à votre écran et à vos préférences. * **Réduire le panneau de gauche** : Minimisez le panneau de gauche pour augmenter l'espace de travail. * **Masquer le panneau de gauche** : Masquez complètement le panneau de gauche pour une vue sans distraction. * **Mode plein écran** : Agrandissez l'éditeur en plein écran pour une expérience d'édition immersive. ## Simulation et finalisation * **Simulation** : Cliquez sur **SIMULATE** pour prévisualiser l'apparence et le fonctionnement des modifications sur votre site web. * **Finalisation** : Cliquez sur **FINALIZE** pour accéder aux étapes de finalisation. ## Changement d'appareil Utilisez la barre d'outils supérieure pour basculer entre les différentes vues d'appareils (ordinateur, tablette, mobile) pour vous assurer que le design est responsive et s'affiche correctement sur tous les appareils. ## Extension de l'éditeur graphique Kameleoon Améliorez l'utilisation de l'éditeur graphique avec l'extension de l'éditeur graphique Kameleoon. ### Quand utiliser l'extension de l'éditeur graphique * Certains sites web restreignent l'utilisation d'une iframe. Pour résoudre les restrictions d'iframe, utilisez l'extension de l'éditeur graphique pour contourner ces limitations et lancer l'éditeur graphique. * Certains sites web présentent une version mobile lorsqu'ils détectent un user agent mobile. Pour s'assurer que l'éditeur graphique affiche correctement la version mobile, le navigateur doit s'identifier comme un appareil mobile. L'extension facilite le processus d'identification mobile. ### Comment installer l'extension de l'éditeur graphique [Visitez le Chrome Store](https://chromewebstore.google.com/detail/kameleoon-graphical-edito/jglbnpagaignkdmebicmmblgmledhpip) pour télécharger l'extension de l'éditeur graphique Kameleoon.