Lier vers des sections et réutiliser des styles avec des classes.

Apprendre DXPR BuilderCréer des pagesStyler vos éléments

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.
  • 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.

Panneau General d’un bouton avec le Title See our programmes et le Link #programmes, à côté de ce bouton sur la page

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.

Champ HTML classes d’un élément de texte avec la pastille Hidden on extra small devices, phones (<576px), à côté du cadre gris Plan your visit, toujours affiché en largeur bureau

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.

HTML classes en mode Edit as text, un champ brut affichant brand-card py-3 py-lg-5, à côté du cadre gris Partner with us avec le padding de classe au-dessus et en dessous de son texte

Ce que vous voyez

Panneau General de section avec HTML ID open-day et trois pastilles de classe, à côté de cette section avec un arrière-plan gris et du texte centré

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.

La liste HTML classes filtrée par le mot padding, montrant le groupe Padding avec Padding size 1 to 5 et No padding, à côté du texte Course fees qu’elle va styler

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 :

.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. Pour des styles sur tout le site, voir CSS sur mesure.

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 : planifiez quels éléments montrer sur chaque taille d’écran.