✓ Dans cet article, nous allons voir comment utiliser le style accordéon 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 toutes les possibilités du style accordéon.
Cette vidéo couvrira les points suivants :
Accordéons optimisés SXO (UX+SEO) pour la Performance
Les 12 templates du style Accordéon
Comment fonctionne le bloc Titre et comment le paramétrer ?
Comment fonctionne le bloc Contenu ?
Créer un Accordéon dans Kehio Editor
Pour intégrer un accordéon 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 "Accordéon", 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’Accordéon : Déterminez quelle fonction l’accordéon va servir dans votre création. Cela influencera comment et où, il sera affiché sur votre site.
Bloc Produit : Choisissez cette option si l'accordéon est destiné à présenter des informations sur un produit.
Section à Gauche : Sélectionnez cette vue si vous souhaitez positionner l’accordéon à gauche avec du contenu complémentaire (comme une image) à droite.
Section à Droite : Optez pour cette configuration si vous préférez placer l’accordéon à droite avec du contenu additionnel à gauche.
Pleine Largeur : Utilisez cette option si l'accordéon 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'accordéon, 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'accordéon.
Ces étapes vous aideront à configurer correctement un accordéon, garantissant qu'il s'intègre bien à l'ensemble de votre site et qu'il remplit efficacement sa fonction, que ce soit pour afficher des informations produit détaillées ou pour fournir des réponses dans une section FAQ.
Sélectionner votre Modèle
Analyser l'Objectif : Chaque modèle d'accordéon est conçu avec une structure d'ouverture spécifique qui peut être mieux adaptée à certaines fonctions sur votre site.
Modèle 1 : Idéal pour les informations détaillées de produit, ce modèle facilite la présentation structurée des caractéristiques du produit.
Modèle 12 : Plus adapté pour une FAQ en bas de page, offrant une navigation facile et une lecture rapide des questions et réponses.
Choisir Parmi les Modèles : Kehio Editor propose 12 modèles d'accordéons différents, chacun offrant des options de personnalisation pour s'adapter parfaitement à votre charte graphique.
Accédez au menu déroulant "Modèle".
Parcourez les 12 modèles disponibles pour trouver celui qui correspond le mieux à vos objectifs et à la structure désirée.
Le bloc titre de l'accordéon
Personnalisez le bloc titre de vos accordéons 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 chaque onglet de votre accordéon 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 de l'accordéon, privilégiez l'option disponible dans Paramètres > Titre > Icône SVG. Cette icône sera appliquée automatiquement à tous les blocs de titre de votre accordéon.
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 de l'accordéon.
📖 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ètre en cliquant sur la roue crantée. Cela vous permettra de commencer à modifier le design de votre accordéon, incluant les options de couleur, de police, et d'autres éléments esthétiques pour aligner l'accordéon avec le reste de votre design de site.
Paramètre : Onglet Accordéon
L'onglet Accordéon vous donne accès aux principales fonctions et modifications de votre accordéon. Notez que certains paramètres peuvent varier légèrement en fonction du modèle choisi, selon les options spécifiques de chaque modèle.
1. Nombre de Colonnes
Option disponible uniquement sur mobile : En raison des proportions des écrans mobiles, cette fonction est recommandée uniquement pour un accordéon en plein page.
Choix du nombre de colonnes : Vous pouvez choisir d'afficher votre accordéon sur 1 ou 2 colonnes.
Gestion du Gap : Si vous sélectionnez 2 colonnes, vous pouvez ajuster l'espacement (Gap) entre ces colonnes pour une meilleure organisation visuelle.
2. Style d'Ouverture
Onglet unique ou multiple : Choisissez si un seul onglet peut s'ouvrir à la fois (les autres se referment automatiquement) ou si plusieurs onglets peuvent rester ouverts et doivent être fermés manuellement.
3. Choix d'Ouverture au Premier Affichage
Premier onglet ouvert ou fermé : Décidez si le premier onglet de votre accordéon doit être ouvert ou fermé lors du chargement initial de la page.
4. Épaisseur du Bloc Titre
Ajuster l'épaisseur : Choisissez l'épaisseur du bloc titre de votre accordéon pour souligner visuellement les titres des sections.
5. Marges Entre les Onglets
Espacement des onglets : Définissez les marges entre les onglets de votre accordéon pour assurer une séparation claire et esthétique entre les éléments.
6. L'Élément Icône
Personnalisation des icônes : Modifiez l'icône d'ouverture de votre accordéon en choisissant parmi plus de 2000 icônes disponibles dans notre bibliothèque. Optez pour des chevrons, des signes "+/-", ou d'autres icônes spéciales pour dynamiser et harmoniser votre accordéon.
Taille et Couleur de l'icône : Adaptez la taille de l'icône pour les versions ordinateur et mobile, sélectionnez la couleur de l'icône, la couleur au survol et la couleur lorsque l'onglet est ouvert.
Couleur d'Arrière-Plan de l'icône : Modifiez la couleur de fond de l'icône, la couleur au survol et la couleur lorsque l'onglet est ouvert pour une intégration parfaite avec le design de votre site.
Ces options vous permettent de personnaliser en profondeur l'aspect et le fonctionnement de votre accordéon, garantissant qu'il s'adapte parfaitement à l'interface utilisateur et à l'expérience globale que vous souhaitez offrir sur votre site.
Paramètre : Titre Accordéon
Cet onglet vous permet de personnaliser la partie titre de votre accordéon. Voici les options disponibles pour optimiser l'apparence et la fonctionnalité de vos titres d'accordéon :
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.
Alignement
Options d'Alignement : Choisissez parmi Aligner à gauche, Centrer, Aligner à droite, ou Justifier. Cela vous permet de positionner votre texte conformément au design de votre page.
Adaptabilité : L'alignement peut être ajusté séparément pour les appareils mobiles et les ordinateurs, grâce à la gestion des medias queries.
Hauteur de la Ligne
Ajustement de la Hauteur : Configurez la hauteur de la ligne pour que votre bloc titre soit parfaitement proportionné à l'ensemble du contenu.
SVG Icon
Utilisation d'Icône : Vous avez la possibilité d'ajouter un icône à tous les blocs titre des onglets de vos accordéons. Si vous utilisez le même icône partout, cela optimise les performances, car l'icône ne sera chargé 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 accordéons, vous permettant de créer une interface utilisateur cohérente et attrayante tout en optimisant les performances du site.
Paramètre : Contenu Accordéon
Dans cet onglet, vous pouvez définir plusieurs aspects du contenu de vos onglets d'accordéon, 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 de l'accordéon.
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.
Bordure
Épaisseur de la Bordure : Définissez l'épaisseur de la bordure de votre contenu lorsque l'onglet est ouvert. Cette bordure ajoute une démarcation visuelle qui peut aider à distinguer le contenu de l'arrière-plan ou d'autres éléments sur la page.
Choix de la Couleur : Sélectionnez la couleur de la bordure pour correspondre ou contraster avec la couleur de fond et le style global de votre accordéon. Cette cohérence ou ce contraste peut renforcer l'impact visuel de votre design.
Ajouter du Contenu a votre accordéon
Kehio Editor est conçu pour offrir une liberté créative illimitée, vous permettant de composer des accordéons 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 accordéons :
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 accordéons 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 accordéon, 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 accordéons 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 toutes les outils à votre disposition pour créer des accordéons 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 accordéon, n'hésitez pas à contacter notre équipe d'assistance à tout moment par e-mail ou par chat en direct .