Articles sur : Espaces

Widget Bento

Le widget Bento est un conteneur en grille configurable — une coque de mise en page où chaque cellule accueille son propre bloc. Utilisez-le quand vous voulez un ensemble structuré de petits éléments de poids égal : une grille de fonctionnalités, une liste d'équipe, un tableau de bord en tuiles, un panneau « ce qui est inclus ».


Pensez à une boîte bento. Plusieurs compartiments dans un même cadre, remplis indépendamment, à la même forme extérieure.



Comment l'ajouter


  1. Dans la barre de construction flottante en bas de l'éditeur, cliquez sur Bento ou faites-le glisser — il se trouve dans la première rangée de widgets.
  2. Déposez-le dans la Section visée.
  3. Par défaut, une grille 2 × 2 est déposée, chaque cellule affichant un placeholder Ajouter des widgets (ajouter un widget). Cliquez sur une cellule, choisissez un type de widget dans le sélecteur, et la cellule est remplie.



La pastille de sélection — les contrôles Bento


Cliquez sur le Bento (n'importe où en dehors d'une cellule) pour sélectionner le conteneur :


  1. Demander à l'IA (la marque IA en dégradé).
  2. l'édition du contenu (modifier le contenu — icône de réglages) — ouvre la popover Layout & settings (mise en page et réglages) (préréglages, lignes, colonnes — voir plus bas).
  3. Design (icône pot de peinture) — ouvre le panneau Design contextuel sur le conteneur Bento lui-même.
  4. le menu ⋯ (plus) — Dupliquer (dupliquer) · Supprimer (supprimer).


(Pas de Open / S-M-L — ce sont les cellules, pas le conteneur, qui portent le contenu.)


Layout & settings — la popover


Elle s'ouvre via l'icône de réglages de la pastille. Deux façons de façonner la grille :


Mises en page rapides (boutons de préréglage)


Huit mises en page en un clic :


  • 2 cols · 3 cols · 4 cols — une seule ligne divisée en 2 / 3 / 4 cellules.
  • 2×2 · 2×3 · 3×3 — des grilles symétriques sur plusieurs lignes.
  • Sidebar L — une colonne étroite à gauche (⅓) + une zone plus large à droite (⅔).
  • Sidebar R — l'inverse : plus large à gauche, colonne étroite à droite.



Mise en page manuelle (lignes + colonnes)


Sous les préréglages, définissez la grille à la main :


  • Rows (lignes) — un compteur (de 1 à 6).
  • Columns (colonnes) — un compteur (de 1 à 6).
  • Even out sizes (uniformiser les tailles) — le bouton en bas. Réinitialise les largeurs et hauteurs personnalisées vers une répartition égale.


Quand vous changez le nombre de lignes ou de colonnes, les cellules remplies sont conservées dans l'ordre ; les nouvelles cellules apparaissent comme des placeholders Ajouter des widgets vides.


Contrôles par cellule


Les opérations sur les cellules se font directement sur la grille, et non dans un menu par cellule :


  • Cliquez sur + Add widget dans une cellule vide pour ouvrir le sélecteur de widgets.
  • Une cellule remplie affiche deux petits boutons au survol : Replace (remplacer — le crayon, qui rouvre le sélecteur) et Clear (vider — la ✕, qui vide la cellule sans la supprimer).
  • Fusionner / scinder — survolez la frontière entre deux cellules :
    • Le bouton sur le bord droit d'une cellule la fusionne avec la cellule de droite (Merge with cell on the right), ou la scinde à nouveau si elle s'étend déjà.
    • Le bouton sur le bord inférieur d'une cellule la fusionne avec celle du dessous (Merge with cell below), ou la scinde à nouveau.
  • Ajouter une ligne ou une colonne — les boutons + sur le bord droit de la grille (ajouter une colonne) et sur le bord inférieur (ajouter une ligne).
  • Redimensionner — faites glisser la poignée sur le bord droit ou inférieur d'une cellule pour changer la largeur de la colonne ou la hauteur de la ligne. Even out sizes dans la popover de réglages annule cette opération.



Servez-vous des fusions pour casser la symétrie de la grille et créer de l'emphase — par exemple, partez d'une mise en page 2×3 et fusionnez deux cellules horizontalement pour obtenir une tuile héros plus large, en gardant les autres en cartes plus petites.


Ce qui peut aller dans une cellule


Une cellule Bento accepte un ensemble restreint de types de widgets — ceux qui ont du sens dans une tuile :


Text · Field · Document · Video · Contact · Link · Image · Meeting · Recording · KPI · Chart · CTA · Testimonial · FAQ · Placeholder · Room


Step, Timeline, Spacer, Ticker, Table et Signature ne sont pas disponibles dans un Bento — placez-les directement dans une Section.


Quand l'utiliser


  • Grille de fonctionnalités — 6 cellules avec chacune une icône et une courte légende.
  • Présentation de l'équipe — des cartes Contact disposées en grille 2×3.
  • « Ce qui est inclus » — des tuiles décrivant le contenu d'une offre.
  • Mur média mixte — une image héros fusionnée sur deux cellules, avec des liens et du texte d'appui dans le reste.


Quand NE PAS l'utiliser


  • Contenu long — les Bentos compriment le contenu ; si vous avez des paragraphes de récit, utilisez plutôt des widgets Texte dans une Section classique.
  • Un seul élément par ligne — si chaque ligne ne contient qu'un bloc, vous n'avez pas besoin d'un Bento. Empilez simplement vos widgets dans une Section normale avec la Compaction activée.


Articles associés

Mis à jour le : 26/10/2026

Cet article a-t-il répondu à vos questions ?

Partagez vos commentaires

Annuler

Merci !