Bouton
- Tapez /bouton
- Saisissez le texte du bouton
- Collez l'URL dans le champ lien
- Cochez "Nouvel onglet" si lien externe
- Style (contour, rempli) et couleur dans la colonne droite
💡 Un bouton efficace dit exactement ce qui se passe : "Demander un devis" plutôt que "Cliquez ici".
Séparateur
- Tapez /separateur
- 3 styles : ligne, tirets, points
- Couleur et largeur modifiables dans la colonne droite
- Sert à aérer visuellement une longue page
💡 Un séparateur de même couleur que le fond crée un espace discret sans ligne visible.
Colonnes
- Tapez /colonnes
- Choisissez une disposition (50/50, 33/66…)
- Chaque colonne accepte n'importe quel bloc
- Sur mobile, les colonnes s'empilent automatiquement
- Redimensionnez en glissant la bordure entre colonnes
⚠️ Évitez plus de 3 colonnes — illisible sur mobile.
Accordéon
- Tapez /accordéon
- Ajoutez autant d'éléments que nécessaire
- Chaque item a un titre cliquable + contenu masqué
- Bouton + pour ajouter un item supplémentaire
- Style et couleurs dans la colonne droite
💡 Préférez l'accordéon au bloc Détails quand vous avez plusieurs questions à regrouper (FAQ, aide, conditions).
Grille
- Tapez /grille
- Disposition en tableau 2D : lignes ET colonnes
- Choisissez le nombre de colonnes (auto ou fixe)
- Ajoutez des blocs dans chaque cellule
- La grille s'adapte automatiquement au contenu
💡 Préférez la Grille pour des éléments de taille identique (cartes, logos). Pour des largeurs inégales, utilisez Colonnes.
Espacement
- Tapez /espacement
- Définissez la hauteur en px ou em
- Invisible à l'écran — crée un espace vide
- Glissez la poignée pour ajuster
- Plus propre et stable qu'un paragraphe vide
💡 Utilisez l'espacement plutôt que des paragraphes vides — le résultat est plus stable sur tous les écrans.
Repérez ci-dessous quelle mise en page correspond à ce que vous voulez obtenir, puis choisissez le bloc correspondant.
Colonnes
Côte à côte, largeurs libres. S'empile sur mobile.
/colonnesRangée
Éléments compacts alignés horizontalement. Icône + texte, boutons groupés.
/rangéeEmpilement
Blocs verticaux avec espacement uniforme. Peut basculer en rangée sur desktop.
/empilementGroupe
Conteneur avec fond commun. Organisation interne entièrement libre.
/groupeGrille
Cases identiques en lignes ET colonnes. Portfolio, catalogue, cartes.
/grille| Bloc | Direction | Responsive mobile | Quand l'utiliser |
|---|---|---|---|
| Colonnes | Horizontal (fixe) | S'empile selon le thème | 2–3 colonnes de largeurs différentes avec beaucoup de contenu |
| Groupe | Vertical | Oui (toujours) | Appliquer un fond/bordure à une section entière |
| Rangée | Horizontal (fixe) | Non (reste horizontal) | Aligner logo + nav, ou icône + texte sur une ligne |
| Empilement | Horizontal → Vertical | Oui (automatique) | Image + texte côte à côte qui doit fonctionner sur mobile |
| Grille | Grille auto | Oui (colonne unique) | Éléments identiques en mosaïque : cartes, logos, icônes |
| Je veux… | Bloc recommandé | Pourquoi |
|---|---|---|
| Mettre du texte et une image côte à côte | Colonnes | 2 colonnes de largeur libre, s'empile proprement sur mobile |
| Aligner une icône et son texte sur une même ligne | Rangée | Alignement horizontal compact, pas besoin de définir des largeurs |
| Empiler des blocs verticalement avec espacement régulier | Empilement | Espacement uniforme, peut basculer en rangée sur desktop |
| Ajouter un fond coloré autour de plusieurs blocs | Groupe | Conteneur neutre — la mise en page interne est totalement libre |
| Afficher des cartes ou éléments identiques en tableau | Grille | Toutes les cases ont la même taille, s'adapte automatiquement |
| Créer un portfolio avec fond coloré et éléments alignés | Groupe + Grille | Groupe pour le fond global, Grille pour l'alignement des items |
Mise en page avancée : Groupe, Rangée & Empilement
Ces blocs permettent de contrôler finement comment vos contenus s'organisent. Ils sont faits pour les clients à l'aise avec les blocs de base et qui veulent aller plus loin dans la mise en page.
Ces trois blocs servent à regrouper et organiser d'autres blocs. La différence tient à la direction et au comportement du contenu qu'ils contiennent.
Conteneur flexible
Empile les blocs verticalement mais permet d'appliquer un fond coloré, une bordure ou un espacement commun à tout le groupe.
- Fond coloré sur une section
- Bordure ou ombre commune
- Espacement intérieur uniforme
Alignement horizontal
Place les blocs côte à côte sur une même ligne. Idéal pour les éléments qui doivent rester alignés horizontalement.
- Logo + titre + navigation
- Icône + texte sur la même ligne
- Deux boutons alignés côte à côte
Responsive automatique
Comme la Rangée mais bascule automatiquement en vertical sur mobile. Le bloc le plus souple pour les contenus bi-colonnes.
- Image + texte côte à côte (desktop)
- Empilés sur mobile automatiquement
- Idéal pour les sections "présentation"
Bloc Groupe
- Tapez /groupe
- Ajoutez vos blocs à l'intérieur
- Colonne droite → Couleur → fond de couleur sur toute la section
- Colonne droite → Dimensions → padding intérieur
- Option "Pleine largeur" pour étendre au bord de l'écran
💡 Sélectionnez plusieurs blocs existants puis cliquez "Grouper" dans la barre d'outils pour les envelopper.
💡 Le Groupe est le "contenant universel" — il n'impose aucune mise en page. Vous organisez les blocs à l'intérieur comme vous le souhaitez.
Bloc Rangée
- Tapez /rangée
- Ajoutez vos blocs — ils s'alignent automatiquement à l'horizontal
- Colonne droite → Justification → espacement entre éléments
- Colonne droite → Orientation → alignement vertical
- Colonne droite → Option "Empiler sur mobile"
- Cas d'usage : logo + texte, groupe de boutons, liste d'icônes
⚠️ Si les blocs sont trop larges, ils débordent sur mobile. Préférez l'Empilement si le contenu doit s'adapter.
💡 La Rangée aligne horizontalement des éléments compacts sans avoir à définir des largeurs — plus simple que les Colonnes pour des petits éléments.
Bloc Empilement
- Tapez /empilement
- Ajoutez vos blocs — ils s'alignent côte à côte
- Sur mobile, ils s'empilent automatiquement
- Colonne droite → Orientation mobile pour choisir l'ordre
- Colonne droite → Espacement entre les éléments
- Option "Orientation responsive" : passe en Rangée sur grands écrans
- Cas d'usage : listes de services, étapes numérotées, groupes de cartes
💡 En cas de doute entre Rangée et Empilement, choisissez Empilement — plus souple sur mobile.
Conseil : commencez toujours par les blocs de base (Paragraphe, Titre, Image, Colonnes). Les blocs avancés (Groupe, Rangée, Empilement) s'apprennent naturellement quand vous ressentez un besoin précis de mise en page. Ne cherchez pas à tous les maîtriser d'un coup.
Par où commencer ? Commencez par Colonnes — le plus intuitif. Essayez ensuite Rangée pour aligner de petits éléments. Groupe et Empilement viendront naturellement quand vous voudrez contrôler couleurs de fond et espacement. En cas de doute, votre webmaster peut créer un modèle que vous n'aurez plus qu'à remplir.
Mettez en pratique vos connaissance des blocs :
👉 Tuto mise en page pas à pas