---
url: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/mise-en-page-de-blog'
title: 'Concevoir une mise en page de blog | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T14:24:00+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Ici, vous construisez la page qui liste vos articles de blog : un
  article à la une en haut, une liste depuis une vue Drupal avec une barre
  latérale, et une bande lettre d’information. Les nouveaux articles y
  apparaissent sans modifier la page. Pour raconter une histoire client en
  profondeur, suivez plutôt
  Rédiger une étude de cas.
  La vidéo construit le blog d’un produit de reporting.
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: 'Concevoir une mise en page de blog'
      description: |-
        Ici, vous construisez la page qui liste vos articles de blog : un
        article à la une en haut, une liste depuis une vue Drupal avec une barre
        latérale, et une bande lettre d’information. Les nouveaux articles y
        apparaissent sans modifier la page. Pour raconter une histoire client en
        profondeur, suivez plutôt
        Rédiger une étude de cas.
        La vidéo construit le blog d’un produit de reporting.
      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:00+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/mise-en-page-de-blog'
      articleSection: 'Suivre un tutoriel'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/mise-en-page-de-blog'
      description: |-
        Ici, vous construisez la page qui liste vos articles de blog : un
        article à la une en haut, une liste depuis une vue Drupal avec une barre
        latérale, et une bande lettre d’information. Les nouveaux articles y
        apparaissent sans modifier la page. Pour raconter une histoire client en
        profondeur, suivez plutôt
        Rédiger une étude de cas.
        La vidéo construit le blog d’un produit de reporting.
      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) # Concevoir une mise en page de blog.

 Apprendre DXPR BuilderCréer des pagesSuivre un tutoriel

   ## Dans ce guide

 Guides associés

- [Ajouter des formulaires aux pages](/fr/hc/documentation/learn-dxpr-builder/tutorials/add-forms)
- [Afficher une vue Drupal sur votre page](/fr/hc/documentation/apprendre-dxpr-builder/integrations/vues-drupal)
- [Ajouter un bloc Drupal à votre page](/fr/hc/documentation/apprendre-dxpr-builder/integrations/blocs-drupal)
- [Créer une page « à propos »](/fr/hc/documentation/learn-dxpr-builder/tutorials/about-page)

Ici, vous construisez la page qui liste vos articles de blog : un article à la une en haut, une liste depuis une vue Drupal avec une barre latérale, et une bande lettre d’information. Les nouveaux articles y apparaissent sans modifier la page. Pour raconter une histoire client en profondeur, suivez plutôt [Rédiger une étude de cas](/fr/hc/documentation/apprendre-dxpr-builder/tutoriels/etude-de-cas).

La vidéo construit le blog d’un produit de reporting.

  ## Avant de commencer

- Votre rôle a la permission **Edit with DXPR Builder**.
- Votre site a une vue qui liste les articles de blog. DXPR CMS livre une vue **Blog** avec une liste **Blog** et un affichage **Featured posts**.
- La page est ouverte dans le builder. Pour une nouvelle, accédez à **Content** > **Add content** > **Landing Page**(`/node/add/landing_page`) et cliquez sur **Save**.
- Les nouveaux éléments atterrissent en haut de leur colonne. Ajoutez les éléments d’une colonne dans l’ordre inverse, ou glissez-les en place ensuite.

## Étape 1 : ajouter l’article à la une

1. Cliquez sur **Ajouter des éléments** sur la page vide et choisissez **Section** depuis l’onglet **Mise en page**.
2. Cliquez sur **+** sur la section et choisissez **Ligne** ; elle arrive avec deux colonnes égales. 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 **Image** depuis l’onglet **Contenu**. Cliquez sur **Select Image**, cochez une photo et cliquez sur **Insert selected**. Tapez l’**Alt attribute** dans le panneau **SEO** et cliquez sur **Save**.
4. Cliquez sur **+** dans la colonne étroite et choisissez **Bouton**. Réglez **Title** sur « Read more », **Link** vers l’article et gardez **Type** sur **Primary**, puis cliquez sur **Save**.
5. Cliquez à nouveau sur **+** dans la colonne étroite et choisissez **Texte** ; il atterrit au-dessus du bouton. Tapez le titre de l’article en **Heading 2**, ajoutez l’extrait en dessous et cliquez sur **Save**.

