En-tête réduit

Présentation

L'en-tête réduit est une version rétrécie de l'en-tête du site, qui vous permet de faire en sorte que les informations de navigation importantes restent fixes, sans distraire les utilisateurs lorsqu'ils font défiler une page et sans prendre trop de place. Il agit de la même façon que l'option Sticky header (En-tête fixe), mais condense la taille des logos et des autres widgets dans votre en-tête. Il s'avère particulièrement utile pour les sites présentant de grands en-têtes, et ceux conçus pour un long défilement. 

shrinkingheader.gif

Guide

Ouvrez l'éditeur de conception d'en-têtes en cliquant sur l'icône d'en-tête et en choisissant « Edit Design » (Modifier la mise en forme).

Activez l'en-tête réduit en cliquant sur le bouton de la coche.

shrinkingheader2.png

Que se passe-t-il lorsque l'en-tête réduit est activé ?

Lorsque l'en-tête réduit est activé :

  • Le site défile légèrement vers le bas pour afficher les effets de l'en-tête réduit.
  • L'option Sticky header (En-tête fixe) est automatiquement appliquée à l'en-tête.
  • L'espacement d'en-tête modifie les marges intérieures supérieure / inférieure et les marges, et les règle sur 0. Veuillez noter que seules les marges intérieures et les marges de l'en-tête sont modifiées, pas les lignes à l'intérieur de l'en-tête. 
  • Les images intégrées dans l'en-tête rétrécissent selon le pourcentage indiqué dans la barre destinée à la taille du logo (par défaut = 66 %). Veuillez noter que toutes les images de l'en-tête rétrécissent à la taille du logo.
  • La modification de la mise en forme de l'en-tête ne change pas les paramètres de l'en-tête réduit.
  • Tous les widgets ne sont pas compatibles et n'apparaîtront pas dans l'en-tête réduit. Les widgets suivants sont les seuls widgets à s'afficher dans un en-tête réduit :
    • Navigation
    • Widget Multi-Language (Multilingue)
    • Icônes de réseaux sociaux
    • Bouton Click to Call (Cliquer pour appeler)
    • Bouton OpenTable
    • Bouton Click to Email (Cliquer pour envoyer un e-mail)
    • vCita
    • Bouton PayPal
    • Bouton Like (J'aime) de FaceBook
    • Images et logos
    • Panier de la boutique
    • Widgets Paragraph (Paragraphe)
    • Widgets Title (Titre)
    • Boutons

Options de personnalisation de la mise en forme

Dans l'éditeur de conception, vous pouvez modifier les paramètres suivants de façon à personnaliser l'en-tête réduit :

  • Only Show Navigation Row (Afficher uniquement la ligne de la navigation) : seule la ligne correspondant à la navigation s'affiche lorsque l'en-tête rétrécit. Cette fonctionnalité peut uniquement être utilisée s'il y a plusieurs lignes dans l'en-tête.
  • Logo Size (Taille du logo) : permet de modifier la taille de rétrécissement du logo ou de l'image lorsque l'en-tête rétrécit (par défaut = 66 %).
  • Background color (Couleur d'arrière-plan) : permet de changer la couleur d'arrière-plan de l'en-tête réduit. Veuillez noter que la couleur d'arrière-plan de la ligne l'emporte sur la couleur d'arrière-plan de l'en-tête réduit. 
  • Header spacing (Espacement d'en-tête) : permet aux utilisateurs de régler les marges intérieures supérieure et inférieure de l'en-tête réduit. Il est possible de modifier l'espacement d'en-tête selon l'appareil. 

Quels sont certains des effets d'un en-tête réduit ?

L'en-tête rétrécit une fois que l'utilisateur fait défiler la page au-delà de la hauteur d'en-tête définie. Une fois que l'en-tête est réduit :

  • Si les colonnes présentent un widget visible, le widget est centré verticalement à l'intérieur de la colonne, et ses marges intérieures supérieure / inférieure et ses marges sont réglées sur 0.
  • Si les colonnes présentent plusieurs widgets visibles, les widgets ne sont pas alignés verticalement, et les marges intérieures supérieure / inférieure et les marges sont réglées sur 10 px.
  • S'il existe des lignes vides comportant des colonnes, les colonnes occupent tout l'espace de la ligne. 
  • Pour traiter les modèles proposant une hauteur d'en-tête minimale, la hauteur d'en-tête minimale est réglée sur Auto.

Remarques

Puis-je modifier les widgets lorsque l'en-tête est réduit ?

Non. Vous devez accéder au haut de page du site pour pouvoir modifier l'en-tête.

Pour quels affichages et paramètres l'en-tête réduit sera-t-il disponible ?

L'en-tête réduit est disponible pour les affichages Desktop (Bureau) et Tablet (Tablette). Les en-têtes réduits peuvent uniquement être activés lorsque l'en-tête est transformé en ligne. Si l'en-tête n'est pas une ligne et si le modèle présente un en-tête fixe, l'option Shrinking header (En-tête réduit) n'est pas disponible.

L'en-tête réduit modifie-t-il l'espacement des marges intérieures et des marges appliqué aux lignes intégrées dans l'en-tête ?

Non. L'en-tête réduit rétrécit l'en-tête en réglant les marges intérieures supérieure / inférieure et les marges sur 0. Cependant, si un espacement spécifique est appliqué aux lignes intégrées dans l'en-tête, il ne modifie pas les marges intérieures et les marges de ces lignes. 

Les propriétés de mise en forme de l'en-tête réduit prévalent-elles sur les propriétés de la ligne (ex : couleur d'arrière-plan) ? 

Non. Les propriétés de mise en forme de la ligne prévalent sur les propriétés de l'en-tête réduit. Par exemple, si vous définissez un arrière-plan de ligne dans l'en-tête, l'arrière-plan de ligne s'affiche au-dessus de l'arrière-plan de l'en-tête réduit.  

Que se passe-t-il si un widget de l'en-tête n'apparaît pas dans l'en-tête réduit ?

Si un widget de votre en-tête n'est pas compatible avec l'en-tête réduit, une colonne vide apparaît à la place du widget lors du déclenchement de l'en-tête réduit. 

Les lignes vides s'affichent-elles dans l'en-tête réduit ?

Oui. Même si vous supprimez le widget d'une ligne pour créer une ligne vide, les marges intérieures et les marges de la ligne ne disparaissent pas et s'affichent dans l'en-tête réduit.

Que se passe-t-il si j'ajoute un logo central à la ligne de navigation, ou si je change le logo ?

La taille du logo central diminue de la même façon que celle du logo classique. Cependant, si vous changez le logo, vous devrez redéfinir sa taille.

Les widgets sont-ils alignés sur la ligne ou sur la colonne ?

Les widgets sont alignés verticalement au centre de la colonne.

Je ne vois pas mon en-tête réduit ! Que s'est-il passé ?

Si la longueur de la page correspond à la taille de la fenêtre d'affichage, vous ne verrez pas l'en-tête réduit. Votre site doit présenter suffisamment de lignes pour que vous puissiez faire défiler la page vers le bas et déclencher l'en-tête réduit. Si la page de votre site ne présente qu'une seule ligne, vous ne pourrez pas la faire défiler et l'en-tête réduit ne se déclenchera pas.