📖 Dans cet article, nous allons voir qu’est-ce que l’item “Icône avec texte”, comment l’utiliser en démarrant une création depuis zéro et comment modifier la couleur d’un icône si vous l’importez depuis une de nos créations pré-configurées.
ℹ️ Vous pouvez lire l’article ou découvrir toutes les possibilités de l'item 'Icône avec texte' et apprendre à l'exploiter pleinement dans cette vidéo.
Cette vidéo couvrira les points suivants :
Optimisation SXO (UX+SEO) : Comprenez comment l'icône avec texte est spécifiquement optimisée pour la performance SXO, combinant UX et SEO pour un impact maximal.
Fonctionnalités et paramétrage : Apprenez comment fonctionne l'icône avec texte et comment la paramétrer efficacement dans Kehio Editor pour répondre à vos besoins spécifiques.
Intégration créative : Explorez différentes compositions intéressantes que vous pouvez intégrer dans votre boutique pour capter l'attention et engager vos visiteurs.
Personnalisation : Découvrez comment modifier la couleur de votre icône en utilisant l'outil SVG Color pour l'adapter parfaitement à votre charte graphique.
Comprendre l’item “icône avec texte”
L'item "icône avec texte" est, comme son nom l'indique, une combinaison d'une image iconique et de texte. Cet item est fréquemment utilisé dans l'e-commerce pour mettre en avant de manière visuelle et rapide des informations pertinentes sur votre entreprise ou vos produits. Il permet à vos visiteurs d'accéder à des informations clés en un coup d'œil. Bien utilisé, l'icône avec texte peut devenir un véritable atout pour augmenter vos taux de conversion.
Avec Kehio Editor, cet item vous offre une flexibilité illimitée dans la composition d'icône et de texte. Nous avons conçu cet item pour qu'il soit flexible et optimisé, vous permettant ainsi de créer tout type de section et de bloc adapté à vos besoins. Que vous souhaitiez mettre en avant des caractéristiques de produit, des garanties ou des offres spéciales, l'icône avec texte peut être personnalisé pour s'aligner parfaitement avec votre message et le design de votre boutique.
Ajouter un icône avec texte à votre création en partant de zéro.
Étape 1 : Sélectionnez le type
Pour commencer, si vous souhaitez utiliser cet item, vous devez sélectionner le type "Icône avec texte" dans le volet Contenu. Cela ouvrira les options disponibles pour vous permettre de commencer à intégrer une icône accompagnée de texte dans votre création.
Étape 2 : Choisir son alignement
Après avoir sélectionné le type "icône avec texte", déterminez l'alignement souhaité pour l'affichage sur ordinateur. Par défaut, cet alignement sera également appliqué sur mobile et tablette, mais vous avez la possibilité de choisir un alignement différent pour les appareils mobiles ou tablettes si votre design le nécessite.
ℹ️ Note : L'alignement choisi affectera tous les icônes dans ce Contenu. Si vous désirez des alignements différents pour chaque icône, vous devrez créer plusieurs Contenu, chacun contenant un seul item “Icône avec texte”, afin de pouvoir gérer séparément les alignements de chaque icône.
Étape 3 : Ajouter votre URL Icône depuis la bibliothèque shopify.
Pour intégrer l'image de votre icône, commencez par télécharger l'image souhaitée dans la section des fichiers de votre boutique Shopify. Une fois l'image importée, copiez l'URL de cette celle-ci et revenez dans l'application Kehio Editor pour coller cette URL dans le champ prévu à cet effet.
ℹ️ Note : Nous recommandons d'utiliser des icônes au format SVG pour une meilleure optimisation. Idéalement, les dimensions de l'icône devraient être de 500 x 500 pixels. Cela garantit une qualité visuelle élevée tout en maintenant des temps de chargement optimaux, ce qui est crucial pour l'expérience utilisateur et le SEO.
Étape 4 : Ajouter du texte à votre icône
Après avoir intégré votre icône, passez à l'ajout du texte qui l'accompagnera. Utilisez l'éditeur de texte en dessous de l’image pour saisir et formater votre texte. Ce champ fonctionne comme l’éditeur classique de Kehio Editor, vous permettant de modifier la taille, la couleur et d'autres paramètres de style pour adapter le texte à vos besoins spécifiques.
📖 Si vous souhaitez en apprendre plus sur le paramétrage et les options du contenu textuel avec Kehio Editor, consultez l'article ici.
Étape 5 : Modifier la taille de l’icône
Pour ajuster la taille de votre icône, dirigez-vous vers la section Taille et marge de l'icône Vous pouvez ici modifier la taille pour toutes les résolutions d'écran. Par défaut, en ajustant la taille sur ordinateur, cette même valeur sera appliquée sur toutes les résolutions. Cependant, il est aussi possible d'ajuster la taille de l'icône spécifiquement pour chaque résolution, de manière indépendante.
Cette fonctionnalité est essentielle pour garantir que l'icône reste visuellement cohérente et proportionnée à travers tous les appareils, offrant ainsi une expérience utilisateur améliorée et un design responsive.
Étape 6 : Modifier la position de l’icône
Dans cette étape, vous avez la possibilité de positionner votre icône à 360 degrés autour de votre texte, vous offrant ainsi la flexibilité de choisir la disposition qui correspond le mieux à vos besoins et à l'esthétique de votre création.
De plus, vous avez la possibilité de configurer la position de l'icône différemment pour les affichages sur ordinateur, mobile et tablette. Comme pour les autres options, le positionnement sur ordinateur sera appliqué par défaut sur mobile et tablette. Si vous souhaitez afficher l'icône différemment sur mobile et tablette, vous pouvez le faire en sélectionnant spécifiquement l'option dans l'éditeur.
Cette capacité à ajuster indépendamment la position de l'icône pour différents types de dispositifs vous permet de personnaliser entièrement l'apparence de vos blocs pour une expérience utilisateur optimale.
Étape 7 : Modifier la marge de votre icône
Dans cette colonne, vous avez la possibilité de gérer l'espacement entre votre icône et votre texte. Cette fonctionnalité vous permet de rapprocher ou d'éloigner l'icône du texte selon vos préférences et les besoins de votre design. Vous pouvez ajuster cet espacement indépendamment pour les affichages sur toutes les résolutions.
Ajuster correctement l'espacement entre les éléments peut grandement améliorer la lisibilité et l'esthétique visuelle de votre contenu. Cela aide à créer une expérience utilisateur plus cohérente et attrayante, tout en mettant en valeur les éléments clés de votre message.
Modifier la couleur de l'icône avec texte d'une création importée
Copier l'URL de l'icône : Accédez à l'interface de Kehio Editor et copiez l'URL de l'icône SVG que vous souhaitez modifier.
Accéder à l'outil SVG Color : Rendez-vous sur SVG Color.
Coller l'URL du SVG : Dans l'outil, collez l'URL du SVG et cliquez sur "Load SVG".
Modifier la couleur : Une fois votre SVG affiché, vous pouvez modifier les couleurs pour qu'elles correspondent à votre charte graphique.
Télécharger l'icône : Après modification, téléchargez le SVG modifié et importez-le dans les fichiers de votre boutique Shopify.
Intégrer l'icône modifiée : Récupérez le lien de l'icône téléchargée et collez-le dans Kehio Editor pour mettre à jour l'icône dans votre création.
Si vous avez besoin d’aide pour comprendre ou modifier l’item “Icône avec texte”, n'hésitez pas à contacter notre équipe d'assistance à tout moment par e-mail ou par chat en direct .