À 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.
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.
Pour ajouter un Header Row à un Header Builder, sélectionnez ce dernier puis cliquez sur Primary > Add Another Row dans ses paramètres.
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 :
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).
Pour que votre en-tête recouvre le contenu de la page, suivez ces étapes :
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.
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).
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