Présentation de l’éditeur

L’éditeur vous permet de concevoir et de créer votre site. Votre site fonctionne en direct dans la zone centrale. Les panneaux de gauche permettent d’ajouter des éléments, de gérer les pages et de discuter avec l’IA. Le panneau de droite permet de modifier le style de l’élément sélectionné.

La barre d’outils

De gauche à droite :

• Le logo WebTwizz ouvre le menu du logo : Aller au tableau de bord, Fichier, Modifier, Historique des versions, Paramètres du site, Préférences (thème clair, sombre ou du système), Aide (documentation et raccourcis clavier) et Paramètres du compte.
• Parcourir et Modifier changent le comportement de la zone de travail. Consultez Parcourir et Modifier ci-dessous.
• Le bouton Code (le bouton <>) ouvre l’éditeur de code. Cliquez à nouveau dessus pour revenir à la zone de travail.
• Le menu de largeur (l’icône d’appareil) définit la largeur de la zone de travail. Consultez Design adaptatif.
• La barre de chemin indique la page sur laquelle vous vous trouvez, comme / ou /about. Cliquez dessus et saisissez un chemin pour accéder à une autre page. Le bouton d’actualisation qu’elle contient recharge la zone de travail.
• Annuler et Rétablir.
• Aperçu (l’icône en forme d’œil) ouvre votre site dans un nouvel onglet du navigateur. Consultez Aperçu et publication.
• Enregistrer indique si votre travail est enregistré. Une fois tout enregistré, une coche s’affiche et un clic dessus ouvre l’historique des versions. Consultez Enregistrer votre travail.
• Passer à une offre supérieure apparaît avec l’offre Free.
• Publier ouvre le panneau de publication.

Lorsque Paramètres ou Données est ouvert, la barre de chemin est masquée et la partie droite de la barre d’outils affiche uniquement Aperçu, Passer à une offre supérieure et Publier.

La barre latérale gauche

Chaque icône de la barre de gauche ouvre un panneau :

• Éléments permet d’ajouter des éléments, des mises en page et des composants. Consultez Panneau Éléments.
• Assistant IA ouvre la discussion avec l’IA.
• Calques affiche tous les éléments de la page sous forme d’arborescence. Consultez Panneau Calques.
• Pages permet d’ajouter, de renommer et d’organiser les pages. Consultez Panneau Pages.
• Données permet de gérer vos collections et vos sources de données. Consultez Données et CMS.
• Paramètres ouvre les paramètres du site.

Cliquez à nouveau sur l’icône du panneau ouvert pour replier la barre latérale, ou appuyez sur ⌘B / Ctrl+B.

La zone de travail

La zone de travail affiche votre site réel, en cours d’exécution. Les modifications apparaissent dès que vous les faites.

Parcourir et Modifier

Utilisez les boutons Parcourir et Modifier de la barre d’outils pour changer de mode.

• Parcourir vous permet d’utiliser le site comme un visiteur. Les liens permettent de naviguer, les boutons et les menus fonctionnent, et les formulaires peuvent être envoyés. Aucun élément n’est sélectionné.
• Modifier vous permet de modifier la page. Survolez un élément pour le mettre en évidence, cliquez pour le sélectionner, double-cliquez sur du texte pour le modifier, faites un clic droit pour ouvrir le menu contextuel et faites glisser les éléments pour les déplacer.

L’éditeur mémorise le dernier mode utilisé. À la première ouverture, il démarre en mode Parcourir. L’ouverture du panneau Calques active le mode Modifier. Les boutons sont indisponibles pendant que l’IA travaille, dans l’éditeur de code et dans l’historique des versions.

Le panneau de modification

Lorsque vous sélectionnez un élément, le panneau de modification à droite affiche ses styles et ses paramètres. Appuyez sur ⌘E / Ctrl+E pour l’afficher ou le masquer, ou cliquez sur la flèche du bord droit. Consultez Panneau de modification.

Modifications rapides avec Modifier avec l'IA

Sélectionnez un élément et appuyez sur ⌘K / Ctrl+K pour ouvrir la barre Modifier avec l'IA en dessous. Saisissez une modification comme « plus grand » ou « texte bleu marine » et voyez le résultat sur la page avant de le choisir. Consultez Modifier avec l'IA.

Sur téléphone

Sur un écran plus étroit qu’une tablette, l’éditeur est conçu pour discuter avec l’IA et vérifier le résultat :

• Les onglets Discussion et Aperçu en haut permettent de passer de la discussion avec l’IA à votre site. Appuyez à nouveau sur Aperçu pour le recharger.
• La zone de travail fonctionne comme le mode Parcourir. La sélection d’éléments, le panneau de modification et l’éditeur de code nécessitent un écran plus large.
• Le bouton d’enregistrement se trouve à côté du logo. Votre travail est aussi enregistré automatiquement environ 30 secondes après votre dernière modification.
• Le menu du logo contient un menu Aperçu pour ouvrir l’aperçu dans un nouvel onglet, le recharger ou redémarrer le serveur d’aperçu. Les paramètres se trouvent dans Paramètres du site, et Retour à l'éditeur vous ramène à votre site.

Raccourcis essentiels

Action	Mac	Windows
Annuler	⌘Z	Ctrl+Z
Rétablir	⌘⇧Z	Ctrl+Shift+Z
Enregistrer	⌘S	Ctrl+S
Modifier avec l'IA (élément sélectionné)	⌘K	Ctrl+K
Supprimer l’élément	⌫	Backspace ou Delete
Désélectionner	Esc	Esc
Afficher ou masquer le panneau de modification	⌘E	Ctrl+E
Afficher ou masquer la barre latérale	⌘B	Ctrl+B
Historique des versions	⌘H	Ctrl+H

Consultez Menu contextuel et raccourcis pour la liste complète.