✓ Dans cet article, nous allons voir comment utiliser le style Onglet en démarrant une création depuis zéro et comment le paramétrer.
ℹ️ Vous pouvez lire l’article ou découvrir dans cette vidéo qui présente l'Onglet de la page KehioSkin 1, comment utiliser le style Onglet et créer de véritable section à l’intérieur de cette structure.
Créer un Onglet dans Kehio Editor
Pour intégrer un Onglet dans votre création avec Kehio Editor, suivez ces étapes détaillées pour sélectionner le style approprié et définir sa mise en page :
Sélectionner le Style
Accéder à la Création : Rendez-vous dans la section de création de votre projet sur Kehio Editor.
Choisir un Style : Cliquez sur "Créer" depuis la page d’accueil. Une fois à l’intérieur de l’éditeur, sélectionnez le style "Onglet", qui est généralement affiché par défaut lors de la création d’un nouveau projet.
Définir la Vue
Objectif de l’Onglet : Déterminez quelle fonction l’Onglet va servir dans votre création. Cela influencera comment et où, il sera affiché sur votre site..
Bloc Produit : Choisissez cette option si l'Onglet est destiné à présenter des informations sur un produit.
Section à Gauche : Sélectionnez cette vue si vous souhaitez positionner l’Onglet à gauche avec du contenu complémentaire (comme une image) à droite.
Section à Droite : Optez pour cette configuration si vous préférez placer l'Onglet à droite avec du contenu additionnel à gauche.
Pleine Largeur : Utilisez cette option si l'Onglet doit occuper toute la largeur de la section sur votre site, idéal pour des FAQs ou des informations détaillées.
Sélection de la Vue : Une fois que vous avez décidé de l'emplacement et de la fonction de l'Onglet, sélectionnez la vue correspondante dans le header de l'application. Assurez-vous que la disposition choisie correspond bien à l'objectif prévu pour l'Onglet.
Le bloc titre de l'Onglet
Personnalisez le bloc titre de vos Onglets pour améliorer la clarté et l'attrait visuel de votre contenu. Voici comment procéder étape par étape :
Modifier le Bloc Titre
Accéder au Titre : ◦ Cliquez sur le titre de votre Onglet pour le sélectionner et le modifier.
Ajouter un Icône au Titre : ◦ Si nécessaire, ajoutez un icône à votre titre pour le rendre plus visuellement engageant.
◦ Note : Ajoutez une icône ici uniquement si vous souhaitez avoir des icônes différentes d'un bloc titre à un autre. Si vous préférez utiliser la même icône pour tous les onglets, privilégiez l'option disponible dans Paramètres > Titre de l’onglet > Icône SVG. Cette icône sera appliquée automatiquement à tous les blocs de titre de votre Onglet.
Entrer Votre Titre : ◦ Saisissez le titre approprié pour chaque onglet.
◦ Adaptation pour mobile : Vous avez la possibilité d'ajouter un titre différent pour les versions mobiles, ce qui est pertinent lorsque le titre sur ordinateur est trop grand et nécessite une adaptation pour une meilleure harmonie visuelle sur les appareils mobiles.
Définir la Position du Contenu : ◦ Ajustez la position du contenu à l'intérieur du bloc titre pour aligner parfaitement le texte ou l'icône selon vos préférences de design.
Utiliser le Système de Grille CSS : ◦ Définissez la fonction de la grille CSS avec le système de grid pour diviser votre contenu selon vos souhaits à l'intérieur de l'Onglet.
📖 Pour approfondir vos connaissances sur le système de grille, vous pouvez lire l'article dédiés à ce sujet pour mieux comprendre comment l'utiliser efficacement.
Personnalisation Avancée
Accéder aux Paramètres :
Une fois les étapes ci-dessus validées, allez dans la section Paramètres en cliquant sur la roue crantée. Cela vous permettra de commencer à modifier le design de votre Onglet, incluant les options de couleur, de police, et d'autres éléments esthétiques pour aligner l'Onglet avec le reste de votre design de site.
Paramètre : Onglet
Dans la section Onglet, vous pouvez choisir l'alignement des titres de vos onglets sur ordinateur. Cette option est particulièrement utile lorsque vous créez un onglet sur une demi-section, avec une image placée à droite ou à gauche, et l'onglet à l'opposé (par exemple, comme dans le template Fulgurance Powersuit V3 ).
Paramètre : Titre de l’Onglet
Ici, vous pouvez personnaliser la partie titre de vos Onglets. Voici les options disponibles pour optimiser l'apparence et la fonctionnalité de vos titres :
Couleur du Titre
Texte : Choisissez la couleur du texte de votre titre, la couleur au survol, et la couleur lorsque l'onglet est ouvert.
Arrière-plan : Sélectionnez la couleur de fond pour le titre, la couleur au survol, et la couleur lorsque l'onglet est ouvert.
Style de la Police
Options de Poids : Utilisez le menu déroulant pour choisir entre Clair, Normal, Moyen, Semi gras, Gras, Extra gras. Cette option vous aide à accentuer l'importance de certains textes.
Taille de la Police : Ajustez la taille de la police en cliquant sur les flèches de l'encart de taille. Les valeurs sont exprimées en "rem", assurant une mise à l'échelle proportionnelle. Adaptez la taille du texte pour les ordinateurs et les mobiles, ainsi que pour toutes les résolutions d'écran grâce à la gestion des medias queries.
Marge entre les titres
Marge : Ajustez l'espacement entre les titres de vos différents onglets. Vous pouvez personnaliser cet espacement indépendamment pour les versions ordinateur et mobile, afin d'optimiser l'expérience utilisateur sur chaque appareil.
Souligner
Dans cette section des paramètres du titre de l'onglet, vous pouvez personnaliser la ligne située sous votre titre. Vous avez la possibilité de configurer la couleur, la couleur au survol, la longueur, l'espacement entre le titre et la ligne, ainsi que l'épaisseur de cette ligne, que ce soit au survol ou lorsque l'onglet est actif (sélectionné par le client).
SVG Icon
Utilisation d'Icône : Vous avez la possibilité d'ajouter un icône à tous les blocs titres de vos Onglets. Si vous utilisez le même icône partout, cela optimise les performances, car l'icône ne sera chargée qu'une seule fois dans votre CSS, plutôt que de répéter son appel dans le HTML. Cela est particulièrement utile pour les images décoratives, qui ne seront pas prises en compte par les moteurs de recherche, améliorant ainsi les performances du site.
Personnalisation de l'Icône : Choisissez la taille, les marges et l'alignement de l'icône pour s'assurer qu'il complète efficacement le texte du titre.
Ces options vous donnent un contrôle complet sur la présentation des titres de vos Onglets, vous permettant de créer une interface utilisateur cohérente et attrayante tout en optimisant les performances du site.
Paramètre : Contenu de l’Onglet
Dans cet onglet, vous pouvez définir plusieurs aspects du contenu de vos Onglets, tels que la couleur de fond, le padding ainsi que la couleur et l'épaisseur de la bordure du bloc de contenu.
Couleur d’Arrière-Plan
Sélection de la Couleur : Utilisez la pastille pour sélectionner la couleur qui convient pour l'arrière-plan de votre contenu. Cette couleur sera visible autour du contenu à l'intérieur de chaque Onglet.
Gestion des Paddings
Définition du Padding : Le padding fait référence à l'espace entre le contenu interne d'un bloc et ses bordures. Ce paramètre est essentiel pour améliorer la lisibilité et l'attrait visuel de votre contenu.
Personnalisation sur tous les Supports : Avec Kehio Editor, vous pouvez ajuster les paddings pour qu'ils répondent spécifiquement aux besoins de différents appareils grâce aux medias queries. Ceci permet d'assurer que votre contenu est optimisé pour une visualisation confortable sur des appareils de tailles variées, de téléphones à ordinateurs de bureau.
Application des Medias Queries : En utilisant les medias queries, vous pouvez spécifier des valeurs de padding différentes pour des tailles d'écran spécifiques, permettant ainsi une adaptation plus fine et une meilleure réactivité du design.
Gestion des Marges (Margin)
Définition du Margin : Le margin représente l’espace à l’extérieur d’un contenu ou d'un bloc et ses bordures. Il permet de séparer visuellement les différents éléments, créant ainsi une meilleure lisibilité et une présentation plus attrayante.
Personnalisation sur Tous les Supports : Avec Kehio Editor, vous pouvez ajuster les marges (Margin) pour chaque type d’appareil grâce aux media queries. Cela vous permet d’optimiser l’affichage de votre contenu sur des écrans de différentes tailles, allant des smartphones aux ordinateurs de bureau, pour une expérience utilisateur fluide.
Ajouter du Contenu à votre Onglet
Kehio Editor est conçu pour offrir une liberté créative illimitée, vous permettant de composer des Onglets parfaitement adaptés à vos besoins et intégrant tous les aspects de votre marketing. Voici comment vous pouvez tirer parti de cette flexibilité pour ajouter du contenu à vos Onglets :
Liberté de Composition
Création sur mesure : Contrairement à d'autres applications qui peuvent offrir des sections préconfigurées, Kehio Editor vous laisse la liberté de construire vos Onglets de zéro. Cela signifie que vous n'êtes pas limité par des configurations prédéfinies et pouvez organiser votre contenu exactement comme vous le souhaitez.
Ajout de contenu : Pour ajouter du contenu à votre Onglet, accédez simplement au bloc de contenu prévu à cet effet dans l'éditeur. Vous pouvez insérer le type de contenu que vous désirez, qu'il s'agisse de texte, d'images, de vidéos, ou d'autres éléments interactifs.
Personnalisation des Items : Paramétrez chaque item selon vos besoins. Kehio Editor offre une gamme d'options de personnalisation pour chaque type d'item, vous permettant d'ajuster les détails tels que la couleur, la taille, l'alignement, et bien plus.
📖 Découvrez la totalité de nos items et apprenez comment les paramétrer en lisant cet article
Solutions Préconfigurées
Templates Préconfigurés : Si vous préférez ne pas partir de zéro ou si vous n'êtes pas encore à l'aise avec la conception indépendante, explorez nos différentes boutiques démo. Vous pouvez importer des Onglets déjà configurés et les adapter facilement à votre boutique en quelques minutes. Cela vous permet de bénéficier de designs professionnels tout en les personnalisant pour qu'ils répondent à vos spécificités.
En utilisant Kehio Editor, vous avez tous les outils à votre disposition pour créer des Onglets qui non seulement répondent à vos attentes en terme de design et de fonctionnalité mais qui soutiennent également de manière efficace votre stratégie de marketing globale.
Si vous avez besoin d’aide pour comprendre ou modifier votre Onglet, n'hésitez pas à contacter notre équipe d'assistance à tout moment par e-mail ou par chat en direct .