--- url: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/onglet-style' title: 'Modifier l’aspect d’un élément dans le panneau Style | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T14:42:18+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Utilisez le panneau Style quand un élément sur une page a besoin de son propre aspect : une carte colorée, un logo atténué, un bouton aux couleurs d’une campagne. Vous voyez chaque changement sur la page pendant que vous le faites. Pour un aspect que toutes les pages doivent partager, comme la couleur de tous les boutons, modifiez plutôt votre thème. Une seule modification y met à jour tout le site. La vidéo suit la première recette ci-dessous : elle atténue un logo partenaire jusqu’à l’arrivée du pointeur. tags: - 'Style your elements' 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: 'Modifier l’aspect d’un élément dans le panneau Style' description: |- Utilisez le panneau Style quand un élément sur une page a besoin de son propre aspect : une carte colorée, un logo atténué, un bouton aux couleurs d’une campagne. Vous voyez chaque changement sur la page pendant que vous le faites. Pour un aspect que toutes les pages doivent partager, comme la couleur de tous les boutons, modifiez plutôt votre thème. Une seule modification y met à jour tout le site. La vidéo suit la première recette ci-dessous : elle atténue un logo partenaire jusqu’à l’arrivée du pointeur. 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:18+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/parametres-des-elements/onglet-style' articleSection: 'Styler vos éléments' - '@type': WebPage '@id': 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/onglet-style' description: |- Utilisez le panneau Style quand un élément sur une page a besoin de son propre aspect : une carte colorée, un logo atténué, un bouton aux couleurs d’une campagne. Vous voyez chaque changement sur la page pendant que vous le faites. Pour un aspect que toutes les pages doivent partager, comme la couleur de tous les boutons, modifiez plutôt votre thème. Une seule modification y met à jour tout le site. La vidéo suit la première recette ci-dessous : elle atténue un logo partenaire jusqu’à l’arrivée du pointeur. 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) # Modifier l’aspect d’un élément dans le panneau Style. Apprendre DXPR BuilderCréer des pagesStyler vos éléments ## Dans ce guide Guides associés - [Mettre une couleur ou une photo en arrière-plan](/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/arriere-plan) Utilisez le panneau **Style** quand un élément sur une page a besoin de son propre aspect : une carte colorée, un logo atténué, un bouton aux couleurs d’une campagne. Vous voyez chaque changement sur la page pendant que vous le faites. Pour un aspect que toutes les pages doivent partager, comme la couleur de tous les boutons, modifiez plutôt votre thème. Une seule modification y met à jour tout le site. La vidéo suit la première recette ci-dessous : elle atténue un logo partenaire jusqu’à l’arrivée du pointeur. ## Avant de commencer - Ouvrez la page dans DXPR Builder ; pointer vers un élément affiche sa barre de contrôle avec **Plus**. Nouveau dans le constructeur ? Voir [Votre première page](/fr/hc/documentation/apprendre-dxpr-builder/demarrage/premiere-page). - **Enregistrer** dans la boîte de dialogue conserve une modification dans l’éditeur. **Enregistrer** sur la barre d’outils du constructeur au-dessus de votre contenu stocke la page et affiche « Saved field ». Les paramètres du panneau **Style** appartiennent à un seul élément. Ils sont enregistrés dans le contenu de cette page, pas dans votre thème. Si la couleur de votre marque change l’an prochain, chaque élément coloré à la main garde l’ancienne couleur jusqu’à sa modification. - **Réutilisez un aspect** en enregistrant un élément stylé avec **Plus** > **Save as template**, ou en donnant aux éléments une classe partagée sous **HTML classes**. Voir [modèles d’utilisateur](/fr/hc/documentation/learn-dxpr-builder/reusable-templates/user-templates) et [ID et classes HTML](/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/css-personnalise). - **Choisissez les couleurs dans les nuanciers** quand votre site en affiche. Ils viennent de la palette de couleurs de votre thème. Un nuancier copie la couleur, un changement ultérieur de palette ne la met donc pas à jour. ## Recette : atténuer les logos jusqu’à l’arrivée du pointeur Une rangée de logos partenaires semble plus calme quand les logos sont atténués. Cette recette atténue un logo et le ravive au survol. 1. Survolez un élément **Image** qui affiche un logo, cliquez sur **Plus**, puis sur **Paramètres**. 2. Ouvrez le panneau **Style** et glissez **Opacity** sur 0.5. Le logo s’atténue pendant le glissement. 3. Ouvrez le panneau **Hover style** en dessous et glissez **Opacity** sur 1. 4. Cliquez sur **Enregistrer** dans la boîte de dialogue, puis sur **Enregistrer** sur la barre d’outils. 5. Ouvrez le menu d’affichage (l’icône en forme d’œil) sur la barre d’outils du constructeur, choisissez **Aperçu** et pointez vers le logo. Il passe à pleine intensité et s’atténue de nouveau au départ du pointeur. Répétez les étapes pour chaque logo de la rangée. ## Recette : un bouton aux couleurs de campagne Votre thème donne aux boutons une couleur de survol. Un **Background** défini par vous remplace aussi cette couleur de survol, définissez donc les deux. 1. Survolez l’élément **Bouton**, cliquez sur **Plus**, puis sur **Paramètres**. 2. Dans le panneau **Style**, choisissez un **Background** et une **Font color**. Cliquez sur un nuancier, ou saisissez votre code couleur, par exemple #e4002b, dans le champ de couleur. 3. Dans le panneau **Hover style**, choisissez un **Background** plus foncé. 4. Cliquez sur **Enregistrer** dans la boîte de dialogue, puis sur **Enregistrer** sur la barre d’outils. 5. Choisissez **Aperçu** dans le menu d’affichage et pointez vers le bouton. Il prend la couleur plus foncée. ## Ce que vous voyez Pendant que la boîte de dialogue est ouverte, l’élément montre chaque changement. Dans l’**Aperçu**, le logo atténué passe à pleine intensité sous le pointeur, et le bouton de campagne prend sa couleur plus foncée. Les deux aspects restent après un rechargement de la page, parce que **Enregistrer** sur la barre d’outils les a stockés. ## Ce que chaque contrôle accepte | Contrôle | Plage | Unité | |---|---|---| | **Font color**, **Border color**, **Background** | n’importe quelle couleur, avec transparence | couleur | | **Background image** | une image de la médiathèque, ou une URL | | | **Background style**, **Background position**, **Border style** | une liste qui commence par **Theme defaults** | | | **Font size** | 0 à 100 | px | | **Border radius** | 0 à 100 | px | | **Opacity** | 0 à 1, par pas de 0.01 | | | **Drop shadow** | niveaux 0 à 5 | | | Modèle de boîte **Margin** | -200 à 200 | **PX** ou **%** | | Modèle de boîte **Padding** | 0 à 200 | **PX** ou **%** | | Modèle de boîte **Border** | 0 à 50 | px | | largeur × hauteur du modèle de boîte | 0 à 2000 | **PX** ou **%** | Une valeur saisie hors plage est ramenée à la limite la plus proche. Le modèle de boîte et ses verrous sont expliqués sur la page [espacement](/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/espacement). ## Comment les paramètres se comportent ### Valeurs par défaut du thème Une couleur vide, un curseur sur 0, une liste sur **Theme defaults** et un côté du modèle de boîte qui affiche « - » signifient tous la même chose. DXPR Builder n’écrit rien, et votre thème décide. Ainsi **Opacity** sur 0 ne masque pas un élément, et **Font size** sur 0 garde la taille du thème. Pour revenir à l’aspect du thème, cliquez sur **Clear** dans le sélecteur de couleur, remettez le curseur sur 0 ou choisissez de nouveau **Theme defaults**. ### Où les paramètres arrivent Chaque paramètre **Style** sauf **Drop shadow** est enregistré comme un style en ligne sur l’élément. Les styles en ligne battent le CSS ordinaire du thème. Deux choses les battent encore : les règles du thème marquées `!important`, et les classes utilitaires Bootstrap sous **HTML classes**, qui portent aussi `!important`. Sur certains éléments, les paramètres vont sur une partie intérieure. Sur un **Bouton**, ils stylent le bouton lui-même, sur une **Image** la photo, sur un **Lien** le lien et sur une **Carte** le cadre de carte. ### Toutes les tailles d’écran Les paramètres de style n’ont pas de points de rupture. 64 px de marge intérieure restent 64 px sur un téléphone. Les valeurs en pour cent grandissent et rétrécissent avec la largeur de la page. Pour des valeurs différentes par taille d’écran, utilisez des classes responsive, comme le montre la page [ID et classes HTML](/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/css-personnalise). ### Opacity atténue tout à l’intérieur **Opacity** agit sur l’élément entier. Elle atténue le cadre, la bordure, le texte et chaque élément à l’intérieur. Pour un cadre transparent derrière un texte solide, laissez **Opacity** sur 0. Choisissez plutôt une couleur de **Background** avec de la transparence : le sélecteur de couleur a son propre curseur d’opacité pour cela. ### Style de survol **Hover style** est un panneau séparé sous **Style**. Il a les mêmes contrôles, son propre modèle de boîte inclus. Ses valeurs s’appliquent pendant que le pointeur est sur l’élément. Contrairement aux valeurs **Style**, elles sont elles-mêmes marquées `!important`, elles battent donc vos valeurs **Style**, les classes utilitaires sous **HTML classes** et la plupart des règles du thème. Seul **Drop shadow** apparaît en fondu, en 0,15 seconde. Les autres changements au survol basculent aussitôt, sauf si votre thème les anime. Les boutons Bootstrap fondent les couleurs en 0,15 seconde. Les téléphones et tablettes n’ont pas de pointeur. Leurs visiteurs ne voient un aspect de survol qu’après un toucher, n’y placez donc jamais d’information dont ils ont besoin. ### Éléments avec leurs propres paramètres Certains éléments ont leur propre paramètre pour le même travail. Leur propre paramètre gagne, et le contrôle **Style** ne fait rien. | Élément | Ignoré dans Style | Utiliser plutôt | |---|---|---| | Compteur circulaire | **Background**, **Font size**, largeur × hauteur | **Background color** et **Dimension** dans **General**, **Font size** dans **Circle content** | | Barre de progression | **Background**, largeur × hauteur | **Back color**, **Front color** et **Bar height** dans **General** | | Séparateur | **Background**, largeur | **Color** et **Length** dans **General** | | Compteur de nombres | **Font size** | **Font size** dans **General** | | Image | largeur × hauteur | **Image width** et **Image height** dans **General** | | Carte | largeur × hauteur | **Map width** et **Map height** dans **General** | | Défilement | largeur × hauteur | **Image width** et **Height** dans **General** | | Vidéo, vidéo locale | largeur | **Video width** dans **General** | | Couches positionnées | largeur × hauteur | **Width** et **Height** dans **General** | ## Si votre changement ne s’affiche pas - **Le changement a disparu à la fermeture de la boîte de dialogue.** Vous l’avez fermée avec **Cancel**, l’icône de fermeture ou la touche Échap, ce qui a remis les anciens paramètres. Refaites le changement et cliquez sur **Enregistrer** dans la boîte de dialogue. - **Le changement a disparu après un rechargement de la page.** **Enregistrer** dans la boîte de dialogue ne garde un changement que dans l’éditeur. Cliquez sur **Enregistrer** sur la barre d’outils avant de quitter la page. - **L’aspect du thème reste.** Une classe utilitaire Bootstrap sous **HTML classes** ou une règle du thème avec `!important` gagne. Ouvrez le panneau **General** et retirez la pastille de classe, par exemple **Primary background**, ou interrogez votre webmestre sur la règle du thème. - **Un contrôle ne fait rien du tout.** Certains éléments ont leur propre paramètre pour le même travail. Voir [Éléments avec leurs propres paramètres](#elements-with-their-own-settings). - **Le bouton ne change plus de couleur au survol.** Votre **Background** remplace la couleur de survol du thème. Définissez aussi un **Background** dans le panneau **Hover style**. - **Le texte s’est atténué avec le cadre.** **Opacity** atténue l’élément entier. Remettez-la sur 0 et utilisez une couleur de **Background** avec transparence. - **Opacity sur 0 ne masque pas l’élément.** 0 signifie **Theme defaults**. Ajoutez plutôt la classe **Hide element (d-none)** sous **HTML classes**. ## Et ensuite ? - [Arrière-plans](/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/arriere-plan) : placez une photo derrière un titre et gardez le titre lisible.