---
url: 'https://dxpr.com/fr/hc/documentation/learn-dxpr-builder/layout/rows-and-columns'
title: 'Ajouter une ligne | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:31:31+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Une ligne divise une section en colonnes, pour mettre du contenu
  côte à côte : trois services, une photo à côté de son texte, une barre
  latérale à côté d’un article. Vous choisissez la division parmi douze
  préréglages et pouvez donner aux téléphones leur propre mise en page.
  Lisez cette page pour ajouter une ligne ; pour une ligne dans une
  colonne, voir
  Ajouter une mise en page imbriquée.
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 ligne'
      description: |-
        Une ligne divise une section en colonnes, pour mettre du contenu
        côte à côte : trois services, une photo à côté de son texte, une barre
        latérale à côté d’un article. Vous choisissez la division parmi douze
        préréglages et pouvez donner aux téléphones leur propre mise en page.
        Lisez cette page pour ajouter une ligne ; pour une ligne dans une
        colonne, voir
        Ajouter une mise en page imbriquée.
      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:31+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/rows-and-columns'
      articleSection: Lay-out
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/fr/hc/documentation/learn-dxpr-builder/layout/rows-and-columns'
      description: |-
        Une ligne divise une section en colonnes, pour mettre du contenu
        côte à côte : trois services, une photo à côté de son texte, une barre
        latérale à côté d’un article. Vous choisissez la division parmi douze
        préréglages et pouvez donner aux téléphones leur propre mise en page.
        Lisez cette page pour ajouter une ligne ; pour une ligne dans une
        colonne, voir
        Ajouter une mise en page imbriquée.
      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 ligne.

 Learn DXPR BuilderBuild pagesAdd contentLay-out

   ## In this guide

 Related guides

- [Ajouter une mise en page imbriquée](/fr/hc/documentation/learn-dxpr-builder/layout/nesting)
- [Ajouter une section](/fr/hc/documentation/learn-dxpr-builder/layout/sections)
- [Adapter votre mise en page aux téléphones](/fr/hc/documentation/learn-dxpr-builder/design/responsive-design)

Une ligne divise une section en colonnes, pour mettre du contenu côte à côte : trois services, une photo à côté de son texte, une barre latérale à côté d’un article. Vous choisissez la division parmi douze préréglages et pouvez donner aux téléphones leur propre mise en page. Lisez cette page pour ajouter une ligne ; pour une ligne dans une colonne, voir [Ajouter une mise en page imbriquée](/fr/hc/documentation/learn-dxpr-builder/layout/nesting).

## Ajouter une ligne

L’exemple ajoute une ligne de trois colonnes à une section, une pour chaque service offert par une équipe.

1. Cliquez sur **+** sur une section pour ouvrir le sélecteur d’éléments.
2. Choisissez **Ligne** depuis l’onglet **Mise en page**. Elle arrive avec deux colonnes égales.
3. Cliquez sur l’icône de grille (**Column layout**) sur la barre de contrôle de la ligne, choisissez un préréglage de colonnes comme trois colonnes égales, et cliquez sur **Save**.
4. Cliquez sur **+** dans une colonne pour y ajouter du contenu.
5. Cliquez sur **Save** dans la barre d’outils pour enregistrer la page.

  L’icône de grille se trouve juste après la poignée de glissement de la ligne. Un préréglage change les colonnes dès que vous cliquez dessus ; **Cancel** remet l’ancienne mise en page.

## Ce que vous voyez

Les trois services se placent côte à côte, chaque colonne faisant un tiers de la largeur de la section. Sur les écrans de moins de 768 pixels, les colonnes s’empilent : chacune prend toute la largeur, dans l’ordre de la page.

Les colonnes n’ont que la hauteur de leur contenu, donc une courte colonne finit avant ses voisines. Vous le remarquez dès que les colonnes ont une couleur de fond ; **Equal-height columns** les égalise.

## Régler votre ligne

### Mises en page de colonnes

L’icône de grille ouvre un panneau pour chaque taille d’écran avec sa propre mise en page. Chaque panneau montre ces douze préréglages en tuiles :

