Sélectionner un élément
L’éditeur graphique simplifie la sélection d’éléments. Lorsque vous survolez des parties d’une page web dans l’éditeur, Kameleoon met en évidence chaque élément. Double-cliquez sur un élément pour le sélectionner.
Détails de l’élément
Lors de la sélection, les détails de l’élément, tels que sa balise, sont affichés. Les détails de l’élément vous aident à comprendre le type de contenu avec lequel vous interagissez.Mise en évidence
Vous pouvez accéder aux options Highlight in preview en cliquant sur l’icône engrenage. Ces interrupteurs vous permettent de mettre en évidence les éléments directement dans l’aperçu avec différentes couleurs.- Éléments ajoutés : Mis en évidence avec une couleur pour afficher les éléments nouvellement ajoutés.
- Éléments modifiés : Mis en évidence avec une autre couleur pour identifier les éléments que vous avez modifiés.
Recherche, tri et filtrage
- La barre de recherche vous permet de trouver des éléments par nom ou balise. Par exemple, si vous tapez « div », la recherche renverra tous les éléments
<div>, ainsi que tous les éléments contenant « div » dans leur nom. - Les options de tri vous aident à naviguer dans de longues listes d’éléments.
- Plus récents en haut : Trie les éléments par date de création ou de première modification, les éléments les plus récemment créés ou modifiés apparaissant en haut. Cette méthode de tri respecte la date de création ou de première modification originale : quelles que soient les modifications futures, les éléments les plus anciens apparaissent toujours en premier.
- Plus anciens en haut : Trie les éléments par date de création ou de première modification, les éléments les plus anciens apparaissant en haut. Cette méthode respecte les dates originales de création ou de modification, comme pour Plus récents en haut.
- Le panneau Éléments vous permet de filtrer les éléments selon des critères spécifiques, vous permettant de réduire la liste des éléments à ceux pertinents à votre tâche actuelle.
Sélectionner un autre relatif
La fonctionnalité Select another relative vous aide à naviguer dans la structure hiérarchique des éléments de la page web. Utilisez cette fonctionnalité lorsque vous devez sélectionner un élément lié auquel vous ne pouvez pas accéder directement. Par exemple, si vous avez sélectionné un titre dans une bannière et souhaitez sélectionner la bannière entière, cliquez sur Select another relative et naviguez jusqu’à l’élément parent.Modifier les sélecteurs CSS
Utilisez les sélecteurs CSS pour spécifier quels éléments vos modifications affectent. Vous pouvez affiner les sélecteurs existants, en générer de nouveaux avec l’IA, ou saisir manuellement du code personnalisé. Pour cibler un élément, vous pouvez utiliser des types de sélecteurs standard (tels que hiérarchie, balise, classe ou contenu), ou utiliser des sélecteurs générés par IA si vous n’êtes pas familier avec la syntaxe CSS. La saisie manuelle est également disponible pour un ciblage précis, ce qui est utile lorsqu’un élément est profondément imbriqué ou partage plusieurs classes avec d’autres éléments.Types de sélecteurs disponibles
Le tableau suivant décrit les types de sélecteurs disponibles, quand les utiliser et leurs risques potentiels :| Type de sélecteur | Description | Utilisation recommandée | Risque |
|---|---|---|---|
| AI Generation/Automatic | Génère automatiquement un sélecteur en combinant plusieurs attributs en une empreinte. | Utilisez comme point de départ ou si vous n’êtes pas familier avec le CSS. | Complexité : Les sélecteurs peuvent être longs et difficiles à déboguer en cas d’échec. |
| Hierarchy | Identifie un élément en fonction de sa position exacte dans le DOM (par exemple, body > div#main > section > ul > li:first-child). | Utilisez lorsque l’élément n’a pas d’ID ou de classe unique et que sa position est statique. | Fragilité : De petites modifications de mise en page ou de conteneur cassent souvent le sélecteur. |
| Class | Cible les éléments par leur nom de classe CSS (par exemple, .btn-primary ou .promo-banner). | Utilisez pour cibler des groupes d’éléments avec le même design ou lorsqu’une classe unique existe. | Sur-ciblage : Les modifications peuvent affecter involontairement d’autres éléments qui partagent la classe. |
| Attribute | Cible des attributs HTML spécifiques (par exemple, [data-testid="submit-button"]). | Utilisez pour un ciblage précis, spécifiquement lorsque des attributs de données de test sont disponibles. | Valeurs dynamiques : Les sélecteurs cassent si les attributs contiennent des valeurs dynamiques (comme les IDs de session) qui changent. |
| Content | Sélectionne les éléments en fonction du contenu textuel visible (par exemple, :contains("Sign Up")). | Utilisez lorsque la structure du code change fréquemment, mais que le texte reste constant. | Localisation : Les mises à jour de texte ou les traductions linguistiques font échouer le sélecteur. |
| Tag | Cible les éléments par nom de balise HTML uniquement (par exemple, <h1>, <a> ou <div>). | Utilisez pour un style global ou en combinaison avec d’autres sélecteurs. | Portée large : Seul, cela cible de nombreux éléments et peut casser les mises en page de la page. |
| Manual | Applique des sélecteurs CSS ou JS personnalisés que vous écrivez. | Utilisez lorsque vous avez besoin d’une logique complexe ou d’un ciblage spécifique non géré par d’autres types. | Erreur utilisateur : Nécessite des connaissances CSS ; les fautes de frappe ou les mises à jour du site peuvent casser l’expérience. |
Modifier un élément existant
Une fois qu’un élément est sélectionné, vous disposez de plusieurs outils de modification. Les outils sont accessibles dans la barre d’outils de l’élément et dans le panneau de droite.Barre d’outils de l’élément
- Move : Modifier la position de l’élément.
- Resize : Ajuster les dimensions de l’élément.
- Duplicate : Créer une copie de l’élément sélectionné.
- Delete : Supprimer l’élément de la page.
- Edit content : Modifier le texte ou l’image dans l’élément.
Panneau de droite
- Content : Modifier le texte, l’image ou tout autre contenu dans l’élément.
- Text : Ajuster l’alignement du texte, la hauteur de ligne et mettre le texte en capitales, majuscules ou minuscules.
- Background : Modifier la couleur d’arrière-plan ou l’image de l’élément.
- Opacity : Modifier l’opacité de l’élément.
- Border : Ajouter des bordures ou modifier leur couleur, style et largeur.
- Shadow : Appliquer des effets d’ombre pour donner de la profondeur à l’élément.
- Padding and margin : Affiner l’espacement autour et à l’intérieur de l’élément.
- Device styling rules : Personnaliser l’apparence de l’élément sur différents appareils (ordinateur, tablette, mobile).
- CSS and classes : Ajouter des classes ou styles CSS personnalisés pour une personnalisation plus avancée.
- Attributes : Modifier les attributs HTML de l’élément.
- HTML content : Modifier directement le contenu HTML si nécessaire.
Ajouter un nouvel élément
Ajouter un nouvel élément dans l’éditeur graphique de Kameleoon est simple et permet une personnalisation extensive pour répondre à vos besoins de design.Ouvrir le panneau Éléments
Choisir un élément à ajouter
Vous avez plusieurs options telles que Texte, Titre, Image, Widgets et HTML. Cliquez sur le type d’élément que vous souhaitez ajouter.Sélectionner la position de l’élément
Vous pouvez choisir la position du nouvel élément par rapport à d’autres éléments. Les options incluent Inside the page ou Above the page, et peuvent être définies sur Relative ou Absolute. Spécifiez la position exacte par rapport à un élément de référence sélectionné (par exemple, avant, remplacer ou après).Positionnement manuel
Pour un positionnement précis, activez l’option de position manuelle et spécifiez les valeurs supérieure, droite, gauche et inférieure de l’élément en pixels.Définir l’élément de référence
Vous pouvez définir le sélecteur CSS de l’élément de référence pour positionner le nouvel élément avec précision. Cliquez sur l’élément de référence dans la zone d’aperçu ou saisissez manuellement le sélecteur CSS.Ajuster les paramètres d’affichage
Choisissez les paramètres d’affichage pour différents appareils (ordinateur, tablette, mobile). Vous pouvez modifier la visibilité de l’élément dans le panneau de gauche plus tard si nécessaire.Utiliser le sélecteur de couleur
Pipette
Utilisez l’outil pipette pour sélectionner n’importe quelle couleur sur la page de votre site et l’appliquer à un autre élément.Ratio de contraste
Dans le même sélecteur de couleur, vous pouvez vérifier le ratio de contraste de la couleur sélectionnée avec le blanc.Couleurs prédéfinies avec celles utilisées sur votre site
Dans la partie inférieure du sélecteur de couleur, vous trouverez les couleurs que vous utilisez le plus sur votre site. Cliquez sur l’une d’elles pour appliquer la couleur à un élément.Actions avancées
États
La fonctionnalité d’états vous permet de personnaliser l’apparence et le comportement des éléments en fonction de leurs états d’interaction. Pour modifier l’état d’un élément :- Cliquez sur l’élément que vous souhaitez modifier. La barre d’outils de l’élément et le panneau de droite s’ouvrent.
- Cliquez sur l’onglet State dans le panneau de droite.
- Sélectionnez l’état que vous souhaitez attribuer à l’élément sélectionné : Hovered, Active, Focus ou Disabled.
Règles de style par appareil
Dans la barre latérale de droite, vous pouvez définir des règles de style pour un élément qui peuvent différer d’un appareil à l’autre.
Fonctionnalité multi-appareils
Vous pouvez utiliser la fonctionnalité multi-appareils dans l’éditeur graphique Kameleoon pour prévisualiser comment votre design apparaît sur différents appareils. Pour voir l’apparence de votre site web sur différents appareils, cliquez sur l’icône téléphone, tablette ou ordinateur en haut de l’éditeur.
Activer les éléments dynamiques
Si vous avez activé le support pour les sites web dynamiques dans les paramètres de votre projet et défini la portée sur Selected elements dans l’éditeur graphique, vous pouvez inclure des éléments spécifiques en cliquant sur le menu à trois points à côté d’un élément modifié et en sélectionnant Enable dynamic elements.
Modifier les éléments cachés
Pour modifier un menu déclenché par clic ou un texte au survol sur une carte :- Entrez en mode navigation en cliquant sur l’icône dans l’en-tête.
- Survolez ou cliquez sur l’élément déclencheur
- Maintenez CMD (Mac) ou CTRL (PC) enfoncé sur votre clavier.
- Cliquez sur l’élément.