--- url: 'https://dxpr.com/fr/hc/documentation/learn-dxpr-builder/design/colour-and-branding' title: 'Utiliser les couleurs de votre marque | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:00:16+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Appliquez les couleurs de votre marque aux sections, au texte et aux boutons pour que chaque page semble appartenir au même site. Chaque champ de couleur de DXPR Builder montre la palette de votre thème en échantillons, pour choisir des couleurs de marque au lieu de deviner des codes. L’exemple donne à une section votre couleur de marque primaire avec du texte blanc. La vidéo suit les étapes ci-dessous : elle colore une section avec votre échantillon de marque et met son texte en blanc. tags: - 'Design guides' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T11:00:16+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Utiliser les couleurs de votre marque' description: |- Appliquez les couleurs de votre marque aux sections, au texte et aux boutons pour que chaque page semble appartenir au même site. Chaque champ de couleur de DXPR Builder montre la palette de votre thème en échantillons, pour choisir des couleurs de marque au lieu de deviner des codes. L’exemple donne à une section votre couleur de marque primaire avec du texte blanc. La vidéo suit les étapes ci-dessous : elle colore une section avec votre échantillon de marque et met son texte en blanc. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T11:00:16+0000' dateModified: '2026-10-24T11:00:16+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/design/colour-and-branding' articleSection: 'Guides de design' - '@type': WebPage '@id': 'https://dxpr.com/fr/hc/documentation/learn-dxpr-builder/design/colour-and-branding' description: |- Appliquez les couleurs de votre marque aux sections, au texte et aux boutons pour que chaque page semble appartenir au même site. Chaque champ de couleur de DXPR Builder montre la palette de votre thème en échantillons, pour choisir des couleurs de marque au lieu de deviner des codes. L’exemple donne à une section votre couleur de marque primaire avec du texte blanc. La vidéo suit les étapes ci-dessous : elle colore une section avec votre échantillon de marque et met son texte en blanc. 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) /[Styler vos éléments](/fr/hc/documentation/learn-dxpr-builder/element-settings) /[Guides de design](/fr/hc/documentation/learn-dxpr-builder/design/overview) # Utiliser les couleurs de votre marque. Apprendre DXPR BuilderCréer des pagesStyler vos élémentsGuides de design ## Dans ce guide Guides associés - [Faire réagir les éléments au survol](/fr/hc/documentation/learn-dxpr-builder/design/hover-effects) - [Styliser vos cartes](/fr/hc/documentation/learn-dxpr-builder/design/card-styles) - [Styliser le contenu du builder avec le CSS de votre thème](/fr/hc/documentation/learn-dxpr-builder/customization/custom-css) Appliquez les couleurs de votre marque aux sections, au texte et aux boutons pour que chaque page semble appartenir au même site. Chaque champ de couleur de DXPR Builder montre la palette de votre thème en échantillons, pour choisir des couleurs de marque au lieu de deviner des codes. L’exemple donne à une section votre couleur de marque primaire avec du texte blanc. La vidéo suit les étapes ci-dessous : elle colore une section avec votre échantillon de marque et met son texte en blanc. ## Avant de commencer - Vos couleurs de marque vivent dans le thème. Avec DXPR Theme, définissez-les sous **Appearance** > **Settings** > **DXPR Theme** (`/admin/appearance/settings/dxpr_theme`), dans le panneau **Colors**. - DXPR Builder montre les dix premières couleurs différentes de cette palette en échantillons. ## Colorer une section 1. Survolez la section, ouvrez **More** et choisissez **Settings**. 2. Ouvrez le panneau **Style**. 3. Cliquez sur le bouton de couleur de **Background**. Le sélecteur de couleur s’ouvre avec vos échantillons. 4. Cliquez sur votre échantillon de marque primaire. 5. Cliquez sur le bouton de couleur de **Font color** et choisissez le blanc. 6. Cliquez sur **Save**. Le texte du paragraphe devient blanc ; les titres gardent la couleur de titre du thème. 7. Pour mettre aussi un titre en blanc, ouvrez les **Settings** de son élément **Text**, choisissez le blanc pour **Font color** dans son panneau **Style** et cliquez sur **Save**. ## Ce que vous voyez La section se remplit de votre couleur de marque, et son texte de paragraphe et son titre deviennent blancs. Les mêmes échantillons figurent dans chaque champ de couleur. Cela comprend les panneaux **Style** et **Hover style**, et le **Start color** et **End color** de l’arrière-plan **Gradient** d’une section. Pour utiliser une couleur hors palette, saisissez son code dans le champ de texte du sélecteur, par exemple `#2196F3`. Bougez le curseur d’opacité pour une couleur translucide. **Clear** retire la couleur. ## Garder les couleurs liées au thème Un échantillon copie le code de la couleur dans l’élément. Si vous changez la palette du thème plus tard, cet élément garde l’ancienne couleur. Pour qu’un élément suive la palette, utilisez plutôt une classe de couleur. Ouvrez les **Settings** de l’élément et choisissez une pastille sous **HTML classes** : | Pastille | Rôle | |---|---| | **Primary background**, **Secondary background** et autres | Couleurs Bootstrap de votre thème | | **Primary text color**, **Secondary text color** et autres | Couleurs de texte Bootstrap de votre thème | | **Background color: DXPR Theme primary** | La couleur **Primary** de DXPR Theme, avec sa couleur de texte assortie | | **Text color: DXPR Theme accent1** | La couleur **Secondary** de DXPR Theme pour le texte | Les pastilles **DXPR Theme** n’apparaissent que quand DXPR Theme est activé. ## Champs de couleur par élément | Où | Ce qu’elle colore | |---|---| | **Style**, panneau : **Font color**, **Border color**, **Background** | L’élément lui-même | | **Hover style**, panneau : les mêmes champs | L’élément pendant que le pointeur est dessus | | **Button** : **Type** | Un jeu de couleurs de bouton prêt à l’emploi | | **Card** : **Type** | Le fond et le texte de toute la carte | | **Alert** : **Type** | **Success**, **Info**, **Warning** ou **Danger** | | **Section** : **Background effects** > **Gradient** | Un fondu de deux couleurs | ## Couleur lisible - Gardez assez de contraste entre texte et arrière-plan. WCAG 2.1 niveau AA exige au moins 4,5 sur 1 pour le texte normal. - N’utilisez pas la couleur seule pour porter un sens ; associez-la à un libellé ou une icône. - Alternez les arrière-plans de section, comme blanc, gris clair et votre couleur de marque, pour donner un rythme aux longues pages. ## Si vous ne voyez pas vos couleurs - **Le sélecteur de couleur ne montre aucun échantillon.** Le thème par défaut de votre site ne fournit aucune palette de couleurs. Saisissez vos codes de couleur, ou utilisez un thème avec une palette, comme DXPR Theme. - **Un élément garde son ancienne couleur après changement de la palette du thème.** Un échantillon stocke un code de couleur fixe. Choisissez le nouvel échantillon, ou passez à une pastille de couleur sous **HTML classes**, qui suit la palette. - **Background ou Font color est sans effet sur une carte.** Un **Type** de carte autre que **Default** définit ses couleurs avec des classes du thème qui gagnent. Réglez d’abord **Type** sur **Default**. ## Et ensuite ? - [Faire réagir les éléments au survol](/hc/documentation/learn-dxpr-builder/design/hover-effects) : changer les couleurs quand les visiteurs pointent un élément. - [Styliser vos cartes](/hc/documentation/learn-dxpr-builder/design/card-styles) : appliquer vos couleurs aux cartes. - [CSS personnalisé](/hc/documentation/learn-dxpr-builder/customization/custom-css) : définir des règles de marque non couvertes par les panneaux.