Éditeur visuel

L'éditeur visuel dispose d'une interface moderne avec quatre zones : • Barre supérieure – Enregistrer, publier, aperçu responsive (mobile/tablette/bureau), changer de thème • Barre latérale (gauche) – Onglets pour Pages, Calques, Médias et Blocs • Canevas (centre) – Votre page telle que les visiteurs la verront • Inspecteur (droite) – Paramètres du bloc sélectionné Cliquez sur un bloc dans le canevas pour le sélectionner. Les paramètres apparaissent à droite.

Le panneau Pages (barre latérale gauche) affiche toutes les pages de votre site. Cliquez sur une page pour l'ouvrir dans l'éditeur. La page actuelle est mise en surbrillance. Vous pouvez rechercher par nom de page.

Le panneau Calques affiche l'arborescence de toutes les sections de la page actuelle. Cliquez sur un calque pour sélectionner la section correspondante dans le canevas (et inversement). Pratique pour les pages complexes avec de nombreuses sections.

• Panneau Médias – Parcourez votre médiathèque et glissez des images sur le canevas • Panneau Blocs – Tous les composants disponibles par catégorie. Glissez un bloc sur le canevas pour l'ajouter Les composants sont regroupés par catégories : Basique, Mise en page, Formulaires et Médias.

Cliquez sur les icônes mobile, tablette ou bureau dans la barre supérieure pour voir l'apparence de votre page sur différentes tailles d'écran. Utilisez Ctrl+1 (mobile), Ctrl+2 (tablette) ou Ctrl+3 (bureau) comme raccourci.

L'éditeur prend en charge les raccourcis clavier pour les actions courantes. Les raccourcis ne fonctionnent pas lorsqu'un champ de texte est actif (sauf Échap). • Ctrl+S – Enregistrer • Ctrl+Maj+P – Publier • Ctrl+Z – Annuler • Ctrl+Maj+Z – Rétablir • Ctrl+K – Ouvrir la palette de commandes • Ctrl+D – Dupliquer la section sélectionnée • Suppr / Retour arrière – Supprimer la section sélectionnée • Ctrl+1 – Vue mobile (375px) • Ctrl+2 – Vue tablette (768px) • Ctrl+3 – Vue bureau (100%) • Ctrl+\ – Afficher/masquer la barre latérale • Ctrl+Maj+\ – Afficher/masquer l'inspecteur • Échap – Désélectionner ou fermer l'overlay

Appuyez sur Ctrl+K (ou Cmd+K sur Mac) pour ouvrir la palette de commandes. Tapez une action pour naviguer rapidement ou exécuter des actions : • Enregistrer / Publier • Changer de thème (sombre/clair) • Aller aux Pages • Ouvrir l'historique des versions • Afficher/masquer la barre latérale ou l'inspecteur • Activer/désactiver le chat IA • Vue mobile / tablette / bureau Naviguez avec les touches fléchées et appuyez sur Entrée pour exécuter une action. Échap ferme la palette.

La barre latérale et l'inspecteur sont redimensionnables. Faites glisser le bord entre un panneau et le canevas pour ajuster la largeur. • Barre latérale : minimum 200px, maximum 400px • Inspecteur : minimum 240px, maximum 480px La largeur s'ajuste en temps réel pendant que vous faites glisser (sans délai).

Sélectionnez une section dans l'éditeur et cherchez le champ « Animation » dans l'inspecteur. Choisissez un preset : • Fade – Apparition progressive • Slide up/down/left/right – Glissement depuis une direction • Scale / Zoom – Effet de zoom • Bounce – Effet de rebond Choisissez dans « Déclencheur » si l'animation se joue au défilement ou au chargement. L'animation n'est visible que sur le site en ligne.

L'éditeur intègre un analyseur de titres qui vous avertit si la hiérarchie de vos titres est incorrecte (ex. un H1 suivi d'un H3 sans H2). C'est important pour l'accessibilité et le SEO.

