✓ Dans cet article, nous allons voir comment utiliser les items Image et Image avancée en démarrant une création depuis zéro et comment modifier une image avancée si vous l’importer depuis l’une de nos créations pré-configurées.
ℹ️ Vous pouvez lire l’article ou découvrir toutes les possibilités des items Image et Image avancée et apprendre à l'exploiter pleinement dans cette vidéo.
Cette vidéo couvrira les points suivants :
L'image avancée optimisée SXO (UX+SEO) pour la Performance
Les différentes options de l'image avancée
Modifier la couleur de votre couverture d'image avec l'outil SVG Color
Ajouter une Image ou une Image avancée à votre création en partant de zéro
Pour commencer, accédez au volet de gauche de votre éditeur Kehio et sélectionnez ou ajoutez un Contenu. Une fois sélectionné, un volet s'ouvrira avec par défaut l'ajout d'un item "texte". Vous pouvez le supprimer et ensuite ajouter une image en cliquant sur "Ajouter un Item" et sélectionner ce que vous avez besoin.
Paramètre de l'item Image
Pour paramétrer une image dans Kehio Editor, suivez ces étapes détaillées pour une intégration et personnalisation optimales :
1- Ajouter votre URL d'image
Dans l'onglet de l'item "Image", entrez l'URL de votre image.
Pour obtenir l'URL, utilisez le lien situé sous le champ d'URL qui vous redirige vers la bibliothèque de fichier de votre boutique. Importez votre image dans cette bibliothèque, sélectionnez ensuite l'URL du fichier importé et collez-la dans l'éditeur Kehio.
2- Modifier la taille de l'image
Ajustez la taille de l'image indépendamment pour les affichages sur ordinateur et sur mobile à l'aide des curseurs prévus à cet effet.
3 - Aligner votre image
Utilisez l'encart d'alignement pour positionner votre image à gauche, au centre, ou à droite. Notez que cette option est disponible uniquement pour les affichages sur ordinateur, sur mobile, l'image est toujours centrée par défaut
4 - Optimiser votre SEO avec la description de l'image
Ajoutez une description à votre image dans l'encart "Alt" pour améliorer l'optimisation SEO de votre page. Cette description aide les moteurs de recherche à comprendre le contenu de l'image.
5- Ajouter un lien à votre image
Si vous souhaitez que l'image agisse comme un lien, ajoutez l'URL cible dans l'encart prévu. Par défaut, le lien s'ouvre dans le même onglet, mais vous pouvez cocher la case pour l'ouvrir dans une nouvelle fenêtre du navigateur, ce qui est souvent préféré pour améliorer l'expérience utilisateur.
En suivant ces étapes, vous pouvez efficacement intégrer et personnaliser des images dans vos créations Kehio, améliorant l'attrait visuel de votre site tout en optimisant les aspects fonctionnels liés à l'expérience utilisateur et au SEO.
Paramètre de l'Image Avancée
L'image avancée dans Kehio Editor partage des fonctionnalités de base identiques avec l'image standard, mais elle inclut également des options avancées qui éliminent presque totalement le besoin de logiciels de conception graphique externes. Grâce à ces outils intégrés et aux designs de couverture que nous proposons, vous pouvez réaliser des montages d'image sophistiqués directement dans Kehio sans recourir à d'autres logiciels de design.
Voici les options avancées disponibles pour l'image avancée en plus des cinq étapes de base pour gérer une image :
1. Ajout de bordure
Personnalisation des angles : Vous avez la possibilité de sélectionner et de modifier les bordures de votre image principale. Vous trouverez deux lignes de quatre champs numériques, chaque champ correspondant à un côté d'un angle. Cette configuration fonctionne en colonnes :
La première colonne correspond à l'angle supérieur droit.
La deuxième colonne correspond à l'angle supérieur gauche.
La troisième colonne correspond à l'angle inférieur gauche.
La quatrième et dernière colonne correspond à l'angle inférieur droit.
Avec cette gestion des angles, vous pouvez donner à votre image n'importe quelle forme et jouer sur leurs degrés. Par exemple, en réglant tous les angles à 50%, vous pouvez créer une image circulaire en quelques clics sans besoin d'outils externes. Cette fonctionnalité offre une liberté créative pour créer des formes d'images élégantes et optimisées.
2. Le padding de l’image principal
Ajustement de l'espace intérieur : Le padding vous permet d'ajuster l'espace entre le bord de l'image et son contenu intérieur, ce qui est utile pour définir comment la couverture d’image se positionne visuellement avec l'image principale. Cet ajustement peut être crucial selon les type de couverture que vous utilisez.
Note : Utilisez cette option uniquement lorsque vous utilisez une couverture d'image et que vous voulez l'adapter spécifiquement avec l'image principal.
3. Les ombres
L'ajout d'une ombre derrière une image peut grandement améliorer son impact visuel en la faisant ressortir. Kehio Editor offre des options avancées pour la gestion des ombres qui vous permettent de personnaliser précisément cet effet :
Choix de la couleur de l'ombre : Sélectionnez la couleur qui convient le mieux au design de votre page et qui complémente l'image.
Gestion des effets de diffusion de l'ombre : Vous disposez de plusieurs options pour affiner l'apparence de l'ombre :
Flou : Ajustez l'intensité du flou pour adoucir ou accentuer l'ombre.
Étendue : Contrôlez la taille de l'ombre pour qu'elle soit plus large ou plus étroite par rapport à l'image, augmentant ainsi l'effet de l'ombre.
Décalage vertical : Déplacez l'ombre vers le haut ou vers le bas par rapport à l'image pour créer un effet de profondeur ou d'élévation.
Décalage horizontal : Déplacez l'ombre vers la gauche ou la droite pour ajouter une dimension latérale à l'effet d'ombre.
Expérimentez avec ces différentes personnalisations pour créer un rendu unique et professionnel pour vos images. Cet ajustement peut transformer une image simple en un élément de design accrocheur, ajoutant une touche de sophistication à votre contenu visuel. Ces réglages sont conçus pour être intuitifs et accessibles, même pour ceux qui n'ont pas d'expérience préalable avec des outils graphiques avancés.
4. L’Image de Couverture
Cette option a été spécialement conçue pour vous permettre de bénéficier de nos montages photos de haute qualité sans jamais avoir besoin d'utiliser un logiciel de montage externe. Nous avons créé des couvertures d'images sur nos templates qui s'appliquent comme un calque sur votre image principale, permettant de créer des images de haute qualité avec des formes et des couleurs exceptionnelles sans que vous ayez à toucher à une seule option dans n'importe quel logiciel de design.
Nos designers réalisent ces modèles de couverture en format SVG via Illustrator, ce qui vous permet de modifier la couleur pour adapter cette couverture d'image à votre charte graphique. Voici comment vous pouvez utiliser et personnaliser ces couvertures d'image :
Modification de la Couverture : Vous pouvez facilement changer la couleur des couvertures d'image SVG importées dans vos créations pour qu'elles correspondent à vos besoins spécifiques en utilisant l'outils SVG Color.
Importation de vos Propres Modèles : Si vous avez des bases en design et que vous êtes à l'aise avec des logiciels comme Adobe Illustrator, vous avez également la possibilité d'importer vos propres modèles de couverture ou éléments SVG. Cela vous permet de personnaliser encore plus profondément l'aspect visuel de vos images. Nous conseillons de toujours importer les images de couverture au format SVG pour maintenir une qualité et une flexibilité optimales.
En exploitant ces fonctionnalités, vous pouvez créer des images enrichies et personnalisées qui renforcent l'identité visuelle de votre marque et améliorent l'attrait visuel de votre site sans nécessiter de compétences avancées en graphisme.
5. Position de l’image de couverture
La position de l'image de couverture peut être ajustée pour s'adapter précisément à vos besoins graphiques. Si vous importez une image ou un composant graphique, vous avez la possibilité de le positionner différemment sur l'image principale en entrant les valeurs de position dans les champs numériques grisés. Cette option est conçue pour les utilisateurs ayant un certain niveau de compétences en webdesign, permettant une personnalisation précise et adaptée à des besoins spécifiques.
ℹ️ Note importante : Si vous importez une de nos créations pré-configurées avec une couverture d’image, nous vous recommandons de ne pas modifier la position de celle-ci, car elle a été optimisée exclusivement pour ce style de couverture. Si vous souhaitez apporter des modifications, limitez-vous à changer la couleur du SVG avec SVG Editor.
6. Option Extra Mobile:
Cette section spécifique vous offre la possibilité d'importer une image et une couverture d'image différentes de celles utilisées sur les versions de bureau. Ce champ est réservé aux experts en design qui souhaitent créer des présentations visuelles distinctes entre les appareils mobiles et les ordinateurs de bureau, ce qui peut s'avérer pertinent dans certains cas pour optimiser l'engagement utilisateur et l'expérience visuelle.
ℹ️ À noter : Par défaut, les images et les couvertures d'images principales sont adaptées et optimisées pour les appareils mobiles, donc vous n'avez pas besoin d'utiliser cette option si votre intention est simplement de mettre en place une image sur mobile — elle sera déjà optimisée. Cette fonction est spécifiquement conçue pour permettre la création de designs différenciés entre les deux types de supports.
Dans cette section, vous retrouverez les mêmes options de personnalisation que celles disponibles pour les versions de bureau, permettant une continuité dans la gestion de vos éléments graphiques tout en offrant la flexibilité de spécifier des styles uniques pour les mobiles.
Modifier la couleur d'une couverture d'image
Lorsque vous importez une création et que vous souhaitez conserver l'image de couverture mais modifier sa couleur, vous pouvez utiliser l'outil gratuit SVG Color.
Les étapes de modification
Copier l'URL de l'image de couverture : Accédez à l'interface de Kehio Editor et copiez l'URL de l'image SVG de couverture 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'image de couverture : Après modification, téléchargez le SVG modifié et importez-le dans les fichiers de votre boutique Shopify.
Intégrer l'image de couverture modifiée : Récupérez le lien de l'image de couverture téléchargée et collez-le dans Kehio Editor pour mettre à jour l'image de couverture dans votre création.
Cette méthode vous permet de personnaliser vos images de couverture en fonction de votre identité visuelle, tout en bénéficiant de la flexibilité offerte par le format SVG pour des modifications précises et de haute qualité.
Si vous avez besoin d’aide pour comprendre ou modifier les items” Image” et “Image avancée” n'hésitez pas à contacter notre équipe d'assistance à tout moment par e-mail ou par chat en direct .