Avec Kata Grâce à ce thème, vous pouvez concevoir des en-têtes optimisés pour différentes tailles d'écran, créant ainsi une expérience utilisateur adaptative. Pour une expérience mobile améliorée, utilisez le Kata L'élément Menu Hamburger permet de concevoir un menu adaptatif plus avancé. Ce guide fournit des instructions étape par étape pour créer un en-tête optimisé pour mobile, concevoir un modèle Elementor et gérer les paramètres de visibilité.
Créer une section d'en-tête optimisée pour mobile
Ajouter une nouvelle section d'en-tête pour les appareils mobiles
Sous votre en-tête existant, créez une section supplémentaire. Cette section sera optimisée pour les écrans plus petits afin d'assurer un meilleur affichage.
Ajouter les éléments principaux à l'en-tête mobile
Dans cette nouvelle section, placez les éléments essentiels comme le Kata Logo et branding et Kata Menu HamburgerCette configuration permet aux utilisateurs mobiles d'accéder à la navigation principale d'un simple clic.
Créer un modèle de menu à bascule
Créer un nouveau modèle Elementor
Pour configurer le contenu affiché lorsque l'on appuie sur le bouton, accédez à Administration WordPress > Modèles > Ajouter. Choisissez le Blog Choisissez un type de modèle et créez un nouveau modèle spécifiquement pour votre menu mobile.
Ajustez la hauteur de la section à l'écran.
Dans l'éditeur Elementor, définissez la hauteur de la section sur « Ajuster à l'écran » pour que le menu occupe toute la hauteur de l'écran de l'appareil lorsqu'il est ouvert.
Ajoutez le Kata Élément de menu et personnalisation de la mise en page
Faites glisser le Kata Menu élément dans cette section, définissant sa mise en page à Verticale pour une apparence épurée et empilée qui fonctionne bien sur mobile.
Choisissez le menu approprié à afficher
Sélectionnez le menu souhaité dans les options déroulantes afin qu'il soit lié à ce modèle de menu adapté aux mobiles.
Il est maintenant temps de styliser ce menu à l'aide de l'outil de style. Accédez à l'onglet Style et ouvrez l'outil de style du conteneur en cliquant sur l'icône correspondante. Dans l'outil de style, rendez-vous dans l'onglet Texte et centrez l'alignement du texte. Ainsi, les éléments de votre menu seront affichés au centre.
Personnalisez le menu avec l'outil Styler
Aligner les éléments du menu
Dans Elementor Style onglet, ouvrez le Styler pour le Wrapper en cliquant sur l'icône située à côté. Sous le Texte section, définissez l'alignement du texte sur pour garantir que les éléments du menu soient bien alignés.
Personnaliser les éléments du menu individuellement
Cliquez à nouveau Généralités Dans l'outil de personnalisation, accédez aux éléments de menu individuels. Vous pouvez y ajuster les couleurs, les polices, les marges et autres options de style pour qu'ils correspondent à l'esthétique de votre marque.
Enregistrer le modèle
Une fois la mise en forme terminée, enregistrez le modèle. Ce menu mobile est maintenant prêt à être connecté à l'application. Kata Élément de menu Hamburger.
Liez le menu hamburger au modèle
Sélectionnez votre nouveau modèle dans Kata Menu Hamburger
Rendez-vous dans la section Kata Menu Hamburger Accédez aux paramètres et choisissez le modèle que vous avez enregistré à l'étape précédente. Cela associe le menu au bouton bascule ; ainsi, sur mobile, appuyer dessus affichera le menu avancé.
Gérer les paramètres de visibilité pour différents appareils
Paramètres d'affichage pour les grands écrans
Définissez votre section d'en-tête principale sur Affichage : Bloc pour les écrans de plus grande taille (ordinateur de bureau, ordinateur portable et tablette en mode paysage) et Affichage: Aucun pour téléphones mobiles, petits téléphones mobiles et petites tablettes.
Paramètres d'affichage de l'en-tête mobile
Pour la section d'en-tête optimisée pour mobile, inversez ces paramètres : Affichage: Aucun pour ordinateur de bureau, ordinateur portable et tablette en mode paysage, et Affichage : Bloc pour téléphones mobiles, petits téléphones mobiles et petites tablettes.
Conclusion
Grâce à ces étapes, vous avez réussi à implémenter un en-tête adaptatif et compatible avec les appareils mobiles. KataLa fonctionnalité avancée de menu hamburger permet, grâce à un menu à bascule s'ouvrant en plein écran, de faciliter la navigation sur votre site mobile et de garantir une expérience utilisateur optimale quelle que soit la taille de l'écran.