De nombreux blocs disposent désormais de réglages granulaires qui te permettent de créer des dizaines de variations sans changer de bloc. Ouvre un bloc dans l'inspecteur et tu verras des champs supplémentaires : • HeroSection – layout (centered/left/right/split), mediaType (image/video/none), badge, 2 boutons CTA, overlay, statistiques en ligne • FeatureCardsSection – colonnes (2-6), iconPosition (top/left/inline/none), cardStyle (elevated/bordered/flat/glass), hoverEffect (none/lift/glow/border-color), contentAlign • TestimonialSection – layout (grid/carousel/masonry/single), avatarShape (circle/square/rounded), quoteStyle, affichage des notes • PricingSection – highlightStyle (border/background/badge/glow), toggle de facturation, priceSize, checkStyle • CTABannerSection – layout (centered/left-right/stacked/minimal), backgroundType, badge d'urgence, position de l'icône • FooterSection – layout (simple/columns/centered/minimal), socialPosition, champ newsletter, style de séparateur Tous les réglages sont optionnels — les blocs existants continuent de fonctionner avec leurs valeurs par défaut.

Le bloc VideoHeroSection te permet de définir une vidéo comme arrière-plan. Sources prises en charge : • YouTube – Colle une URL YouTube (ex. https://youtube.com/watch?v=...) • Vimeo – Colle une URL Vimeo • MP4 – Télécharge un fichier .mp4 ou colle une URL directe La vidéo se lance automatiquement (muette, en boucle). Sur mobile, une image poster est affichée pour un chargement plus rapide. Paramètres dans l'inspecteur : • videoUrl – L'URL de ta vidéo • posterImage – Image de secours (affichée pendant le chargement et sur mobile) • overlayOpacity – Opacité de l'overlay sur la vidéo (0-100%) • overlayColor – Couleur de l'overlay • contentAlign – Texte à gauche, centré ou à droite • showVideoOnMobile – Afficher la vidéo aussi sur mobile (désactivé par défaut)

Chaque bloc dispose désormais d'un panneau « Avancé » dans l'inspecteur avec un champ texte _customCSS. Tu peux y écrire du CSS libre qui ne s'applique qu'à ce bloc spécifique. Exemples : • Glassmorphisme : background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); • Ombre personnalisée : box-shadow: 0 20px 60px rgba(0,0,0,0.3); • Animation de bordure : border: 2px solid transparent; transition: border-color 0.3s; Le CSS est automatiquement scopé pour n'affecter que ce bloc, pas le reste de la page.

Chaque bloc prend désormais en charge deux champs d'animation : • _animation – Le type d'animation (fade, slide-up, slide-down, slide-left, slide-right, scale, zoom, bounce) • _animationTrigger – Quand l'animation se joue (scroll ou load) Tu trouveras ces champs dans l'inspecteur sous le bloc sélectionné. L'animation n'est visible que sur le site en ligne, pas dans l'éditeur. Lors d'un import URL, les animations sont automatiquement détectées et attribuées aux bons blocs.

Chaque bloc dispose désormais de plus d'options de style via les StyleOverrides. Tu les trouveras dans l'inspecteur sous « Style » : • textColor – Remplacer la couleur du texte • accentColor – Couleur d'accent pour les mises en valeur • buttonBackground / buttonTextColor / buttonBorderRadius – Style des boutons • paddingTop / paddingBottom – Espace vertical au-dessus/en dessous du bloc • marginTop – Espace au-dessus du bloc • borderColor – Couleur de bordure • backdropFilter – Effets d'arrière-plan (blur, saturate, brightness, etc.) • backgroundImage – Image d'arrière-plan (uniquement des dégradés, pas d'URLs externes) Pour les composants de type carte (FeatureCards, ServiceCards, Pricing, Team, BentoGrid), il y a aussi des états hover : • cardHoverBoxShadow – Ombre au survol • cardHoverTransform – Transformation au survol (ex. scale(1.02)) • cardHoverBorderColor – Couleur de bordure au survol

Tu peux activer un mode sombre par site. Si le site prend en charge le dark mode, une icône soleil/lune apparaît sur le site pour que les visiteurs puissent basculer. Comment le configurer : 1. Va dans les paramètres du site → Design Tokens 2. Remplis les darkColors (couleur d'arrière-plan, couleur du texte, couleur primaire pour le dark mode) 3. Enregistre — le toggle apparaît automatiquement sur le site La préférence du visiteur est enregistrée dans le localStorage et persiste lors de la prochaine visite. Si aucun darkColors n'est configuré, le toggle n'est pas affiché.