---
url: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/contenu-en-colonnes'
title: 'Mettre le contenu en colonnes | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T14:24:36+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Créez ici une page avec les quatre mises en page de colonnes que vous utiliserez le plus : contenu avec barre latérale, deux moitiés égales, trois tiers et quatre quarts. Chacune reçoit un titre au-dessus. Utilisez-la pour apprendre quel préréglage convient à quel contenu. Pour tous les réglages de ligne, voir Ajouter une ligne.
  La vidéo crée la page de collecte des déchets d’une municipalité.
tags:
  - 'Follow a tutorial'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Mettre le contenu en colonnes'
      description: |-
        Créez ici une page avec les quatre mises en page de colonnes que vous utiliserez le plus : contenu avec barre latérale, deux moitiés égales, trois tiers et quatre quarts. Chacune reçoit un titre au-dessus. Utilisez-la pour apprendre quel préréglage convient à quel contenu. Pour tous les réglages de ligne, voir Ajouter une ligne.
        La vidéo crée la page de collecte des déchets d’une municipalité.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T14:24:36+0000'
      dateModified: '2026-10-24T17:19:22+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/apprendre-dxpr-builder/tutoriels/contenu-en-colonnes'
      articleSection: 'Suivre un tutoriel'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/contenu-en-colonnes'
      description: |-
        Créez ici une page avec les quatre mises en page de colonnes que vous utiliserez le plus : contenu avec barre latérale, deux moitiés égales, trois tiers et quatre quarts. Chacune reçoit un titre au-dessus. Utilisez-la pour apprendre quel préréglage convient à quel contenu. Pour tous les réglages de ligne, voir Ajouter une ligne.
        La vidéo crée la page de collecte des déchets d’une municipalité.
      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
---
[Centre d’aide](/fr/hc)/[Documentation](/fr/hc/documentation) /[Apprendre DXPR Builder](/fr/hc/documentation/learn-dxpr-builder) /[Créer des pages](/fr/hc/documentation/learn-dxpr-builder/build) /[Suivre un tutoriel](/fr/hc/documentation/learn-dxpr-builder/tutorials/overview) # Mettre le contenu en colonnes.

 Apprendre DXPR BuilderCréer des pagesSuivre un tutoriel

   ## Dans ce guide

 Guides associés

- [Ajouter une ligne](/fr/hc/documentation/apprendre-dxpr-builder/mise-en-page/lignes-et-colonnes)
- [Ajouter une section](/fr/hc/documentation/apprendre-dxpr-builder/mise-en-page/sections)

Créez ici une page avec les quatre mises en page de colonnes que vous utiliserez le plus : contenu avec barre latérale, deux moitiés égales, trois tiers et quatre quarts. Chacune reçoit un titre au-dessus. Utilisez-la pour apprendre quel préréglage convient à quel contenu. Pour tous les réglages de ligne, voir [Ajouter une ligne](/fr/hc/documentation/apprendre-dxpr-builder/mise-en-page/lignes-et-colonnes).

La vidéo crée la page de collecte des déchets d’une municipalité.

  ## Avant de commencer

