Éditeur
Utiliser l’éditeur GrapeJS (glisser-déposer)
Section intitulée « Utiliser l’éditeur GrapeJS (glisser-déposer) »L’éditeur utilise GrapeJS, un constructeur de pages visuel par glisser-déposer.
Présentation de l’interface :
- Panneau gauche — Bibliothèque de blocs. Faites glisser des blocs sur le canevas.
- Canevas — Votre page en direct. Cliquez sur n’importe quel élément pour le sélectionner et le modifier.
- Panneau droit — Gestionnaire de styles pour l’élément sélectionné (couleurs, polices, espacements, etc.).
- Barre d’outils supérieure — Annuler/rétablir, aperçu, enregistrer, basculement de périphérique (bureau/tablette/mobile).
Blocs disponibles :
| Bloc | Ce qu’il ajoute |
|---|---|
| Hero | Bannière pleine largeur avec titre, sous-titre et bouton CTA |
| Intervenants | Grille de cartes d’intervenants (issues de votre liste) |
| Programme | Liste des sessions avec horaires et pistes |
| Billets | CTA d’inscription avec liste des types de billets |
| Sponsors | Grille de logos avec regroupement par niveau |
| FAQ | Liste de questions-réponses en accordéon |
| Fonctionnalités | Grille de 6 cartes de fonctionnalités |
| Compte à rebours | Minuteur en direct jusqu’au début de l’événement |
| CTA | Bannière d’appel à l’action avec bouton |
| En-tête / Navigation | Barre de navigation avec logo et liens |
| Pied de page | Pied de page avec liens et copyright |
| Lieu / Carte | Carte du lieu et adresse de l’événement |
| Carrousel d’images | Galerie photo rotative |
| Partage social | Boutons de partage sur les réseaux sociaux |
Pour ajouter un bloc :
- Faites glisser un bloc depuis le panneau gauche sur le canevas.
- Cliquez sur le bloc pour le sélectionner et modifiez le texte directement sur le canevas.
- Utilisez le panneau droit pour changer les couleurs, les polices, les espacements ou d’autres styles.
Aperçu en direct
Section intitulée « Aperçu en direct »Pour voir à quoi ressemble votre site pour les visiteurs :
- Cliquez sur le bouton Aperçu dans la barre d’outils.
- Un nouvel onglet s’ouvre avec l’aperçu pleine page (sans l’interface de l’éditeur).
- Fermez l’onglet d’aperçu pour revenir à l’édition.
Astuce : Vous pouvez basculer entre les vues Bureau, Tablette et Mobile dans la barre d’outils pour vérifier le design adaptatif.