--- url: 'https://dxpr.com/fr/hc/documentation/learn-dxpr-builder/layout/nesting' title: 'Ajouter une mise en page imbriquée | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T08:31:23+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Vous pouvez mettre une ligne dans une colonne pour redécouper cette colonne, comme deux icônes côte à côte au-dessus d’un titre. Servez-vous-en quand une colonne a besoin d’une grille plus fine que la ligne autour. L’exemple ajoute une ligne de deux icônes à la colonne du milieu d’une ligne à trois colonnes. Pour votre première ligne, commencez par Ajouter une ligne. tags: - Lay-out image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T09:09:48+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Ajouter une mise en page imbriquée' description: |- Vous pouvez mettre une ligne dans une colonne pour redécouper cette colonne, comme deux icônes côte à côte au-dessus d’un titre. Servez-vous-en quand une colonne a besoin d’une grille plus fine que la ligne autour. L’exemple ajoute une ligne de deux icônes à la colonne du milieu d’une ligne à trois colonnes. Pour votre première ligne, commencez par Ajouter une ligne. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T08:31:23+0000' dateModified: '2026-10-24T09:09:48+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/fr/hc/documentation/learn-dxpr-builder/layout/nesting' articleSection: Lay-out - '@type': WebPage '@id': 'https://dxpr.com/fr/hc/documentation/learn-dxpr-builder/layout/nesting' description: |- Vous pouvez mettre une ligne dans une colonne pour redécouper cette colonne, comme deux icônes côte à côte au-dessus d’un titre. Servez-vous-en quand une colonne a besoin d’une grille plus fine que la ligne autour. L’exemple ajoute une ligne de deux icônes à la colonne du milieu d’une ligne à trois colonnes. Pour votre première ligne, commencez par Ajouter une ligne. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Accueil item: 'https://dxpr.com/fr' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: fr --- [Help Center](/fr/hc)/[Documentation](/fr/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Add content](/hc/documentation/learn-dxpr-builder/elements) /[Lay-out](/hc/documentation/learn-dxpr-builder/layout/overview) # Ajouter une mise en page imbriquée. Learn DXPR BuilderBuild pagesAdd contentLay-out ## In this guide Related guides - [Ajouter un conteneur de calques positionnés](/fr/hc/documentation/learn-dxpr-builder/layout/positioned-layers) - [Ajouter une ligne](/fr/hc/documentation/learn-dxpr-builder/layout/rows-and-columns) - [Tabs](/hc/documentation/learn-dxpr-builder/layout/tabs-element) Vous pouvez mettre une ligne dans une colonne pour redécouper cette colonne, comme deux icônes côte à côte au-dessus d’un titre. Servez-vous-en quand une colonne a besoin d’une grille plus fine que la ligne autour. L’exemple ajoute une ligne de deux icônes à la colonne du milieu d’une ligne à trois colonnes. Pour votre première ligne, commencez par [Ajouter une ligne](/fr/hc/documentation/learn-dxpr-builder/layout/rows-and-columns). ## Ajouter une mise en page imbriquée 1. Ajoutez une section avec une ligne et des colonnes. 2. Survolez une colonne et cliquez sur **+** sur sa barre Colonne. 3. Dans le sélecteur d’éléments, choisissez **Ligne** depuis l’onglet **Mise en page**. 4. La ligne imbriquée apparaît dans la colonne avec ses propres colonnes. 5. Ajoutez des éléments aux colonnes imbriquées comme d’habitude, par exemple une **Icône** dans chacune. 6. Cliquez sur **Save** dans la barre d’outils pour enregistrer la page. Les nouveaux éléments atterrissent en haut de leur colonne, donc la ligne imbriquée se place au-dessus du texte de la colonne. ## Ce que vous voyez Le crayon et l’étoile se placent côte à côte en haut de la colonne du milieu, au-dessus du titre Design. Les colonnes extérieures ne changent pas. Dans l’éditeur, la ligne imbriquée a ses propres barres Ligne et Colonne, à l’intérieur de celles de la ligne extérieure. ```text Section Ligne (1/3 + 1/3 + 1/3) Colonne Texte : Discovery Colonne Ligne (imbriquée, 1/2 + 1/2) Colonne Icône : pencil Colonne Icône : star Texte : Design Colonne Texte : Delivery ``` ## Régler votre mise en page imbriquée Une ligne imbriquée a la même icône de grille et les mêmes réglages que n’importe quelle ligne ; voir [Ajouter une ligne](/fr/hc/documentation/learn-dxpr-builder/layout/rows-and-columns). Ses largeurs sont des parts de la colonne parente, pas de la page. Une colonne demi-largeur qui contient une ligne imbriquée de deux moitiés donne deux zones d’un quart de largeur. Sur les écrans de moins de 768 pixels, les colonnes imbriquées s’empilent comme les extérieures. Donnez à la ligne imbriquée une mise en page téléphone avec **Add screen size** si les icônes doivent rester côte à côte. ### Profondeur d’imbrication maximale Les lignes s’imbriquent sur trois niveaux : une ligne, une ligne dans une de ses colonnes, et une ligne de plus à l’intérieur. Un quatrième niveau est refusé. La même limite vaut pour chaque type de conteneur séparément, comme des Onglets dans des Onglets. Un type ne compte jamais dans la limite d’un autre type. Deux niveaux couvrent la plupart des mises en page. Chaque niveau supplémentaire ajoute des barres de contrôle à viser et rétrécit l’espace pour le contenu. ### Motifs d’imbrication courants | Motif | Construction | |---|---| | Grille de fonctions | Une ligne de trois colonnes, chacune avec une ligne imbriquée : une icône à côté de son texte | | Blocs latéraux | Une ligne 2/3 + 1/3 dont la colonne étroite contient des lignes imbriquées, une par bloc | | Membres de l’équipe | Une ligne de deux colonnes, chacune avec une ligne imbriquée 1/3 + 2/3 : un portrait à côté de la bio | ## Si rien ne s’affiche - **Un avertissement dit que les lignes ne s’imbriquent que sur 3 niveaux.** La colonne se trouve déjà dans deux lignes imbriquées, donc « Element cannot be added ». Ajoutez la ligne à une colonne un niveau au-dessus, ou utilisez un préréglage avec plus de colonnes sur la ligne extérieure. - **La ligne imbriquée se place au-dessus du texte au lieu du dessous.** Les nouveaux éléments atterrissent en haut de leur colonne. Ouvrez **Plus** sur la barre de la ligne imbriquée et choisissez **Move Down**. - **Les icônes s’empilent sur téléphone.** Les colonnes imbriquées s’empilent sous 768 pixels, comme toutes les colonnes. Cliquez sur l’icône de grille de la ligne imbriquée, puis sur **Add screen size**, et choisissez **1/2 + 1/2** pour **Extra small (< 576px)**. ## Et ensuite ? - [Calques positionnés](/fr/hc/documentation/learn-dxpr-builder/layout/positioned-layers) : superposer des éléments comme la grille ne le peut pas. - [Ajouter une ligne](/fr/hc/documentation/learn-dxpr-builder/layout/rows-and-columns) : préréglages de colonnes et mise en page par taille d’écran. - [Onglets](/hc/documentation/learn-dxpr-builder/layout/tabs-element) : empiler des panneaux de contenu au même endroit plutôt que côte à côte.