Panneau Éléments

Le panneau Éléments vous permet d’ajouter du contenu à votre page. Cliquez sur Éléments en haut de la barre latérale gauche pour l’ouvrir. Il comporte trois onglets : Éléments, Mises en page et Composants.

Faites glisser un élément du panneau sur la zone de travail pour l’ajouter. Il est placé là où vous le relâchez.

Éléments

L’onglet Éléments propose des éléments individuels, regroupés dans des sections que vous pouvez ouvrir et fermer.

Section	Éléments
Essentiels	Bouton, Champ de saisie, Titre, Paragraphe, Conteneur, Carte
Mise en page et navigation	Menu, Barre latérale, Grille, Colonnes, Lignes, Onglets, Fil d’Ariane, Séparateur
Formulaires et champs	Formulaire, Zone de texte, Liste déroulante, Case à cocher, Interrupteur, Bouton radio, Sélecteur de date, Barre de recherche, Import de fichier, Curseur
Affichage de données	Tableau, Liste, Badge, Chronologie, Carte tarifaire
Retours et statut	Alerte, Fenêtre modale, Accordéon
Médias	Image, Vidéo, YouTube, Vimeo, Audio, Icône
Avancé	Texte enrichi, Carrousel
Intégrations	Stripe, Google Maps, Calendly, Typeform

Mises en page

L’onglet Mises en page propose des sections prêtes à l’emploi. Chaque carte présente un schéma simple de la structure de la section, pour vous aider à choisir selon sa disposition. Faites-en glisser une sur votre page, généralement entre deux sections existantes.

Groupe	Mises en page
Bannière principale	Centrée, Disposition en deux parties, Simple, Alignée à gauche, Deux parties inversées, Avec fonctionnalités
Fonctionnalités	Cartes en grille, Grille d’icônes, Liste à cocher, Deux parties avec image, Grille simple, Étapes alternées
Statistiques	Simple à 4 colonnes, Fond bleu, Cartes avec bordure, Grand format avec descriptions, Deux parties avec image, Minimaliste à 3 colonnes
Appel à l’action	Encadré, Bannière avec statistiques, Texte sur image
Tarifs	Offres sur 3 colonnes, Mensuel ou annuel, Offre unique
Témoignages	Grille à 3 colonnes, Citation mise en avant, Cartes sur 2 colonnes
Contact	Formulaire avec coordonnées, Simple et centré
Pied de page	Plusieurs colonnes, Simple et centré

Comment les ajouts s’adaptent à votre page

Les éléments et les mises en page ne sont pas ajoutés avec un style générique. WebTwizz adapte chaque ajout à votre site :

• Votre style. Il reprend les couleurs, les polices, les boutons, les cartes et les espacements déjà présents sur votre page.
• L’emplacement choisi. Il ajuste ses dimensions à l’endroit où vous le déposez, par exemple une cellule de grille ou une colonne dans une ligne.
• Vos pages et votre contenu. Un menu ou une barre latérale est créé à partir de votre site : le nom de votre marque, vos pages et les liens déjà présents dans votre en-tête. Une mise en page conserve la disposition choisie, et ses éléments peuvent reprendre le contenu déjà présent sur votre site. Les onglets, les accordéons et les carrousels sont remplis avec votre contenu lorsque c’est possible. Google Maps affiche votre adresse si votre site en mentionne une.
• La carte voisine. Déposez une carte ou un bouton à côté d’un élément du même type déjà présent : le nouvel élément reprend sa structure, avec son propre contenu.
• Des textes et des images pour votre site. Les textes provisoires, les photos et les icônes sont rédigés ou choisis pour votre site juste après l’ajout.

Un menu prend la forme de l’emplacement où vous le déposez : un en-tête complet en haut de la page, une rangée de liens dans un en-tête ou une colonne de liens dans un pied de page. Une barre latérale déposée directement sur la page se place à côté de votre contenu, avec des liens vers vos pages ou vers les sections d’un site à page unique. Sur téléphone, elle devient un bouton de menu. Si votre site possède déjà un en-tête et que vous en ajoutez un autre, un message vous le signale pour que vous puissiez supprimer celui que vous ne souhaitez pas garder.

La commande Annuler (⌘Z / Ctrl+Z) supprime l’ajout et le contenu généré en une seule étape.

Composants

Les composants sont les parties réutilisables de votre site, comme une barre de navigation, une carte tarifaire ou un pied de page. L’onglet Composants répertorie tous les fichiers de composants du dossier de composants de votre projet, à l’exception des petits éléments de base conservés dans un dossier ui.

Chaque ligne affiche le nom du composant et son fichier, par exemple Button.tsx. Utilisez Rechercher des composants pour filtrer la liste. Faites glisser un composant sur la zone de travail pour l’utiliser. Chaque copie sur votre site renvoie au même composant : toute modification du composant se répercute donc partout où il est utilisé.

Si votre projet n’en contient pas encore, l’onglet affiche Aucun composant.

Création d’un composant

Faites un clic droit sur un élément dans la zone de travail ou dans le panneau Calques, puis choisissez Convertir en composant, ou appuyez sur ⌘⇧K / Ctrl+Shift+K.

Dans la boîte de dialogue Créer le composant, saisissez un nom et cliquez sur Créer. Les noms ne peuvent contenir que des lettres et des chiffres. La première lettre est automatiquement mise en majuscule. L’élément est déplacé dans son propre fichier de composant, et la page utilise le nouveau composant à sa place.

L’option Convertir en composant n’apparaît pas pour un élément qui est déjà un composant.

Renommage et suppression de composants

Faites un clic droit sur un composant dans l’onglet Composants, puis choisissez Renommer ou Supprimer.

L’option Supprimer n’est pas disponible tant que le composant est utilisé sur votre site.

Pendant le travail de l’IA

Le panneau est recouvert d’un message L’IA modifie le contenu pendant que l’IA modifie votre site, pour éviter que vos modifications n’entrent en conflit avec les siennes. Il se déverrouille dès que l’IA a terminé.