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 Kata Constructeur d'en-têteSa 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 colonnes : Ajoutez plusieurs lignes et colonnes pour structurer votre en-tête.
Paramètres de largeur : Ajustez la largeur de l’en-tête, de la pleine largeur à la mise en page encadrée.
4. Options de style
L'outil de création comprend des outils de style complets :
Espacement et marges : Ajustez les marges et les marges pour un design soigné.
Couleurs et arrière-plans : Personnalisez les couleurs et les dégradés, ou ajoutez des images comme arrière-plans.
Typographie : Ajustez les styles, les tailles et les graisses des polices de caractères des éléments de texte.
5. Prise en charge du contenu dynamique
KataLe générateur d'en-tête de s 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
Méga Menu : Ajoutez des options de navigation avancées grâce à la fonctionnalité Méga 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 tierces : Compatible avec les plugins populaires comme WooCommerce, ce qui facilite l’ajout d’icônes de panier d’achat 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 sites. Kata utilisateurs 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.
Maintenant, vous êtes dans Kata Générateur d'en-tête. L'éditeur Elementor s'ouvrira par défaut et vous verrez apparaître l'interface suivante : Kata Le logo, 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 pouvez voir les widgets Elementor spécifiques à… Kata Générateur d'en-tête.
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.
- Kata Logo et branding
- Kata Menu
- Kata Rechercher
- Kata Panier
- Kata Date
- Kata Menu Hamburger
- Kata Switcher de langue
- Kata Se connecter
- Kata Météo
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.
Le Kata L'élément de menu propose une option de menu adaptatif qui possède un modèle par défaut une fois activée.
Ce design ne peut pas être personnalisé pour le moment. Si vous souhaitez un menu adaptatif plus avancé, vous devrez utiliser… Kata Élément de menu Hamburger.
Créez une section sous la section principale et placez-y le Kata logo, Kata Menu de hamburgers et autres éléments qu'il contient.
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 Kata Ajoutez l'élément de menu à 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 rendez-vous à Kata Sélectionnez l'élément Menu Hamburger et choisissez 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 les paramètres responsifs 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.
Sélectionner Bureau, Tablettes, 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.