- Votre rôle dispose de l’autorisation **Edit with DXPR Builder**.
- La page est ouverte dans le builder. Pour une nouvelle page, accédez à **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`) et cliquez sur **Save**.
- Les nouveaux éléments arrivent en haut de leur section. C’est pourquoi chaque titre se place après sa ligne : il arrive au-dessus d’elle.

## Choisir une mise en page

| Layout | Best for | Preset |
|---|---|---|
| Contenu avec barre latérale | articles avec liens connexes | **2/3 + 1/3** |
| Deux moitiés égales | comparaisons, avant et après | la valeur par défaut de la ligne |
| Trois tiers égaux | points forts, services | **1/3 + 1/3 + 1/3** |
| Quatre quarts égaux | statistiques, petites cartes | **1/4 + 1/4 + 1/4 + 1/4** |

Une nouvelle **Row** arrive avec deux colonnes égales. Toutes les autres mises en page viennent de l’icône de grille de la ligne (**Column layout**).

## Étape 1 : contenu avec barre latérale

1. Cliquez sur **Add Elements** sur la page vide et choisissez **Section** dans l’onglet **Layout**.
2. Cliquez sur **+** sur la section et choisissez **Row**. Cliquez sur son icône de grille (**Column layout**), choisissez le préréglage **2/3 + 1/3** et cliquez sur **Save**.
3. Cliquez sur **+** dans la colonne large et choisissez **Text** dans l’onglet **Content**. Saisissez l’article, réglez la première ligne sur **Heading 3** et cliquez sur **Save**.
4. Cliquez sur **+** dans la colonne étroite et choisissez **Text**. Saisissez « Related » comme **Heading 4**, ajoutez une ligne par page connexe et cliquez sur **Save**.
5. Cliquez sur **+** sur la section et choisissez **Text** ; il arrive au-dessus de la ligne. Saisissez « Content with a sidebar » comme **Heading 2** et cliquez sur **Save**.

## Étape 2 : deux moitiés égales

1. Survolez la section et cliquez sur **Add Section Below**. Ouvrez les **Plus** > **Paramètres** de la nouvelle section, choisissez un **Background** gris clair dans le panneau **Style** et cliquez sur **Save**.
2. Cliquez sur **+** sur la section et choisissez **Row**. Deux colonnes égales est la valeur par défaut, il n’y a donc rien à changer.
3. Ajoutez un élément **Text** dans chaque colonne : « Before » et « After » comme **Heading 4** avec une ligne chacun.
4. Ajoutez le titre « Two equal halves » de la même façon qu’à l’étape 1.

## Étape 3 : trois tiers égaux

1. Ajoutez une troisième section avec **Add Section Below** et donnez-lui la classe **Align text center**.
2. Ajoutez une **Row**, cliquez sur son icône de grille (**Column layout**), choisissez le préréglage **1/3 + 1/3 + 1/3** et cliquez sur **Save**.
3. Ajoutez un élément **Text** dans chaque colonne : « Paper », « Glass » et « Organic » comme **Heading 4** avec une ligne chacun.
4. Ajoutez le titre « Three equal thirds ».

## Étape 4 : quatre quarts égaux

1. Ajoutez une quatrième section avec un **Background** gris clair et la classe **Align text center**.
2. Ajoutez une **Row**, cliquez sur son icône de grille (**Column layout**), choisissez le préréglage **1/4 + 1/4 + 1/4 + 1/4** et cliquez sur **Save**.
3. Ajoutez un élément **Text** dans chaque colonne : le jour comme **Heading 4** et ce qui est collecté.
4. Ajoutez le titre « Four equal quarters ».

## Étape 5 : enregistrer et prévisualiser

1. Cliquez sur **Save** dans la barre d’outils du builder.
2. Ouvrez le menu d’affichage (l’**eye icon**) et choisissez **Preview**.

## Sur les écrans plus petits

Les colonnes se tiennent côte à côte à partir de 768 pixels de large : les tablettes affichent donc la même mise en page que les ordinateurs. Sur les téléphones, chaque colonne prend toute la largeur, et les colonnes s’empilent dans leur ordre. Pour une autre mise en page sur tablettes, cliquez sur l’icône de grille de la ligne (**Column layout**) et choisissez **Add screen size**.

## Aller plus loin

Non montré dans la vidéo :

- **Narrow, wide, narrow** : le préréglage **1/4 + 1/2 + 1/4** garde les longs textes lisibles avec des marges vides.
- **Mirror row** : activez-le dans les réglages de la ligne pour intervertir les colonnes sur tablettes et ordinateurs. Les téléphones gardent l’ordre d’origine : la première colonne y arrive donc toujours en premier.

## Ce que vous voyez

Quatre bandeaux se suivent, chacun avec son titre en haut. L’article et ses liens connexes partagent le premier, deux moitiés sont sur gris, puis trois tiers centrés. Quatre quarts centrés sur gris closent la page.

## Si les colonnes ne s’affichent pas comme montré

- **La ligne n’a pas le bon nombre de colonnes.** Le préréglage ne s’applique que quand vous cliquez sur **Save** dans la boîte de dialogue de mise en page. Cliquez à nouveau sur l’icône de grille de la ligne (**Column layout**), choisissez le préréglage et cliquez sur **Save**.
- **Un titre se trouve sous sa ligne.** Le titre est arrivé avant la ligne, et les nouveaux éléments arrivent en haut de leur section. Glissez le titre au-dessus de la ligne par la poignée de glissement de sa barre de contrôle.
- **Les colonnes s’empilent sur une tablette.** La tablette fait moins de 768 pixels de large, comme une petite tablette en portrait. Ajoutez une mise en page pour cette largeur avec **Add screen size** dans la boîte de dialogue de mise en page de la ligne.
- **Vos modifications ont disparu après un rechargement.** Vous avez quitté la page avant de cliquer sur **Save** dans la barre d’outils du builder. Si Save affiche une erreur, voir [Les modifications ne s’enregistrent pas](/fr/hc/documentation/apprendre-dxpr-builder/depannage/enregistrement-echoue).

## Et ensuite ?

- [Ajouter une ligne](/fr/hc/documentation/apprendre-dxpr-builder/mise-en-page/lignes-et-colonnes) pour tous les réglages de ligne
- [Ajouter une section](/fr/hc/documentation/apprendre-dxpr-builder/mise-en-page/sections) pour les fonds et les largeurs de section