- 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.
- Mozilla bloque les cookies par défaut. Si vous utilisez Mozilla, vous devez activer manuellement les cookies.
Avantages pour l’utilisateur
- Performance et compatibilité améliorées.
- Interface utilisateur intuitive pour une meilleure expérience et facilité d’utilisation.
- Possibilité de faire des modifications par lots sur plusieurs pages.
- Options de personnalisation avancées.
- Intégration transparente avec Widget Studio de Kameleoon.
- Fonctionnalités alimentées par l’IA pour la génération de contenu, la gestion des sélecteurs CSS et les variations de design.
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 :- Accédez à une page web sur laquelle vous avez installé le script Kameleoon.
- Appuyez sur shift + F2 sur Windows, ou fn + shift + F2 sur Mac.
Si rien ne se passe, ajoutez
#kameleooon=true à la fin de votre code.- Une fois Kameleoon chargé, une pop-in s’ouvre. Remplissez votre nom d’utilisateur et votre mot de passe pour accéder à l’éditeur.
- 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.
- Remplissez les informations de votre expérience et sélectionnez Classic A/B sous Experiment type.
- Cliquez sur Start.
Via l’application Kameleoon
Vous pouvez également lancer l’éditeur depuis l’application Kameleoon.- Connectez-vous à votre application Kameleoon.
- Cliquez sur New experiment > With the graphic editor.
- Remplissez les informations de votre expérience et sélectionnez Graphic A/B sous Experiment type.
- Cliquez sur Create.
Structure
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.