L'option Rétrécissement de l'en-tête permet d'afficher une version compacte de l'en-tête du site. Ainsi, 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 comme l'option En-tête fixe, mais réduit la taille des logos et des autres 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.
L'en-tête réduit est disponible sur les ordinateurs de bureau et les tablettes uniquement si vous utilisez la disposition de l'en-tête de la barre supérieure.
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.
- Si les colonnes présentent un visible, il sera centré verticalement à l'intérieur de la colonne, et les marges intérieures en bas et en haut et extérieures seront réglées sur 0 pixel.
- Si les colonnes présentent plusieurs visibles, ils ne seront pas alignés verticalement, et les marges intérieures en bas et en haut et extérieures seront réglées sur 10 pixels.
- S'il existe des lignes vides comportant des colonnes, les colonnes occuperont 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.
Pour modifier le design d'un en-tête réduit :
- Survolez l'en-tête, cliquez sur En-tête, puis Modifier le design.
- Dans l'onglet Rétrécissement de l'en-tête, activez l'option Activer le rétrécissement de l'en-tête. Vous disposez des options suivantes :
- Afficher uniquement la barre de navigation. Seule la ligne correspondant à la navigation s'affiche quand l'en-tête est rétréci. Cette fonctionnalité peut uniquement être utilisée s'il y a plusieurs lignes dans l'en-tête.
- Couleur d'arrière-plan. Changez 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.
- Plus de couleurs d'en-tête pendant le défilement. Précisez les couleurs pendant le défilement pour les éléments d'en-tête suivants : texte, liens sélectionnés et survolés, icônes, texte des boutons...
- Dimensions du logo. Modifiez la taille du logo ou de l'image lorsque l'en-tête est réduit (valeur par défaut : 66 %).
- Modifier le logo pendant le défilement. Sélectionnez le logo à afficher lors du défilement.
- Espacement. Modifiez l'espacement intérieur et les marges extérieures pour l'en-tête réduit. Il est possible de modifier l'espacement de l'en-tête selon l'appareil.
Lorsque l'en-tête réduit est activé :
- Le logo et les effets de l'en-tête réduit s'affichent lorsque vous faites défilez le site vers le bas.
- L'option Sticky header (En-tête fixe) est automatiquement appliquée à l'en-tête.
- L'espacement de l'en-tête sera modifié à 0 pixel pour l'espacement intérieur et les marges.
Cela affecte l'espacement intérieur et les marges de l'en-tête, mais pas les lignes à l'intérieur de celui-ci.
- La taille des images de l'en-tête est réduite selon le pourcentage choisi dans la barre dédiée à la taille du logo (valeur par défaut : 66 %).
- La modification de la mise en page de l'en-tête ne change pas les paramètres de l'en-tête réduit.
- Tous les ne sont pas compatibles et n'apparaîtront pas dans l'en-tête réduit. Voici ceux qui s'afficheront :
- Navigation
- Widget Multi-Language (Multilingue)
- Icônes
- 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
- Vous ne pouvez pas modifier les quand l'en-tête est réduit.
- Les propriétés de design 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.
- Si un de votre en-tête n'est pas compatible avec l'en-tête réduit, une colonne vide viendra le remplacer.
- Les lignes vides s'affichent dans l'en-tête réduit.
- Si vous ne parvenez pas à visualiser votre en-tête réduit, vérifiez d'abord que votre site présente 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 votre page ne possède qu'une ligne, il sera impossible de faire défiler le site.