Kata Header Builder est un outil polyvalent conçu pour permettre aux utilisateurs de créer et de personnaliser les en-têtes de leur site web dans l'environnement d'édition d'Elementor. Styler Sans aucune connaissance en programmation. Ajoutez vos widgets préférés pour créer votre propre modèle. Ce modèle deviendra l'en-tête principal de votre site web et s'affichera en haut de la page. Grâce à son interface intuitive de type « glisser-déposer », ses nombreuses options de personnalisation et ses modèles prédéfinis, la création d'un en-tête devient simple et rapide.
Note: Un des Générateur d'en-têtes KataSa particularité est que les widgets sont positionnés côte à côte plutôt qu'en dessous.
Voici une explication de ses caractéristiques et fonctionnalités :
1. Éditeur glisser-déposer
L'outil de création d'en-tête utilise une interface intuitive de type glisser-déposer, permettant aux utilisateurs d'ajouter, d'organiser et de redimensionner des éléments tels que des logos, des menus, des boutons, des barres de recherche, des icônes de réseaux sociaux, etc. Vous pouvez positionner ces éléments sur des lignes et des colonnes spécifiques pour un contrôle précis de la mise en page.
2. Modèles prédéfinis
Kata propose plusieurs modèles d'en-tête prêts à l'emploi que vous pouvez importer et personnaliser. Ces modèles sont adaptatifs et conçus pour convenir à différents types de sites web, tels que les blogs, les boutiques en ligne ou les sites d'entreprise.
3. Personnalisation de la mise en page
Vous pouvez personnaliser la mise en page de l'en-tête pour qu'elle corresponde au style de votre site web :
Lignes et colonnesAjoutez plusieurs lignes et colonnes pour structurer votre en-tête.
Paramètres de largeur: Ajustez la largeur de l'en-tête, de pleine largeur à encadrée.
4. Options de style
L'outil de création comprend des outils de style complets :
Espacement et rembourrageAjustez les marges et les espacements pour un design soigné.
Couleurs et arrière-plansPersonnalisez les couleurs et les dégradés, ou ajoutez des images en arrière-plan.
Typographie: Ajustez les styles, les tailles et les épaisseurs de police des éléments de texte.
5. Prise en charge du contenu dynamique
Le générateur d'en-têtes de Kata s'intègre à la fonctionnalité de contenu dynamique de WordPress, vous permettant d'afficher du contenu personnalisé en fonction du profil de l'utilisateur, comme des boutons de connexion/déconnexion ou des messages d'accueil personnalisés.
6. Fonctionnalités avancées
Mega MenuAjoutez des options de navigation avancées grâce à la fonctionnalité Mega Menu, affichant des catégories, des images et des widgets.
Code personnaliséInsérez des extraits de code HTML, CSS ou JavaScript pour une personnalisation avancée.
Intégrations tiercesCompatible avec les plugins populaires comme WooCommerce, ce qui facilite l'ajout d'icônes de panier ou de liens vers les comptes utilisateurs.
7. Exportation et importation
Enregistrez vos modèles d'en-tête comme modèles pour les réutiliser sur d'autres sites web ou dans différentes sections de votre site actuel. Vous pouvez également importer des en-têtes partagés par d'autres utilisateurs de Kata ou fournis par les développeurs du thème.
Accéder au générateur d'en-tête
Pour accéder au générateur d'en-tête, rendez-vous sur wp-admin > Kata > En-tête.
Vous êtes maintenant dans Kata Header Builder. L'éditeur Elementor s'ouvre par défaut et affiche le logo Kata, le menu de votre site web et plusieurs éléments d'en-tête, dont une icône de recherche, un compte utilisateur, une liste de souhaits et un panier. Sur la gauche, vous trouverez les widgets Elementor spécifiques à Kata Header Builder.
Voici les widgets généralement utilisés dans l'en-tête d'un site web. Toutefois, vous pouvez utiliser les widgets de votre choix.
- Logo Kata
- Menu Kata
- Recherche Kata
- Kata Cart
- Date Kata
- Menu du hamburger Kata
- Changeur de langue Kata
- Connexion Kata
- Météo Kata
Ajoutez l'élément souhaité à la section d'en-tête et commencez la conception.
En-tête adaptatif
L'apparence et le design de votre en-tête doivent être adaptés à chaque appareil, car la taille de l'écran varie. Pour ce faire, créez une section supplémentaire sous votre en-tête, en la concevant pour les petits écrans.
L'affichage des éléments de menu diffère généralement sur les appareils mobiles. Un bouton bascule remplace les éléments d'en-tête : il suffit d'appuyer dessus pour afficher le menu complet.
L'élément Kata Menu propose une option de menu adaptatif avec un modèle par défaut une fois activée.
Ce design n'est pas personnalisable pour le moment. Si vous souhaitez un menu adaptatif plus avancé, vous devrez utiliser l'élément Menu Hamburger de Kata.
Créez une section sous la section principale et placez-y le logo Kata, le menu hamburger Kata et d'autres éléments.
Vous devez maintenant concevoir un modèle Elementor de contenu qui s'affichera en appuyant sur le bouton. Ouvrez le menu WordPress depuis le panneau d'administration et accédez à Modèles > Ajouter pour créer un modèle sous forme de section.
Définissez la hauteur de votre section Elementor sur « Ajuster à l'écran » afin qu'elle occupe toute la hauteur de l'écran de l'utilisateur.
Maintenant, faites glisser un élément de menu Kata et ajoutez-le à votre section.
Définissez la disposition sur Verticale et sélectionnez le menu que vous souhaitez afficher.
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, accédez à l'onglet Texte et centrez l'alignement du texte. Vos éléments de menu seront ainsi centrés.
Cliquez maintenant sur Général et ouvrez l'outil de personnalisation de l'élément de menu que vous souhaitez personnaliser.
Une fois terminé, assurez-vous d'enregistrer le modèle, puis accédez à l'élément Menu Hamburger de Kata et sélectionnez le modèle que vous venez d'enregistrer.
L'implémentation du menu à bascule est terminée.
Paramètres réactifs
Pour gérer la section affichée sur des appareils ou des tailles d'écran spécifiques, utilisez Paramètres réactifs dans Elementor.
Suivez ces étapes pour configurer les paramètres adaptatifs :
1. Accédez aux paramètres adaptatifs
Sélectionnez la section que vous souhaitez configurer.
Dans la barre latérale Elementor, accédez à Avancé languette.
Faites défiler vers le bas pour trouver le Service Rubrique Paramètres.
2. Options de visibilité
Masquer sur le bureauMasque l'élément sélectionné sur les appareils dotés de grands écrans (par exemple, les ordinateurs de bureau).
Masquer sur l'ordinateur portableMasque l'élément sélectionné sur les appareils classés comme ordinateurs portables. Cela s'applique généralement aux écrans dont la résolution est comprise entre 992 et 1200 pixels. La plage exacte peut dépendre des paramètres de point de rupture personnalisés.
Masquer sur tablette paysageMasque l'élément sélectionné sur les tablettes en mode paysage. Ceci s'applique aux écrans d'une largeur comprise entre 768 et 992 pixels.
Masquer sur le portrait de la tabletteMasque l'élément sélectionné sur les tablettes en mode portrait. Cela concerne généralement les écrans d'une largeur comprise entre 600 et 768 pixels.
Masquer sur le paysage mobileMasque l'élément sélectionné sur les appareils mobiles en mode paysage. Cela s'applique généralement aux écrans de 480 à 600 pixels de large.
Masquer sur portrait mobileMasque l'élément sélectionné sur les appareils mobiles en mode portrait. Cela concerne généralement les écrans de moins de 480 pixels.
Pour appliquer le paramètre, il suffit d'activer ou de désactiver la visibilité pour chaque appareil.
3. Adaptation des mises en page aux différents appareils
Passer en mode appareil : en haut du panneau Elementor, cliquez sur l’icône du mode adaptatif.
Choisir Bureau, Tablettes, ou Mobile pour voir à quoi ressemble le design sur chaque appareil.
4. Tests et ajustements finaux
Utilisez le bouton Aperçu pour vérifier l'apparence du site sur différents appareils.
Effectuez des tests approfondis pour vous assurer que tous les éléments sont correctement alignés et visibles conformément à vos paramètres.
