L'interface de personnalisation des pages permet d'ajuster et de modifier une ou plusieurs pages spécifiques, tout en offrant la possibilité de définir des styles globaux. Contrairement à la [[Personnalisation du thème (global)]], où les ajustements s'appliquent globalement via des prompts, cette interface offre un contrôle plus granulaire. Vous pouvez intervenir de manière très précise, manuellement ou avec des prompts, sur n'importe quel élément du thème ou d'une page. Que ce soit pour un ajustement local ou pour appliquer des changements globaux, l'interface garantit une personnalisation flexible et intuitive, adaptée à vos besoins spécifiques. ![[personnalisation-des-pages-interface.png]] Voici la description des 11 points de l'interface : 1. **Editeur CSS** : Menu latéral regroupant les paramètres CSS (arrière-plan, typographie, bordures, espacements, transformations, etc.) pour personnaliser les styles des éléments sélectionnés. 2. **Mode d'affichage** : Options pour prévisualiser la page dans différents modes d'écran (desktop, tablette, mobile), permettant une personnalisation responsive. 3. **Mode édition/navigation** : Bouton permettant de basculer entre le mode d'édition (modifications de la page) et le mode navigation (interaction avec la page sans modification). 4. **Annuler/rétablir** : Contrôles pour revenir en arrière ou rétablir les modifications effectuées, facilitant l'expérimentation sans risque. 5. **Selection Mode** : Menu déroulant pour définir la portée des sélections (par exemple, sélectionner uniquement l’élément actuel ou tous les éléments identiques de la page ou du thème). 6. **Selector** : Indicateur affichant les classes ou identifiants CSS appliqués à l'élément sélectionné, utile pour les modifications ciblées. 7. **Classes - State** : Gestion des classes CSS et des états (hover, active, etc.), permettant d’ajouter ou de modifier des styles dynamiques. 8. **Rédiger un prompt** : Zone d'entrée pour rédiger des prompts permettant de générer ou d'appliquer des styles automatiquement grâce à l'IA. 9. **Free Style** : Option permettant d’activer ou désactiver l’édition libre pour l'IA ce qui donne plus de possibilités à l'IA qui sera en mesure de générer des CSS sur-mesure au lieu d'utiliser les styles du thème. 10. **Generate** : Bouton pour exécuter un prompt ou générer les styles associés à une modification demandée. 11. **Arborescence DOM** : Affichage visuel de la structure hiérarchique de la page, permettant de naviguer et de sélectionner facilement des éléments spécifiques.