--- url: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/elements/jumbotron' title: 'Ajouter un jumbotron | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T14:42:22+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Vous obtenez une grande bannière hero avec un titre, une phrase d’accroche et un arrière-plan aux couleurs de la marque, prête à accueillir un bouton. Utilisez-la pour ouvrir une page, annoncer un événement ou mener les visiteurs vers une seule action.' tags: - Marketing 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: 'Ajouter un jumbotron' description: 'Vous obtenez une grande bannière hero avec un titre, une phrase d’accroche et un arrière-plan aux couleurs de la marque, prête à accueillir un bouton. Utilisez-la pour ouvrir une page, annoncer un événement ou mener les visiteurs vers une seule action.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T14:42:22+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/elements/jumbotron' articleSection: Marketing - '@type': WebPage '@id': 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/elements/jumbotron' description: 'Vous obtenez une grande bannière hero avec un titre, une phrase d’accroche et un arrière-plan aux couleurs de la marque, prête à accueillir un bouton. Utilisez-la pour ouvrir une page, annoncer un événement ou mener les visiteurs vers une seule action.' 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) /[Ajouter du contenu](/fr/hc/documentation/learn-dxpr-builder/elements) /[Marketing](/fr/hc/documentation/learn-dxpr-builder/elements/marketing) # Ajouter un jumbotron. Apprendre DXPR BuilderCréer des pagesAjouter du contenuMarketing ## Dans ce guide Guides associés - [Modifier l’aspect d’un élément dans le panneau Style](/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/onglet-style) Vous obtenez une grande bannière hero avec un titre, une phrase d’accroche et un arrière-plan aux couleurs de la marque, prête à accueillir un bouton. Utilisez-la pour ouvrir une page, annoncer un événement ou mener les visiteurs vers une seule action. ## Ajouter un jumbotron 1. Survolez la colonne et cliquez sur **+** dans sa barre de contrôle, ou cliquez sur **Ajouter des éléments** sur une page vide. Ouvrez l’onglet **Contenu** et cliquez sur **Jumbotron**. 2. Saisissez le **Title**. 3. Ajoutez une phrase **Lead** qui vend l’événement. 4. Choisissez un **Type** pour l’arrière-plan ; Primary avec du texte blanc ressort bien. 5. Cliquez sur **Enregistrer** dans la boîte de dialogue. 6. Cliquez sur **+** dans le jumbotron et ajoutez un **Bouton**, car un jumbotron est un conteneur. Puis cliquez sur **Enregistrer** dans la barre d’outils en haut de la zone de contenu pour stocker la page. ## Ce que vous voyez Titre, accroche et bouton se trouvent dans une seule bannière aux couleurs de la marque sur toute la colonne. Le bouton est un élément Bouton normal dans le jumbotron, vous le modifiez et le stylisez donc seul. ## Configurer votre jumbotron Ouvrez **Plus > Paramètres** sur l’élément. Options : - **Title :** le titre principal affiché dans le jumbotron. - **Lead :** un texte d’introduction plus grand sous le titre. - **Type :** le style d’arrière-plan : Light, Primary, Secondary, Success, Info, Warning, Danger, Dark ou Default. - **Padding :** l’espacement intérieur autour du contenu : Large, Medium ou Small. Le jumbotron est un conteneur. Glissez-y ou ajoutez-y d’autres éléments : boutons, images ou plus de texte. ## Si rien ne s’affiche - **Le jumbotron ne figure pas dans l’onglet Contenu.** Votre profil d’utilisateur le masque. Demandez à un administrateur de l’activer dans [Profils d’utilisateurs](/fr/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin). - **Il a disparu après rechargement.** La page n’a pas été enregistrée. Ajoutez-le de nouveau et cliquez sur **Enregistrer** dans la barre d’outils en haut de la zone de contenu. - **La bannière affiche un « + » et rien d’autre.** Aucun élément n’a encore été ajouté dedans. Cliquez sur le **+** du jumbotron et choisissez un bouton ou du texte. - **Du texte blanc sur un arrière-plan clair.** **Type** est sur Light alors que le texte du thème est clair. Choisissez Primary ou Dark. ## Et ensuite ? [Onglet Style](/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/onglet-style) pour modifier l’espacement et l’arrière-plan de votre jumbotron.