| Préréglage | Mise en page |
|---|---|
| 1/1 | Une colonne pleine largeur |
| 1/2 + 1/2 | Deux colonnes égales |
| 1/3 + 1/3 + 1/3 | Trois colonnes égales |
| 1/4 + 1/4 + 1/4 + 1/4 | Quatre colonnes égales |
| 1/6 + 1/6 + 1/6 + 1/6 + 1/6 + 1/6 | Six colonnes égales |
| 1/4 + 1/2 + 1/4 | Étroite, large, étroite |
| 1/6 + 4/6 + 1/6 | Étroite, très large, étroite |
| 1/4 + 3/4 | Un quart à gauche, trois quarts à droite |
| 3/4 + 1/4 | Trois quarts à gauche, un quart à droite |
| 2/3 + 1/3 | Large à gauche, étroite à droite |
| 1/3 + 2/3 | Étroite à gauche, large à droite |
| 5/12 + 7/12 | Un peu étroite à gauche, un peu large à droite |

Pour toute autre division, cliquez sur **Custom Layout** et tapez les largeurs en fractions, comme `1/6 + 5/6`. Les largeurs dont la somme dépasse 1 passent à la ligne. Quand vous rouvrez la boîte de dialogue, **Custom Layout** est marqué et montre la mise en page, comme **Custom Layout (1/6 + 5/6)**.

### Une mise en page par taille d’écran

Le premier panneau, **Medium devices (≥ 768px)**, règle la mise en page depuis les tablettes. Pour changer aussi les téléphones, cliquez sur **Add screen size** en haut de la boîte de dialogue. Un panneau pour **Extra small (< 576px)** s’ouvre ; choisissez une autre taille dans sa liste au besoin, puis un préréglage. **Remove screen size** supprime à nouveau un panneau.

### Réglages des lignes et colonnes

Ouvrez **Plus** > **Paramètres** sur la barre de contrôle de la ligne, ou sur la barre de la colonne pour le réglage de colonne.

| Réglage | Élément | Rôle | Défaut |
|---|---|---|---|
| **Equal-height columns** | Ligne | Étire chaque colonne à la hauteur de la plus haute | Désactivé |
| **Mirror row** | Ligne | Affiche les colonnes en ordre inverse depuis 768 pixels ; les colonnes empilées gardent l’ordre de la page | Désactivé |
| **Vertical centering** | Colonne | Centre le contenu dans une colonne plus haute que lui | Désactivé |

**Mirror row** convient à une page de lignes alternées : photo à gauche, puis photo à droite, tandis que les téléphones montrent toujours la photo d’abord.

### Déplacer et retirer des colonnes

Glissez une colonne par sa poignée, ou utilisez **Plus** > **Move Left** ou **Move Right** sur sa barre. Les colonnes n’ont pas de **Delete** : choisissez plutôt un préréglage avec moins de colonnes. Le contenu ne se perd jamais ainsi ; il va dans la dernière colonne restante.

## Si rien ne s’affiche

- **Le centrage vertical d’une colonne ne change rien.** La colonne n’a que la hauteur de son contenu, donc aucun espace à centrer. Activez **Equal-height columns** dans les réglages de la ligne.
- **Les colonnes s’empilent sur téléphone.** Sous 768 pixels, c’est le défaut. Cliquez sur l’icône de grille, puis sur **Add screen size**, et choisissez un préréglage pour **Extra small (< 576px)**.
- **Du texte a sauté dans une autre colonne.** Vous avez choisi un préréglage avec moins de colonnes, et le contenu des colonnes retirées est allé dans la dernière. Appuyez sur **Ctrl+Z** (**Cmd+Z** sur Mac) pour annuler le changement.
- **Une colonne n’a pas de Delete dans son menu Plus.** Les colonnes se retirent via la mise en page. Cliquez sur l’icône de grille de la ligne et choisissez un préréglage avec moins de colonnes.

## Et ensuite ?

- [Ajouter une mise en page imbriquée](/fr/hc/documentation/learn-dxpr-builder/layout/nesting) : mettre une ligne dans une colonne pour une grille plus fine.
- [Sections](/fr/hc/documentation/learn-dxpr-builder/layout/sections) : donner à la bande autour de vos colonnes son propre fond.
- [Design adaptatif](/hc/documentation/learn-dxpr-builder/design/responsive-design) : comment votre mise en page s’adapte à chaque taille d’écran.