--- url: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/css-personnalise' title: 'Lier vers des sections et réutiliser des styles avec des classes | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T14:44:12+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Donnez à une section un HTML ID pour qu’un bouton puisse sauter vers elle. Ajoutez des HTML classes pour masquer un élément sur les téléphones, pour régler l’espacement par taille d’écran, ou pour réutiliser un aspect défini par votre thème. Vous trouvez les deux champs en bas du panneau General de chaque élément. Une classe garde un aspect cohérent : quand sa règle CSS change, chaque élément avec cette classe suit. La vidéo suit la première recette ci-dessous : elle fait sauter un bouton vers une section plus bas sur la page. 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: 'Lier vers des sections et réutiliser des styles avec des classes' description: |- Donnez à une section un HTML ID pour qu’un bouton puisse sauter vers elle. Ajoutez des HTML classes pour masquer un élément sur les téléphones, pour régler l’espacement par taille d’écran, ou pour réutiliser un aspect défini par votre thème. Vous trouvez les deux champs en bas du panneau General de chaque élément. Une classe garde un aspect cohérent : quand sa règle CSS change, chaque élément avec cette classe suit. La vidéo suit la première recette ci-dessous : elle fait sauter un bouton vers une section plus bas sur la page. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T14:44:12+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/css-personnalise' articleSection: 'Styler vos éléments' - '@type': WebPage '@id': 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/css-personnalise' description: |- Donnez à une section un HTML ID pour qu’un bouton puisse sauter vers elle. Ajoutez des HTML classes pour masquer un élément sur les téléphones, pour régler l’espacement par taille d’écran, ou pour réutiliser un aspect défini par votre thème. Vous trouvez les deux champs en bas du panneau General de chaque élément. Une classe garde un aspect cohérent : quand sa règle CSS change, chaque élément avec cette classe suit. La vidéo suit la première recette ci-dessous : elle fait sauter un bouton vers une section plus bas sur la page. 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) # Lier vers des sections et réutiliser des styles avec des classes. Apprendre DXPR BuilderCréer des pagesStyler vos éléments ## Dans ce guide Guides associés - [Adapter votre mise en page aux téléphones](/fr/hc/documentation/apprendre-dxpr-builder/design/design-responsive) Donnez à une section un **HTML ID** pour qu’un bouton puisse sauter vers elle. Ajoutez des **HTML classes** pour masquer un élément sur les téléphones, pour régler l’espacement par taille d’écran, ou pour réutiliser un aspect défini par votre thème. Vous trouvez les deux champs en bas du panneau **General** de chaque élément. Une classe garde un aspect cohérent : quand sa règle CSS change, chaque élément avec cette classe suit. La vidéo suit la première recette ci-dessous : elle fait sauter un bouton vers une section plus bas sur la page. ## 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 garde un changement dans l’éditeur. **Enregistrer** sur la barre d’outils du constructeur au-dessus de votre contenu stocke la page et affiche « Saved field ». - **Utilisez un HTML ID** pour une cible de saut. Un bouton « Book a tour » peut défiler vers le formulaire de réservation. Une liste de liens en haut d’une longue page peut mener vers chaque partie. - **Utilisez une classe pour un aspect qui se répète.** Votre webmestre écrit le CSS une fois, et vous ajoutez la classe où il faut. Le panneau **Style** copie plutôt les valeurs dans chaque élément, ce qui diverge avec le temps. - **Utilisez une classe pour ce que le panneau Style ne peut pas faire**, comme masquer un élément sur les téléphones ou changer l’espacement par taille d’écran. ## Recette : un bouton qui saute vers une section 1. Survolez la **Section** cible, cliquez sur **Plus**, puis sur **Paramètres**. 2. Dans le panneau **General**, saisissez un nom court, comme `programmes`, dans **HTML ID**. Cliquez sur **Enregistrer**. 3. Ouvrez les paramètres du **Bouton**. Dans **Link**, saisissez `#` suivi d’exactement le même nom : `#programmes`. Cliquez sur **Enregistrer**. 4. Cliquez sur **Enregistrer** sur la barre d’outils du constructeur. 5. Choisissez **Aperçu** dans le menu d’affichage (l’icône en forme d’œil) et cliquez sur le bouton. Testez avec la section plus bas sur la page que le bouton, pour voir le défilement. Si la cible se trouve dans un panneau repliable, un onglet ou une diapositive de carrousel, le lien l’ouvre d’abord. ## Recette : masquer un élément sur les téléphones 1. Survolez l’élément, cliquez sur **Plus**, puis sur **Paramètres**. 2. Dans le panneau **General**, cliquez sur la boîte **HTML classes**. 3. Choisissez **Hidden on extra small devices, phones (<576px)**. Elle se trouve dans le groupe **Responsive Visibility**. 4. Cliquez sur **Enregistrer** dans la boîte de dialogue, puis sur **Enregistrer** sur la barre d’outils. L’élément disparaît désormais sur les écrans de moins de 576 px, dans l’éditeur aussi. Pour le vérifier, ouvrez la page sur un téléphone. ## Recette : saisir vos propres classes La boîte **HTML classes** ne permet que de choisir dans sa liste. Pour saisir un nom de classe, basculez-la d’abord en texte. 1. Survolez l’élément, cliquez sur **Plus**, puis sur **Paramètres**. 2. Sous **HTML classes**, cliquez sur **Edit as text**. La boîte devient un champ de texte brut qui liste les classes déjà portées par l’élément. 3. Ajoutez vos noms de classe après, séparés par des espaces, par exemple `brand-card py-3 py-lg-5`. Omettez le point : `.brand-card` dans le CSS de votre équipe vaut `brand-card` ici. 4. Cliquez sur **Enregistrer** dans la boîte de dialogue, puis sur **Enregistrer** sur la barre d’outils. L’élément prend l’aspect défini par votre équipe web. ## Ce que vous voyez Dans l’**Aperçu**, le bouton fait défiler la page en douceur vers la section et laisse la place pour un en-tête fixe ; la barre d’adresse se termine par `#programmes`. Sous 576 px de large, l’élément masqué a disparu. Les classes saisies s’affichent comme des pastilles à la prochaine ouverture de la boîte de dialogue, entre guillemets quand elles ne figurent pas dans la liste, comme « brand-card ». ## Comment les champs marchent ### HTML ID Un ID doit commencer par une lettre. Après, il peut contenir lettres, chiffres, traits d’union et soulignés, mais pas d’espaces. Un mauvais ID montre une erreur sous le champ, et **Enregistrer** ne fait rien jusqu’à sa correction. Si vous laissez le champ vide, l’élément garde un ID fabriqué par DXPR Builder. Le champ vide le montre en gris. Utilisez chaque ID une fois par page : quand deux éléments en partagent un, les liens sautent vers le premier. ### HTML classes La liste contient des classes d’ombre et des classes Bootstrap 5, groupées par fonction, comme **Margins**, **Padding**, **Responsive Visibility** et **Rounded Corners**. Votre thème peut ajouter son propre groupe à la fin. Faites défiler la liste ouverte, ou saisissez une partie d’un nom comme padding, py-5 ou circular pour la réduire. Saisir ne fait que filtrer la liste ; pour une classe qui n’y figure pas, utilisez **Edit as text**. Les classes de Bootstrap ne marchent que quand la page charge Bootstrap 5. Il vient de votre thème, ou de **General Settings** > **Bootstrap** (`/admin/dxpr_studio/dxpr_builder/settings`), où **Sideload Bootstrap files** est réglé sur **Bootstrap 5**. Les classes utilitaires de Bootstrap, comme les classes de couleur et d’espacement, sont marquées `!important`. Elles battent le panneau **Style** sur la même propriété. **Primary background** bat **Background**, et **Top margin size 3 (mt-3)** bat le **Margin** haut. Une classe avec une taille d’écran dans son nom s’applique depuis cette largeur vers le haut : | Dans le nom de classe | S’applique depuis | |---|---| | `sm` | 576 px | | `md` | 768 px | | `lg` | 992 px | | `xl` | 1200 px | | `xxl` | 1400 px | Ainsi `py-3 py-lg-5` donne 16 px de marge intérieure en haut et en bas sur les petits écrans, et 48 px depuis 992 px de large. ### Pour votre développeur de thème Une classe a besoin d’une règle CSS dans le thème, par exemple : ```css .brand-card { background: #f4f6fb; border-left: 4px solid #1a4d8f; padding: 2rem; } ``` Pour montrer la classe dans la liste **HTML classes** aux rédacteurs, enregistrez-la dans le `.info.yml` du thème ; voir [Classes utilitaires](/fr/hc/documentation/learn-dxpr-builder/customization/utility-classes). Pour des styles sur tout le site, voir [CSS sur mesure](/fr/hc/documentation/learn-dxpr-builder/customization/custom-css). ## Si rien ne s’affiche - **Enregistrer ne fait rien et HTML ID dit « ID must start with a letter ».** L’ID enfreint les règles ci-dessus. Commencez-le par une lettre, et n’utilisez que lettres, chiffres, traits d’union et soulignés. - **Vous ne pouvez pas saisir une nouvelle classe.** La boîte ne fait que filtrer sa liste. Cliquez d’abord sur **Edit as text**. - **Une classe attendue manque dans la liste.** La liste ne contient que les classes définies par DXPR Builder et votre thème. Cliquez sur **Edit as text** et saisissez-la. - **Le bouton ne défile pas du tout.** **Link** doit être `#` suivi d’exactement le HTML ID, avec les mêmes capitales. Vérifiez les deux champs, et testez dans l’**Aperçu**. - **Une classe n’a aucun effet.** Le nom est mal orthographié, le thème n’a pas de règle pour elle, ou Bootstrap 5 n’est pas chargé. Vérifiez l’orthographe, puis interrogez votre webmestre sur la règle ou **Sideload Bootstrap files**. - **La classe de votre équipe ne change que certaines choses.** Une valeur du panneau **Style** sur la même propriété bat une classe du thème. Effacez cette valeur dans le panneau **Style**. - **Le bouton saute au mauvais endroit.** Deux éléments partagent l’ID, et le premier gagne. Donnez à chaque élément son propre ID. - **Le titre de section se cache sous l’en-tête fixe.** DXPR Builder ne reconnaît pas votre en-tête. Un webmestre règle **Scroll offset selector** sous **General Settings** > **Advanced Settings** (`/admin/dxpr_studio/dxpr_builder/settings`) sur le sélecteur CSS de l’en-tête. ## Et ensuite ? - [Design responsive](/fr/hc/documentation/learn-dxpr-builder/design/responsive-design) : planifiez quels éléments montrer sur chaque taille d’écran.