Comment ajouter un en-tête collant dans le thème Astra

De nombreux sites web sont aujourd'hui conçus avec une navigation supérieure fixe, qui est l'élément de base de la navigation.en-tête collant. Il s'agit d'une méthode de conception courante qui consiste à toujours afficher la navigation supérieure en haut de l'écran lorsque l'on fait défiler la page vers le bas, ce qui permet de revenir rapidement à la page d'accueil.menuou d'autres zones de liaison importantes.

Qu'est-ce qu'un en-tête collant ?

Les en-têtes collants sont ceux qui restent fixés en haut lorsque la page est déroulée vers le bas.pied de pagesection. Utilisez-la pour que les menus de navigation soient toujours visibles, ce qui permet de réduire les sauts et d'améliorer l'accès.

Préparation à l'utilisation

La fonction d'en-tête collant fait partie de la norme Astra Pro Dans le cadre du plugin, vous devez d'abord installer le thème Astra avec le plugin Astra Pro Addon. Une fois le plugin activé, allez dans le backend et ouvrez le module approprié.

Marche à suivre pour activer les en-têtes collants

• Installer et activer le plug-in Astra Pro
• Allez dans le backend et cliquez sur Astra > Dashboard pour ouvrir l'écran d'accueil. En-tête collant module (dans le logiciel)

• Allez dans Apparence > Personnaliser > Constructeur d'en-tête > En-tête collantPour accéder à la page de configuration

Paramètres disponibles pour les en-têtes collants

Correction de l'en-tête principal
Lorsque cette option est activée, la navigation principale reste fixe à l'écran pendant le défilement de la page.

Fixation des zones d'en-tête supérieure et inférieure
Si Above Header ou Below Header sont utilisés, vous pouvez définir séparément s'ils sont fixes ou non.

• L'en-tête est souvent utilisé pour ajouter des boutons, des menus, des informations de contact, etc.
• Sous l'en-tête peuvent être placésrechercher qqch.Encadrés, menus secondaires ou annonces courtes

Vous devez activer le module Sections d'en-tête avant de pouvoir voir les paramètres.

Ajustement du logo et du style

Mise en place de différents logos
Possibilité de définir différents paramètres pour les en-têtes collants logoLe style de conception est distinct du logo principal du site.

Ajouter un logo Retina
Prise en charge du téléchargement des versions HD des logos pour les appareils à haute résolution.

Ajuster la largeur du logo
La largeur du logo peut être contrôlée à l'aide d'un curseur pour s'adapter aux différentes tailles d'appareils.

Définition de la couleur et de la transparence de l'arrière-plan
Si le module Couleurs et arrière-plan est activé, une couleur d'arrière-plan peut être définie pour l'en-tête collant. La transparence de l'arrière-plan peut également être ajustée pour la hiérarchie visuelle.

Ajout d'un effet de flou d'arrière-plan (Flou d'arrière-plan)

existent Astra Dans les versions 4.1.0 et supérieures du thème, un nouvel effet de flou d'arrière-plan a été ajouté à l'en-tête collant, qui ajoute un léger niveau de flou à la barre de navigation et donne à la page un aspect plus moderne. Cette fonctionnalité repose sur le paramètre de transparence de la couleur d'arrière-plan et doit être activée manuellement dans le panneau de conception.

La procédure est la suivante :

• Lorsque le module Sticky Header est activé, allez dans Apparence > Personnaliser > En-tête > Sticky Header

• Cliquez sur le bloc de l'en-tête principal et accédez à l'onglet Conception.

• Recherchez l'option "Flou d'arrière-plan" et activez-la.

• Il est recommandé de régler la couleur d'arrière-plan sur semi-transparent pour rendre l'effet de flou plus évident et naturel.

Cette fonctionnalité n'est disponible que pour les états collants dont l'en-tête principal est activé et fait partie des améliorations apportées au plugin Astra Pro.

Paramètres d'amélioration de l'apparence

Effet de rétraction
Lorsque cette option est activée, l'en-tête collant devient automatiquement plus petit en cas de défilement afin de gagner de l'espace sur la page.

effet d'animation
Une animation d'entrée peut être ajoutée pour rendre l'en-tête collant plus dynamique.

Caché lors du défilement vers le bas
Lorsque cette option est activée, l'en-tête collant est masqué lorsque la page est déroulée vers le bas et réapparaît lorsqu'elle est déroulée vers le haut. Cette option doit être utilisée conjointement avec l'en-tête collant primaire.

Choisir les appareils sur lesquels afficher
Peut être activé uniquement sur les ordinateurs de bureau, sur les téléphones portables ou sur les deux.en-tête collant.

Supprimer le style de l'ombre (facultatif)

Si vous ne voulez pas de l'effet d'ombre par défaut, ajoutez ce qui suit CSS Code :

#ast-fixed-header .main-header-bar {
box-shadow : unset ;
}

résumés

Astra Pro La fonction d'en-tête collant est non seulement simple à configurer, mais elle permet également de régler divers détails visuels, notamment le flou de l'arrière-plan, le changement de logo, l'animation, le zoom et d'autres effets. Grâce à l'utilisation rationnelle de ces options, vous pouvez créer une barre de navigation belle, claire et facile à utiliser, afin d'améliorer l'aspect général de l'ensemble du site.

Articles connexes

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.