Concevoir avec la technologie Flexbox

Remarque : ce contenu vaut aussi bien pour le mode flex du Classic Editor que pour l'Editor 2.0. Pour savoir quelle version de l'éditeur vous utilisez, voir « Editor Versions ».

La technologie Flexbox (« flex » en abrégé) est un module de disposition CSS qui organise les éléments dans les sections et les colonnes, en les laissant s'adapter (grandir ou rétrécir) et s'aligner parfaitement à l'intérieur d'un conteneur. Vous concevez ainsi des sections responsives au pixel près, qui s'adaptent à tous les formats d'écran. Dans le Classic Editor, passez en mode flex pour concevoir avec la technologie Flexbox ; dans l'Editor 2.0, cette technologie est active par défaut.

Panneau de design flex

Le panneau de design apparaît à droite en mode flex et regroupe les propriétés de design de l'élément sélectionné (section, colonne, widget, Inner Column ou advanced grid). Chaque élément a des propriétés différentes, ajustables dans le panneau : les options varient donc selon ce que vous sélectionnez. Elles comprennent l'alignement, la disposition, l'espacement, la taille, et plus encore, selon l'élément choisi.

Pour ouvrir le panneau de design, cliquez sur un élément en mode flex, puis sur Modifier le design (le mode flex n'est nécessaire que dans le Classic Editor). Le panneau s'ouvre à droite pour ne pas gêner l'affichage et la modification de votre design. Une fois fermé, vous pouvez le rouvrir en cliquant sur l'icône du panneau de design, dans le coin supérieur droit.

Sections du panneau de design

Le panneau de design comporte 5 sections : Aligner, Mise en page, Espacement, Taille et Animations & EffetsAnimation and Background. Voici une description de chacune et de ce qu'elle permet de faire.

Align

Disponible pour les éléments individuels situés dans une colonne ou une Inner Column. Un élément individuel placé dans une colonne, ou dans une Inner Column verticale avec disposition automatique verticale, peut être aligné à gauche, au centre, à droite, ou étiré horizontalement pour occuper 100 % de la largeur de son conteneur.

Vous pouvez aussi aligner des éléments depuis le menu flottant en cliquant sur l'icône Aligner.

Layout

Presets. Choisissez une disposition prédéfinie pour les éléments d'une section. Les options incluent l'alignement vertical ou horizontal.

Items per row. Si votre contenu occupe plusieurs lignes, utilisez le menu déroulant pour choisir le nombre d'éléments par ligne.

Items fit. Apparaît lorsque vous avez des lignes de contenu et vous permet de définir comment les éléments s'ajustent à l'intérieur des lignes. Pratique si vous avez un nombre impair d'éléments.

Pleine largeur. Anciennement « full bleed », la pleine largeur n'est disponible que pour les sections et ne se modifie que depuis le breakpoint principal (ordinateur). Sur Le, le contenu occupe toute la largeur de l'écran ; sur De remise, sa largeur atteint au maximum 1920 pixels. Par défaut, ce réglage est sur De remise. Pour en savoir plus sur les breakpoints, voir « Screen Sizes and Devices ».

Content Alignment. Permet d'aligner à la fois plusieurs éléments d'une colonne ou d'une Inner Column, en vertical ou en horizontal. Dans le Classic Editor, les éléments ne peuvent être alignés qu'un à un et horizontalement. Pour en savoir plus, voir la section « Alignement et espacement en flex » ci-dessous.

Align Rows. Permet de définir l'alignement des lignes à l'intérieur d'une colonne ou d'une Inner Column. Ce réglage ne modifie pas l'alignement des éléments contenus dans les lignes, seulement celui des lignes elles-mêmes.

Spacing

Space Between Items. Permet de définir en une fois l'espace entre les colonnes ou les widgets ; il s'applique à toutes les colonnes d'une section ou à tous les widgets d'une colonne. Pour les colonnes, si la disposition automatique est verticale, l'espace entre widgets se mesure en pixels ; si elle est horizontale, il se mesure en pourcentages. Cette propriété ne s'applique pas aux éléments situés dans des Inner Columns ou des advanced grids.

Set Margins and Padding. Les marges correspondent à l'espace entre la bordure de l'élément et le bord de la section, de la colonne, de l'Inner Column ou de l'advanced grid qui le contient. Par défaut, les valeurs horizontales de marge et de remplissage sont liées : si vous modifiez la valeur de gauche, celle de droite s'ajuste automatiquement. Pour les délier, cliquez sur l'icône de liaison.

Notez que les marges en ligne des éléments situés dans des colonnes ou des Inner Columns s'ajustent directement sur le canvas. Pour en savoir plus, voir « Outer and Inner Spacing ».

Le remplissage est l'espace intérieur de l'élément. Cliquez sur la valeur de marge ou de remplissage pour en saisir une nouvelle, puis utilisez le menu déroulant pour choisir l'unité de mesure (px, %, vh, vw ou A). Par défaut, l'espacement horizontal se mesure en pourcentages et l'espacement vertical en pixels.

Par exemple, si vous sélectionnez une colonne et réglez son remplissage gauche sur 5 px, vous ajoutez 5 px d'espace entre le bord gauche de la colonne et le bord extérieur des éléments qu'elle contient. Si, pour cette même colonne, vous réglez la marge gauche sur 5 px, vous ajoutez 5 px d'espace entre le bord de la colonne et le bord de la section qui la contient.

Reset Padding or Margin. Lorsque vous cliquez dessus, dans le panneau de design ou le menu flottant, le remplissage ou les marges de l'élément sélectionné reviennent à zéro.

Size

Selon l'élément sélectionné, vous pouvez ajuster la hauteur, la largeur, ainsi que leurs valeurs minimale et maximale. En mode flex, la hauteur se mesure en px, vh, pourcentage et A. En revanche, la hauteur des colonnes flex et l'espace entre colonnes ne se mesurent qu'en pourcentage. Pour en savoir plus sur les unités de taille, voir la section « Unités de taille » ci-dessous.

Les unités de taille par défaut diffèrent selon l'élément. Par défaut, les zones de texte ont une largeur de 100 % et les boutons une largeur de 280px.

Pour les sections, vous ne pouvez modifier que la hauteur. La largeur de la section est déterminée par l'appareil, tandis que la largeur de son contenu dépend du réglage Content Width dans Thème du site. Pour les colonnes, vous ne pouvez modifier que la largeur ; la hauteur est définie par celle de la section ou par les éléments internes. Pour les Inner Columns et les widgets, vous pouvez fixer la hauteur et la largeur, avec leurs valeurs minimale et maximale. Toutes les unités de taille sont utilisables.

Animation and Background

Les propriétés d'animation et d'arrière-plan en mode flex ressemblent à celles du Classic Editor.

Voici la liste des déclencheurs et des animations disponibles :

• Animations pour le déclencheur Scroll :
  • Fade
  • Slide
  • Bounce
  • Roll
  • Rotate
  • Zoom
  • Flip
• Animations pour le déclencheur Entrance :
  • Fade in
  • Slide in
  • Bounce in
  • Rotate in
  • Roll in
  • Zoom in
  • Flip in
  • Flash
  • Pulse
  • Rubber band
  • Shake
  • Swing
  • Tada
  • Wobble

Remarque : la parallaxe est disponible pour tous les widgets et conteneurs, sur tous les formats d'écran. Pour l'activer, cliquez sur l'image, sélectionnez Modifier le design, faites défiler jusqu'à la section Fond du panneau de design et ouvrez le menu Image Position.

L'option de garder une image d'arrière-plan fixe n'est pas disponible sur tablette, mobile ni Mac OS en raison d'une limitation d'iOS.

Panneau de design des advanced grids

Les advanced grids possèdent des propriétés de panneau de design qui n'existent pas pour les autres types d'éléments, car elles permettent des compositions libres et des éléments superposés. Nous vous recommandons de vérifier votre design à différents breakpoints.

Aligner. Les éléments individuels d'une advanced grid peuvent être alignés et étirés dans toutes les directions, car ils ne sont pas contraints par la disposition automatique.

Order. Dans la section Disposition du panneau de design, cette propriété ne s'utilise que lorsqu'une advanced grid contient plusieurs éléments. Elle permet de placer l'élément sélectionné au premier plan, vers l'avant, à l'arrière-plan ou vers l'arrière. Pour en savoir plus, voir la section « Créer des éléments superposés en flex » ci-dessous.

Rearrange Layout. Permet de choisir comment les colonnes et les lignes s'organisent dans l'advanced grid pour créer une disposition.

Customize Layout. Permet de choisir comment les colonnes et les lignes s'organisent dans l'advanced grid pour créer une disposition.

Pin. Permet de fixer la position de l'élément dans la grille. Une fois définie, l'élément conserve la même position même si la taille de la grille change.

Grid Location. Disponible pour les éléments situés dans des advanced grids divisées en colonnes ou en lignes pour créer une disposition. Indique où se trouve l'élément dans la grille.

Conserver les proportions. Sur Le, garantit que les éléments d'une advanced grid conservent leurs proportions même si la taille de la grille change.

Le widget Image comporte lui aussi une option Keep proportion, qui préserve ses proportions d'origine.

Unités de taille

Remarque : ce contenu vaut aussi bien pour le mode flex du Classic Editor que pour l'Editor 2.0. Pour savoir quelle version de l'éditeur vous utilisez, voir « Editor Versions ».

Bien comprendre et utiliser les unités de taille est essentiel pour créer des mises en page à la fois esthétiques et responsives sur les différents appareils et formats d'écran. Le panneau de design, situé à droite du canvas dans l'Editor 2.0 ou en mode flex dans le Classic Editor, est le centre de contrôle des propriétés de design des éléments sélectionnés : sections, colonnes, widgets, Inner Columns et advanced grids. Cet article passe en revue les unités de taille disponibles dans le panneau et donne des exemples concrets d'utilisation.

De plus, l'Editor 2.0 vous permet de configurer les unités de taille depuis le breakpoint principal (ordinateur), ce qui garantit l'adaptation à tous les formats d'écran. Vous pouvez ajuster les unités sur les breakpoints tablette et mobile sans toucher aux autres. Pour en savoir plus, voir « Screen Sizes and Devices ».

Pourcentage (%) pour une mise à l'échelle souple et proportionnelle

Le pourcentage (%) est une unité de taille dynamique qui détermine la proportion du conteneur (section, colonne, Inner Column ou advanced grid) occupée par l'élément selon les formats d'écran. En général, la largeur des éléments flex est exprimée en pourcentages par défaut. Les pourcentages sont conseillés lorsque vous voulez garder un design cohérent sur tous les formats sans ajuster les pixels à la main à chaque breakpoint.

Par exemple, en réglant les deux colonnes d'une mise en page à deux colonnes sur 50 % de largeur, elles s'ajustent automatiquement à 50 % sur tous les formats d'écran.

Les pourcentages sont utiles pour conserver la taille relative des éléments selon les dimensions d'écran : les éléments se mettent à l'échelle proportionnellement à leur conteneur parent (section ou colonne), ce qui garantit une apparence uniforme.

Par exemple, une image réglée sur 50 % de largeur dans une colonne occupera toujours la moitié de la largeur de cette colonne, quel que soit le format d'écran. Ainsi, même si la colonne et l'image paraissent plus étroites sur mobile que sur ordinateur, l'image garde sa largeur proportionnelle. De même, régler le remplissage entre colonnes sur 4 % assure un espacement cohérent par rapport aux colonnes et aux autres éléments, qui s'adapte aux différents formats d'écran.

Pixels (px) pour des dimensions fixes et stables

Les pixels (px) offrent une unité de mesure fixe, insensible aux variations de taille des appareils. Par exemple, un bouton réglé sur 250px garde sa taille sur mobile, tablette et ordinateur.

Cependant, se fier uniquement aux pixels peut nuire à l'adaptabilité et obliger à des ajustements manuels à chaque breakpoint. Les pixels garantissent une taille constante, mais mieux vaut privilégier les pourcentages pour un design responsif. Cette approche réduit les ajustements de pixels un à un aux breakpoints, simplifie le travail de design et améliore l'adaptabilité générale.

Largeur de la fenêtre d'affichage (vw) pour une mise à l'échelle selon la largeur de l'écran

La largeur de la fenêtre d'affichage (vw) ajuste dynamiquement les éléments selon la largeur de l'écran (viewport), pour une mise à l'échelle proportionnelle sur les différents appareils. Par exemple, attribuer 50 vw à un élément lui réserve la moitié de la largeur de l'écran.

Hauteur de la fenêtre d'affichage (vh) pour une mise à l'échelle selon la hauteur de l'écran

La hauteur de la fenêtre d'affichage (vh) met les éléments à l'échelle selon la hauteur de l'écran (viewport). Par exemple, attribuer 25 vh à un élément lui réserve un quart de la hauteur de l'écran. C'est particulièrement utile pour les arrière-plans plein écran (100 % vh) ou les éléments qui doivent se caler sur la hauteur de l'écran.

Automatique (A) pour une adaptation au contenu

L'unité automatique s'ajuste dynamiquement selon la hauteur du contenu, ce qui la rend adaptée aux blocs de texte et à la hauteur des colonnes : ils se redimensionnent en fonction de leur contenu. En général, les blocs de texte utilisent l'unité automatique par défaut. Les éléments s'agrandissent ou se réduisent ainsi sans heurt, tout en gardant des proportions harmonieuses.

Comprendre la relation parent-enfant des éléments imbriqués

La relation parent-enfant régit l'organisation des éléments : les éléments principaux, comme les headers, les bodies, les menus et les footers, contiennent au moins une section. Chaque section abrite à son tour au moins une colonne, qui sert de conteneur à divers éléments (texte, images) ou à des widgets comme les Inner Columns et les Advanced Grids.

Les éléments parents conservent leurs réglages de design, ce qui permet de contrôler leur apparence de façon centralisée. Toutefois, si une section d'un élément parent a ses propres réglages de couleur d'arrière-plan, l'arrière-plan de l'élément parent peut ne pas refléter cette personnalisation. Cette structure hiérarchique apporte une organisation méthodique du site, facilite un travail de design efficace et donne une présentation cohérente du contenu.

Sélectionner et naviguer parmi les éléments flex sur le canvas

La hiérarchie des éléments suit une structure par défaut : les sections contiennent des colonnes, et les colonnes contiennent des widgets. Vous ne pouvez donc pas ajouter un widget directement à une section sans qu'il soit imbriqué dans une colonne. Il existe plusieurs façons de sélectionner un élément (section, colonne ou widget) :

• Sélection directe des objets sur le canvas de l'éditeur : vous interagissez directement avec les éléments sur le canvas, ce qui facilite l'identification et la modification de composants précis sans avoir à parcourir de nombreux panneaux ou menus. Dès que vous sélectionnez un objet, le panneau de design, avec toutes les options de design de cet élément, apparaît à droite.
• Fil d'Ariane du menu flottant : vous pouvez revenir aux conteneurs parents grâce au fil d'Ariane du menu flottant. Lorsque vous sélectionnez un élément précis, il suffit de cliquer sur le fil d'Ariane bleu en haut de l'élément pour revenir à son conteneur parent.
• Fil d'Ariane en haut du panneau de design : le panneau de design comporte lui aussi des options de navigation en haut, sous forme de fil d'Ariane. Il vous permet de passer rapidement d'une section ou d'un élément à l'autre sur le canvas.
• Panneau des calques : lorsque vous sélectionnez un élément, le panneau des calques met en évidence les calques associés. En même temps, l'éditeur fournit un repère visuel qui facilite la navigation sur le canvas.

Sections flex

Les sections flex sont des lignes dotées de deux colonnes flex par défaut, qui forment une disposition de base. Une fois une section ajoutée, vous pouvez ajouter, supprimer ou réorganiser des colonnes, des Inner Columns ou des advanced grids pour obtenir la disposition voulue. Vous ajoutez ensuite des widgets à cette disposition.

Ajouter une section flex

Pour ajouter une section :

1. Survolez l'espace entre deux lignes, puis cliquez sur Ajouter une section. Vous pouvez aussi faire un clic droit pour ouvrir le menu contextuel, cliquer sur Ajouter, puis sélectionner Flex section.
2. Dans le panneau latéral, cliquez sur Sections Flex.
3. Sélectionnez la section flex souhaitée.
4. Cliquez sur Enregistrer.

Remarque : l'option de garder une image d'arrière-plan fixe n'est pas disponible sur tablette et mobile en raison d'une limitation d'iOS.

Enregistrer une section flex

Pour enregistrer une section :

1. Survolez la section souhaitée et cliquez sur Flex Section, dans le coin supérieur gauche de la section.
2. Cliquez sur Enregistrer en tant que section, puis sur Select only this row.
3. Saisissez un nom de section, choisissez la catégorie dans laquelle elle sera enregistrée, puis définissez ses autorisations.
4. Cliquez sur Commencer à créer.
5. Cliquez sur Terminé.

Supprimer une section flex

Pour supprimer une section, faites un clic droit pour ouvrir le menu contextuel et sélectionnez Supprimer. Vous pouvez aussi cliquer sur l'icône de suppression du menu flottant.

Colonnes flex

Une fois une section ajoutée à votre site, vous pouvez y ajouter des colonnes pour contenir des widgets. Toutes les sections contiennent des colonnes par défaut, mais vous pouvez en ajouter d'autres.

Notez que le nombre maximal de colonnes est de 8.

Remarque : lorsque vous ajoutez un élément à une colonne, sa position dépend des réglages de disposition automatique. Pour changer la direction de la disposition automatique, ouvrez le panneau de design et, dans la section Mise en page, choisissez horizontal ou vertical.

Ajouter une colonne flex

Pour ajouter une colonne :

1. Cliquez pour sélectionner une colonne existante.
2. Dans le menu flottant, cliquez sur l'icône à trois points horizontaux, puis sélectionnez Add column. Vous pouvez aussi cliquer sur l'icône plus, sur le bord gauche ou droit de la colonne.

Dupliquer une colonne flex

Vous pouvez dupliquer une colonne : la copie s'ajoute à droite de l'originale. Vous ne pouvez pas ajouter de colonnes qui dépassent 100 % de la largeur.

Pour dupliquer une colonne :

1. Cliquez pour sélectionner une colonne.
2. Dans le menu flottant, cliquez sur l'icône Dupliquer. Vous pouvez aussi faire un clic droit sur la colonne pour ouvrir le menu contextuel et sélectionner Dupliquer.

Supprimer une colonne flex

Vous pouvez supprimer une colonne pour la retirer de la section. Chaque section doit toutefois contenir au moins une colonne : vous ne pouvez donc pas supprimer la dernière colonne d'une section.

Pour supprimer une colonne :

1. Cliquez pour sélectionner la colonne.
2. Dans le menu flottant, cliquez sur l'icône Supprimer. Vous pouvez aussi faire un clic droit sur la colonne pour ouvrir le menu contextuel et sélectionner Supprimer.

Ajouter des widgets en flex

Vous pouvez ajouter des widgets aux colonnes, aux Inner Columns ou aux advanced grids de plusieurs façons. Si vous êtes déjà en mode flex, ajoutez-les directement depuis le panneau latéral en cliquant sur Widgets, puis en sélectionnant le widget souhaité.

Remarque : en mode flex dans le Classic Editor, vous ne pouvez pas glisser-déposer un widget dans une colonne flex depuis le panneau latéral.

Pour ajouter un widget :

1. Cliquez sur une colonne, une Inner Column ou une advanced grid pour la sélectionner.
2. Cliquez sur l'icône plus au centre de la colonne, de l'Inner Column ou de l'advanced grid. Vous pouvez aussi cliquer sur l'icône plus du menu flottant.
3. Sélectionnez un widget.

Vous pouvez aussi ajouter des widgets depuis le panneau des calques.

Pour ajouter un widget depuis le panneau des calques :

1. Cliquez pour sélectionner une colonne.
2. Dans le panneau latéral, cliquez sur Calques.
3. Dans le panneau des calques, survolez la colonne, l'Inner Column ou l'advanced grid à laquelle ajouter un widget, puis cliquez sur l'icône plus.
4. Sélectionnez un widget.

Alignement et espacement en flex

L'alignement et l'espacement se combinent pour vous aider à réaliser vos designs.

Aligner plusieurs éléments

En travaillant avec flex, vous gagnez du temps en alignant plusieurs éléments à la fois dans une même section, colonne ou Inner Column.

Pour aligner plusieurs éléments :

1. Sélectionnez la section, la colonne ou l'Inner Column, puis cliquez sur l'icône d'alignement du menu flottant.
2. Choisissez l'alignement souhaité.

Le panneau de design propose d'autres options d'alignement, comme changer la direction de la disposition automatique, étirer les éléments, et plus encore.

Pour aligner des éléments depuis le panneau de design :

1. Faites un clic droit sur la section, la colonne ou l'Inner Column souhaitée, puis sélectionnez Modifier le design.
2. Dans la section Mise en page du panneau de design, sous Alignement du contenu, choisissez l'alignement vertical et horizontal souhaité.

Lorsque vous alignez du texte depuis le menu flottant ou le panneau de design, l'alignement s'applique à la fois au texte et à la balise div.

Aligner un seul élément

Il est possible d'aligner plusieurs éléments à la fois, mais parfois vous voulez seulement changer l'alignement d'un élément dans une colonne flex sans toucher aux autres.

Pour aligner un seul élément :

1. Sélectionnez l'élément souhaité.
2. Dans le menu flottant, cliquez sur l'icône d'alignement et choisissez l'alignement souhaité. Vous pouvez aussi faire un clic droit sur l'élément et sélectionner Modifier le design : le panneau de design s'ouvre et vous permet de choisir l'alignement dans la section Aligner.

Espace entre les éléments

Vous pouvez définir l'espace horizontal ou vertical entre les colonnes d'une même section flex, ou entre les widgets d'une colonne, d'une Inner Column ou d'une advanced grid.

Pour définir l'espace entre les éléments :

1. Faites un clic droit sur la section, la colonne, l'Inner Column ou l'advanced grid souhaitée, puis sélectionnez Modifier le design.
2. Dans la section Espacement du panneau de design, sous Espacement entre les éléments, saisissez la valeur ou utilisez le curseur pour définir, dans le champ Spacing between items, le pourcentage d'espace horizontal ou la valeur en pixels d'espace vertical souhaité entre les éléments.

Vous pouvez réinitialiser le remplissage des sections comme des colonnes en cliquant sur l'icône Reset padding du menu flottant.

Créer des éléments superposés en flex

Les sections flex créent une disposition et alignent les objets automatiquement, ce qui vous aide à concevoir de belles sections vite et facilement. Mais pour un design plus complexe, avec des objets superposés ou une composition libre, il vous faut une advanced grid. Les advanced grids vous permettent de placer les éléments en composition libre, sans disposition automatique. Nous vous recommandons donc de vérifier votre design sur tous les breakpoints.

Pour créer des éléments superposés :

1. Cliquez pour sélectionner une colonne flex.
2. Dans le menu flottant ou dans la colonne flex, cliquez sur l'icône plus.
3. Dans la section des éléments flex, sélectionnez Advanced grid (auparavant appelé « containers »). Pour respecter les bonnes pratiques, faites glisser les bords de l'advanced grid afin qu'elle occupe toute la largeur de la colonne flex.
4. Dans la section Mise en page du panneau de design, choisissez une grille prête à l'emploi dans Réorganiser la structure. Pour créer votre propre grille, utilisez les menus déroulants Colonnes et Lignes de Personnaliser la structure afin d'ajouter des colonnes ou des lignes.
5. Dans le menu flottant, cliquez sur l'icône plus, puis sélectionnez les widgets souhaités et disposez-les dans l'advanced grid.
6. Cliquez pour sélectionner un élément et, dans la section Organiser du panneau de design, choisissez Placer à l'avant, Faire avancer, Faire reculer ou Envoyer à l'arrière.

Nous vous recommandons de vérifier votre design à chaque breakpoint lorsque vous utilisez des advanced grids. Avec des éléments superposés, vous devrez parfois ajuster le design sur certains breakpoints.

Widgets Inner Column et Advanced Grid

En conception web, le choix du bon système de disposition influe beaucoup sur l'expérience utilisateur, surtout lorsque vous intégrez à un site des éléments de disposition comme l'Inner Column et l'Advanced Grid.

Le widget Inner Column est recommandé pour :

• Les mises en page modulaires : parfait pour créer des mises en page modulaires où le contenu s'enchaîne de façon linéaire, idéal pour les menus de navigation, les cartes ou les listes.
• Le design responsif : excelle dans la création de designs responsifs qui s'adaptent sans effort aux différents formats d'écran et appareils, avec un alignement et une lisibilité optimaux.
• Le contenu dynamique : très adapté au contenu dynamique, dont la longueur ou la taille peut varier, car il permet de contrôler dynamiquement le comportement et la taille des éléments dans un conteneur.
• Les mises en page imbriquées : la capacité d'imbrication de l'Inner Column la rend idéale pour des mises en page imbriquées complexes. Vous pouvez imbriquer d'autres Inner Columns dans le conteneur extérieur selon vos besoins, ce qui offre souplesse et adaptabilité dans l'organisation des hiérarchies de contenu. De même, l'Advanced Grid permet d'imbriquer des widgets, des Inner Columns et même d'autres Advanced Grids dans sa structure.

Le widget Advanced Grid est recommandé pour :

• Les structures de mise en page complexes : indispensable pour créer des mises en page élaborées à plusieurs lignes et colonnes, avec un contrôle précis du placement et de la taille des éléments.
• Les designs non linéaires : parfait pour les mises en page non linéaires où les éléments doivent être placés indépendamment de leur ordre d'origine, pour des compositions créatives et des dispositions asymétriques. Les éléments peuvent ainsi être placés et disposés selon les besoins du design.
• Le design web responsif : bien qu'elle demande une planification soignée, l'Advanced Grid offre des outils puissants pour créer des designs responsifs. Vous pouvez définir des ajustements précis, comme réordonner les colonnes, faire couvrir plusieurs cellules à un élément ou modifier les espaces de la grille selon la taille de la fenêtre, pour une présentation optimale sur chaque appareil.

Quand utiliser un widget Inner Column plutôt qu'un widget Advanced Grid ?

Les Inner Columns conviennent surtout aux mises en page modulaires, notamment quand vous voulez un contrôle précis de chaque élément d'une section ou une disposition automatique. Notez toutefois que, si les Inner Columns préservent l'intégrité de la section, y déplacer des widgets est moins souple qu'avec les Advanced Grids.

Les Inner Columns permettent de contrôler les lignes ou les colonnes séparément, idéales pour les mises en page à une dimension. Les Advanced Grids permettent de manipuler lignes et colonnes en même temps, avec un contrôle complet de toute la structure, idéales pour les mises en page à deux dimensions.

L'Advanced Grid (CSS Grid) peut avoir un léger avantage pour gérer les mises en page complexes, car elle optimise la structure du DOM, l'efficacité du rendu, le chargement des ressources, l'adaptabilité et réduit les requêtes HTTP. Les Inner Columns, bien qu'efficaces, peuvent impliquer davantage d'éléments HTML imbriqués, d'où des temps de rendu parfois un peu plus longs qu'avec les Advanced Grids.

Vous pouvez aussi utiliser à la fois le widget Inner Column et le widget Advanced Grid dans une même section et sur tout le site pour obtenir les designs voulus. Il s'agit de trouver l'équilibre entre la structure d'ensemble et les détails plus fins de l'organisation du contenu.

Relations parent-enfant entre les widgets

Comprendre les relations parent-enfant est essentiel pour bien exploiter les Inner Columns et les Advanced Grids. Dans ces systèmes de disposition, la colonne qui héberge les éléments joue le rôle de parent, tandis que les éléments qu'elle contient, comme des widgets supplémentaires, sont considérés comme des enfants. Cette relation détermine la position et l'alignement des éléments dans la mise en page, ce qui assure la cohérence et la solidité de votre design web.

Notez qu'il n'est pas toujours nécessaire d'ajouter des Inner Columns. Souvent, une seule colonne suffit dans bien des cas. L'Inner Column facilite le placement des éléments à l'horizontale ou à la verticale. Il faut pour cela une section qui serve de conteneur flex et une colonne qui héberge les Inner Columns, les deux types de colonnes jouant le rôle d'éléments flex, respectivement parent et enfant.

L'Advanced Grid permet de placer les éléments à la verticale comme à l'horizontale. Il faut pour cela une section qui serve de conteneur et une Advanced Grid qui déclare la disposition en grille sur l'élément parent ou conteneur, de sorte que tous ses enfants deviennent des éléments de la grille.