Avec le thème Kata, vous pouvez concevoir des en-têtes optimisés pour différentes tailles d'écran, offrant ainsi une expérience utilisateur adaptative. Pour une expérience mobile améliorée, utilisez l'élément Menu hamburger Kata afin de concevoir un menu responsive plus avancé. Ce guide fournit des instructions étape par étape pour créer un en-tête adapté aux mobiles, 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 Logo Kata et Menu du hamburger KataCette 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.
Ajouter l'élément de menu Kata et personnaliser la mise en page
Faites glisser le Menu Kata é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 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'élément Menu Hamburger de Kata.
Liez le menu hamburger au modèle
Sélectionnez votre nouveau modèle dans le menu hamburger de Kata
Rendez-vous dans la section Menu du hamburger Kata 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 implémenté avec succès un en-tête adaptatif et optimisé pour les mobiles grâce à la fonctionnalité avancée de menu hamburger de Kata. En créant un menu à bascule qui s'ouvre en plein écran, les utilisateurs peuvent naviguer facilement sur votre site depuis leurs appareils mobiles et profiter d'une expérience utilisateur fluide quelle que soit la taille de l'écran.
