Modifier l’aspect d’un élément dans le panneau Style.

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.
• 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 et ID et classes HTML.
• 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

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.

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.

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.

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.
• 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 : placez une photo derrière un titre et gardez le titre lisible.