L'en-tête est la zone de votre site réservée au logo et à la navigation. Il existe de nombreuses façons de modifier le style de votre en-tête afin de le rendre plus attrayant.
La fonction de défilement sur l'en-tête permet de maintenir les éléments de navigation essentiels, tels que le logo et le menu, visibles en haut de l'écran lorsque les utilisateurs font défiler la page. Il condense les logos et la taille générale de l'en-tête pour gagner de l'espace et assurer un accès facile à la navigation sans être intrusif. Idéal pour les sites comportant de grands en-têtes ou conçus pour un défilement prolongé, il améliore l'expérience de l'utilisateur en maintenant l'accessibilité aux principales options de navigation.
Il est important de noter que l'en-tête collant doit déjà être activé avant que le défilement de l'en-tête puisse être activé.
Pour activer le défilement sur l’en-tête :
-
hover sur l'en-tête et cliquez sur En-tête.
-
Cliquez sur Modifier la conception. Le panneau Conception de l'en-tête apparaît.
-
Développez la section Position et activez la case à cocher Définir comme en-tête collant si elle n'est pas déjà activée.
-
Activez la bascule Modifier l'en-tête lors du défilement.
-
Configurez les options de conception suivantes :
-
Rembourrage. Définissez les valeurs initiales de padding-top et padding-bottom des en-têtes (ceci n'est pas spécifique à l'option d'en-tête collant).
-
BG sur le parchemin. Sélectionnez la couleur et l'opacité de l'arrière-plan. Les modifications apportées à l'une des tailles d'écran se répercutent sur les autres.
-
Espace sur le rouleau. Définissez le remplissage supérieur et inférieur en px, %, vh ou vw. Si vous souhaitez ignorer les paramètres de taille d'écran de desktop, vous pouvez effectuer des modifications sur les tablettes et les téléphones portables.
-
Taille du logo. Utilisez le curseur ou la zone de texte pour spécifier la taille à laquelle le logo se réduit lorsque l'en-tête se rétrécit lors du défilement. La valeur par défaut est 66%. Les modifications doivent être effectuées en fonction de la taille de l'écran.
-
Les modifications apportées dans la section Mise en page du panneau de conception d'en-tête n'affectent pas les paramètres de position.
Vous avez la possibilité de faire en sorte que l'en-tête se superpose au contenu de la première ligne de la page. Cela peut créer un effet visuel attrayant où l'en-tête s'intègre parfaitement au contenu. Si vous le souhaitez, vous pouvez faire en sorte que l'en-tête chevauche la première ligne. Cette fonction doit être activée pour chaque page.
Pour activer l'en-tête de superposition avec la première ligne :
-
hover sur l'en-tête et cliquez sur En-tête.
-
Cliquez sur Modifier la conception. Le panneau Conception de l'en-tête apparaît.
-
Développez la section Position , et activez la bascule pour la section Chevauchement 1 à la page.
-
(Facultatif) Configurez une couleur d'arrière-plan qui s'appliquera à toutes les tailles d'écran.
Tous les sites widget ne sont pas compatibles et apparaissent dans l'en-tête qui se rétrécit. Si vous avez un widget dans l'en-tête qui n'est pas compatible avec le rétrécissement de l'en-tête, une colonne vide apparaît à la place du widget. Vous ne pouvez pas éditer widget lorsque l'en-tête est réduit.
Les sites widget suivants sont compatibles et s'affichent dans un en-tête réduit :
-
Navigation
-
Multilingue
-
Icônes
-
Bouton Click to Call (Cliquer pour appeler)
-
Bouton Click to Email (Cliquer pour envoyer un e-mail)
-
vCita
-
Bouton PayPal
-
Bouton j’aime
-
Images et logos
-
Paragraphe widget
-
Titre widget
-
Boutons
Un en-tête collant devient statique et reste en place lorsque vous faites défiler les pages de votre site.
Pour activer un en-tête collant :
-
hover sur l'en-tête, cliquez sur En-tête, puis sur Modifier la conception.
-
Dans l'onglet Contenu, sélectionnez Définir comme en-tête collant. Si l'option d'en-tête collant n'est pas disponible, vous devez désactiver l'option de réduction de l'en-tête dans l'onglet Réduction de l'en-tête.
Vous pouvez choisir parmi plusieurs modèles d'en-têtes flexibles préconçus. Si vous passez à l'une des dispositions d'en-tête flexibles prédéfinies, vous ne pouvez pas revenir à un en-tête fixe, vous ne pouvez passer que d'une disposition d'en-tête flexible à l'autre. Le changement de mise en page supprime également le contenu existant dans la section de l'en-tête. Nous vous recommandons de créer une sauvegarde avant de changer de présentation.
Pour modifier la mise en page d'un en-tête :
-
hover sur l'en-tête et cliquez sur En-tête.
-
Dans l'onglet Conception, sélectionnez une nouvelle disposition d'en-tête. Si vous passez à un en-tête collant, vous devez d'abord désactiver l'option de réduction de l'en-tête dans l'onglet Réduction de l'en-tête.
-
Mise en page : Explorez les options de mise en page qui associent les styles de navigation supérieure et de hamburger de manière cohérente en fonction de la taille de l'écran. Alors que les mises en page par défaut ont des capacités limitées, une option d'édition avancée permet d'accroître la flexibilité.
-
Espacement: Définissez les marges et l'espacement, les modifications apportées à l'adresse desktop ayant une incidence sur les autres tailles d'écran si leur espacement n'est pas modifié.
-
Arrière-plan: Choisissez la couleur ou l'image d'arrière-plan, ajoutez des bordures ou des ombres, et constatez que les changements sont répercutés de manière transparente sur toutes les tailles d'écran.
-
Position: Activez un en-tête collant avec des modifications basées sur le défilement. L'activation de l'en-tête collant sur n'importe quelle taille d'écran influence le comportement sur d'autres écrans.
Si l'en-tête contient une image, le logo du site sera conservé lors du changement de mise en page. En présence de plusieurs images, ou si le logo est constitué de texte, l'image du logo restera la même que dans la mise en page. Il est important de noter que les en-têtes entre les appareils ne sont pas connectés, donc si vous ajoutez un logo sur l'ordinateur de bureau, il n'est pas automatiquement ajouté aux autres types d'appareils. La seule exception est que si la disposition de l'en-tête de la barre supérieure est utilisée sur une tablette, elle héritera de tout changement de logo effectué sur l'ordinateur de bureau.
Si vous supprimez le logo, ajoutez de nouveau l'image en la faisant glisser vers l'en-tête, puis configurez le lien pour revenir à la page d'accueil.
L'édition avancée peut être activée pour l'en-tête afin d'accéder à davantage d'options de personnalisation, telles que la possibilité d'ajouter davantage de widget et d'éléments. La modification de la disposition de l'en-tête (dans le panneau Conception de l'en-tête) réinitialise toutes les modifications apportées et désactive l'édition avancée.
Remarque
Comme les en-têtes se synchronisent entre les tailles d'écran, il est recommandé de vérifier toutes les tailles d'écran lors de l'utilisation de l'option d'édition avancée.
Lorsque vous utilisez l'édition avancée, il est recommandé de vérifier toutes les tailles d'écran en raison de la synchronisation des en-têtes.
Pour activer l'édition avancée :
-
Cliquez sur l'onglet En-tête .
-
Cliquez sur Modifier la conception.
-
Dans la section Mise en page, cliquez sur Activer l'édition avancée.
Si vous prévoyez d'afficher des éléments différents sur desktop et sur mobile (par exemple, un bouton sur desktop et une icône sur mobile), utilisez la fonction de masquage/affichage pour des transitions transparentes.
Pour désactiver l'édition avancée et réinitialiser l'en-tête, sélectionnez une autre mise en page :
-
Cliquez sur l'onglet En-tête.
-
Cliquez sur Modifier la conception.
-
Dans la section Mise en page, cliquez sur la flèche pour accéder aux options de mise en page.
-
Sélectionnez une autre mise en page pour désactiver l'édition avancée et réinitialiser l'en-tête. Toute modification effectuée à l'aide de l'édition avancée sera annulée et ne sera pas sauvegardée.
Commentaires
0 commentaire
Cet article n'accepte pas de commentaires.