Le composant rangées est un bloc qui prend toute la largeur de l'élément. L'utilisation de rangées vous permet de compartimenter simplement votre élément.

Cela vous permettra de gérer plus facilement les espacements de vos blocs, le responsive, le comportement avant/après déblocage. Également, cela vous permettra de créer des colonnes et de gérer leur disposition horizontale et verticale.

Bref, la Rangée c'est LE composant qui vous facilitera la vie ✨

Créer une rangée

Si vous découpez la rangée en 2 (à l'aide des petits [+] sur les côtés), vous pouvez ensuite insérer un ou plusieurs composants les uns en dessous des autres.

Lorsque vous ajoutez une rangée, cela vous donne une colonne.

Définir la taille pour mes rangées

Plusieurs options possibles :

• Flexibles (paramètre par défaut) => le composant occupera toute la largeur de l'espace disponible
• Adapté au contenu => s'adapte selon son contenu
• Taille de colonne définie => Définit une largeur fixe de colonne. la largeur d'une colonne par rapport à l'intégralité de la rangée "découpée" en 12 colonnes.

Exemple :

12 colonnes = 100% de la largeur

6 colonnes = 50% de la largeur

Définir l'alignement

Dans les options de rangée, vous pouvez choisir la Direction des colonnes, elle définit l'axe principal (en ligne ou en colonne) et la direction (normale ou inversée).

Alignement horizontal

Indique la façon dont l'espace doit être réparti entre et autour des composants selon l'axe principal de la rangée.

• Gauche / Droite / Centre : les éléments seront groupés à gauche, à droite ou au centre
• Espace entre les colonnes : les éléments seront répartis équitablement, le bord du premier est aligné sur le début de la rangée et la fin du dernier est alignée sur la fin de la rangée
• Espace autour des colonnes : les éléments seront répartis équitablement, à chaque extrémité, entre le bord de la rangée et le premier/dernier élément on a la moitié de l'espace appliqué entre chaque élément

Alignement vertical

Définit l'alignement vertical des composants dans la rangée selon l'axe principal.

• 4 valeurs possibles : En haut / Centré / En bas / Etiré

Espacement inter-colonnes

Active/désactive les espaces entre le colonne et les bords de la rangée.

Gérer le responsive

Grâce aux options "Responsive" vous êtes en capacité de gérer l'affichage des éléments pour chaque taille d'écran. Vous pouvez facilement pour chaque rangée décider de l'affichage ou non affichage de celle-ci selon les tailles d'écran.

Par exemple ici, on choisit de cacher une rangée, et son contenu pour les petits et très petits écrans.

Pour gérer ces options, cliquez sur l'icône [✏️] de l'élément souhaité et rendez-vous dans l'onglet "Responsive".

Gérer l'affichage avant/après déblocage

Vous avez aussi la capacité de gérer le comportement de chaque élément avant et après déblocage de l'article.

Les éléments sont par défaut visible avant déblocage et masqué après.

es éléments visibles après le déblocage apparaîtront en bas du contenu débloqué.

Mis à jour le : 30/03/2026