## Étape 2 : ajouter la liste et la barre latérale

1. Survolez la section et cliquez sur **Add Section Below**. Ajoutez-y une **Ligne** avec le préréglage **2/3 + 1/3**.
2. Cliquez sur **+** dans la colonne large et ouvrez l’onglet **Drupal Views**. Choisissez **View: Blog (Blog)** et cliquez sur **Save** ; il affiche vos articles.
3. Cliquez sur **+** dans la colonne étroite et ouvrez l’onglet **Drupal Views**. Choisissez **View: Blog (Featured posts)** et cliquez sur **Save**.
4. Cliquez à nouveau sur **+** dans la colonne étroite et ouvrez l’onglet **Drupal Blocks**. Choisissez **Block: Forms: Search form** et cliquez sur **Save** ; il atterrit au-dessus des articles à la une.

## Étape 3 : ajouter la bande lettre d’information

1. Ajoutez une troisième section avec **Add Section Below**. Ouvrez ses **Plus** > **Paramètres**, choisissez le **Background** bleu marine dans le panneau **Style** et cliquez sur **Save**.
2. Cliquez sur **+** sur la section et choisissez **Bouton**. Réglez **Title** sur « Subscribe to the newsletter », **Link** sur `/newsletter` et **Type** sur **Light**, puis cliquez sur **Save**.
3. Cliquez à nouveau sur **+** et choisissez **Texte** ; il atterrit au-dessus du bouton. Tapez « Stay updated » en **Heading 2** et une ligne sur la lettre d’information en dessous. Réglez **Font color** sur blanc dans le panneau **Style** et cliquez sur **Save**.

## Étape 4 : enregistrer et prévisualiser

1. Cliquez sur **Save** dans la barre d’outils du builder.
2. Ouvrez le menu d’affichage (l’**icône en forme d’œil**) et choisissez **Preview**.

## Aller plus loin

Non montré dans la vidéo :

- **Formulaire d’inscription** : ajoutez un bloc de formulaire de lettre d’information depuis l’onglet **Drupal Blocks** à la place du bouton ; voir [Ajouter des formulaires aux pages](/fr/hc/documentation/learn-dxpr-builder/tutorials/add-forms)
- **Catégories** : ajoutez une vue de vos catégories de blog à la barre latérale
- **Teinte de barre latérale** : ouvrez les réglages de la colonne étroite et donnez-lui un **Background** gris clair et un peu de remplissage dans le panneau **Style**

## Ce que vous voyez

L’article à la une ouvre la page : une photo large à gauche, son titre, son extrait et son bouton **Read more** à droite. En dessous, vos articles remplissent la colonne large, avec le formulaire de recherche et les articles à la une dans la barre latérale. Une bande bleu marine ferme la page avec le titre **Stay updated** et le bouton **Subscribe to the newsletter**.

## Si vous ne voyez pas vos articles

- **La vue Blog manque dans l’onglet Drupal Views.** La vue est désactivée, ou votre profil d’utilisateur du builder la cache. Activez-la sous **Structure** > **Views** (`/admin/structure/views`), ou demandez à un administrateur de la cocher sous **Views** dans votre profil d’utilisateur.
- **La colonne de liste reste vide.** La vue n’a aucun article publié à montrer. Publiez un article sous **Content** > **Add content** > **Blog post**, puis rechargez la page.
- **Le formulaire de recherche manque dans l’onglet Drupal Blocks.** Le module **Search** du cœur fournit ce bloc. Activez-le sous **Extend**(`/admin/modules`).
- **Vos changements 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 des formulaires aux pages](/fr/hc/documentation/learn-dxpr-builder/tutorials/add-forms) pour les formulaires d’inscription
- [Intégration de Drupal Views](/fr/hc/documentation/apprendre-dxpr-builder/integrations/vues-drupal) pour configurer les vues
- [Intégration de Drupal Blocks](/fr/hc/documentation/apprendre-dxpr-builder/integrations/blocs-drupal) pour les blocs de barre latérale
- [Créer une page « à propos »](/fr/hc/documentation/learn-dxpr-builder/tutorials/about-page) pour le prochain tutoriel