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'utilisateur appuie sur le bouton, accédez à l'administration WordPress > Modèles > Ajouter . Choisissez le type de modèle Section 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 l'onglet Style d'Elementor , ouvrez le Styler du conteneur en cliquant sur l'icône correspondante. Dans la section Texte , centrez l'alignement du texte pour que les éléments du menu soient bien alignés.
Personnaliser les éléments du menu individuellement
Dans l'outil de personnalisation, cliquez sur Général pour accéder aux différents éléments du menu. Vous pourrez alors ajuster les couleurs, les polices, les marges et autres options de style afin de respecter 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
Configurez votre en-tête principal sur Affichage : Bloc pour les grands écrans (ordinateur de bureau, ordinateur portable et tablette en mode paysage) et sur Affichage : Aucun pour les téléphones mobiles, les petits téléphones mobiles et les 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 les ordinateurs de bureau, les ordinateurs portables et les tablettes en mode paysage, et Affichage : Bloc pour les mobiles, les petits mobiles et les 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.
