Constructeur d'en-tête

À l’aide du Header Builder vous pouvez facilement construire des en-têtes responsives, fixes et comprenant plusieurs rangées.

Cliquez sur +Add > Helpers > Header Builder pour ajouter un constructeur d’en-tête à votre page.

Positionner des éléments

Chaque élément Header Builder est constitué de plusieurs éléments Header Row (rangée d’en-tête). Chacun de ces élément est divisé en trois sous-éléments : gauche, centre et droite.

Vous pouvez réorganiser les éléments intérieurs de chaque Header Row en les déplaçant avec la souris. Vous pouvez également utiliser le panneau Structure pour le positionnement.

Rangées multiples

Pour ajouter un Header Row à un Header Builder, sélectionnez ce dernier puis cliquez sur Primary > Add Another Row dans ses paramètres.

En-tête fixe

Pour fixer un en-tête en haut de la page de manière à ce qu’il y reste quand l’utilisateur fait défiler la page, suivez ces étapes :

1. Sélectionnez Header Builder dans le panneau de Structure sur le côté droit.
2. Cliquez Sticky dans le panneau de gauche.
3. Cochez la case Enable Sticky Header.

Options de configuration pour l’en-tête fixe

• scroll distance : de combien la page doit défiler avant que l’en-tête fixe soit montré.
• sticky background color : une couleur d’arrière-plan qui s’appliquera au Header Builder uniquement quand il sera fixe – utile pour créer des en-têtes transparents qui passent au-dessus d’une image d’arrière-plan fixe.
• sticky above : l’en-tête ne restera fixe que pour les écrans plus grand que cette taille – utilisé pour cacher l’en-tête sur les mobiles.
• sticky box shadow : code CSS pour personnaliser l’ombre sous l’en-tête lorsqu’il est fixe.
• sticky header z-index : définit un z-index pour l’en-tête fixe – utile pour empêcher les autres éléments de la page d’apparaître par dessus l’en-tête fixe au défilement de la page.
• fade in sticky : cochez cette case pour utiliser une animation de fondu lorsque l’en-tête se fixe.
  • fade in speed : la vitesse de l’animation de fondu.

Visibilité d’une rangée d’en-tête selon l’état fixe ou non

Chacune des rangées d’un élément d’en-tête peut être configurée pour s’afficher ou non selon que l’en-tête est fixe ou non. Pour changer ces réglages, sélectionnez une Header Row dans le panneau Structure à droite. Dans les propriétés à gauche, sous l’onglet Primary, vous verrez une section Sticky Display. Là, vous pouvez choisir de ne la montrer que dans l’en-tête fixe (only show in sticky) ou au contraire de la cacher dans l’en-tête fixe (hide in sticky).

En-tête superposé

Pour que votre en-tête recouvre le contenu de la page, suivez ces étapes :

1. Sélectionnez Header Builder dans le panneau Structure à droite.
2. Cliquez sur Overlay dans le panneau de gauche.
3. Utilisez le menu déroulant Overlay Header pour choisir la largeur d’affichage au-dessus de laquelle vous voulez que votre en-tête se superpose au contenu de la page.

Cela donnera un en-tête superposé sur toutes les pages et tous les posts sur lesquels il est présent. Vous pouvez aussi décider de la position de l’en-tête pour chaque post ou page individuellement en allant dans l’édition de ce post ou de cette page dans Manage > Settings > Page Settings.

Visibilité d’une ligne d’en-tête selon l’état superposé ou non

Chacune des lignes d’un élément d’en-tête peut être configurée pour s’afficher ou non selon que l’en-tête est superposé ou non. Pour changer ces réglages, sélectionnez une Header Row dans le panneau de structure à droite. Dans les propriétés à gauche, sous l’onglet Primary, vous verrez une section Overlay Display. Là vous pouvez choisir de ne montrer que dans l’en-tête superposé (only show in overlay) ou au contraire de cacher dans l’en-tête fixe (hide in overlay).

En-têtes responsives

Dans l’en-tête, les éléments sont "empilés" horizontalement par défaut. Les éléments Row Left (rangée gauche), Row Center (centre) et Row Right (droite) de la rangée d’en-tête vont apparaître côte à côte sur une seule ligne. Mais sur de petits écrans vous pourriez vouloir empiler ces éléments verticalement.

Pour empiler verticalement tout votre en-tête ou une seule rangée de celui-ci, sélectionnez le Header Builder ou la Header Row puis allez sur Primary. Choisissez une taille d’écran dans le menu déroulant Stack Vertically Below. Quand l’écran sera plus petit que la valeur choisie, les éléments de l’en-tête ou de la rangée sélectionnée vont s’empiler verticalement.

Pour cacher une Header Row en-dessous d’une certaine largeur d’écran, choisissez cette largeur dans le menu déroulant Hide Row Below.

IMA / Ph. Reskator