Élément d'image

À propos de l'élément Image

L' Image(s) L'élément de GemPages vous permet d'afficher des images uniques sur votre page, ce qui est idéal pour présenter des produits, des bannières, des visuels de marque, des promotions ou des badges de confiance.

Que vous souhaitiez mettre en valeur un produit phare, illustrer l'esthétique de votre marque ou créer une séparation visuelle entre les sections, l'élément Image vous donne un contrôle total sur la façon dont les images apparaissent sur les appareils.

Vous pouvez facilement télécharger de nouvelles images, réutiliser celles existantes à partir de vos fichiers Shopify et personnaliser la taille, la position, les bordures et les animations sans codage.

Comment ajouter un élément d’image à votre page ?

Étape 1 : Connectez-vous à votre Administrateur Shopify > Tableau de bord GemPages > Pages.

Étape 2 : Vous pouvez voir ici toutes vos pages créées avec GemPages. Cliquez sur la page cible. pour ouvrir l'éditeur.

Si vous préférez créer une nouvelle page, cliquez sur Créer une nouvelle page pour commencer à créer votre page à partir de zéro ou sélectionnez parmi des modèles prédéfinis.

Étape 3 : Dans la barre latérale gauche, entrez Image(s) dans la barre de recherche, puis faites glisser et déposez l'élément d'image à la position que vous préférez.

Configurer l'onglet Paramètres

L'élément Image offre une flexibilité paramètres d'image pour que vous puissiez contrôler facilement la taille, la forme et la réactivité.

Style

Choisissez le style visuel de votre image :

• Rectangle: Forme rectangulaire par défaut
• Cercle: Recadre automatiquement l'image en un cercle parfait

Source

Téléchargez ou sélectionnez le fichier image. Vous pouvez :

• Cliquez à nouveau sur Télécharger image, collez l'URL de l'image ou appuyez sur Parcourir la galerie pour choisir parmi vos médias.
• Une fois téléchargée, l'URL de l'image apparaîtra ci-dessous pour référence ou modification

Taille

Contrôlez la façon dont l'image est affichée en termes de mise en page et de réactivité :

Cadre métallique robuste: Choisissez un rapport hauteur/largeur prédéfini ou utilisez-en un personnalisé :

• Carrée Réf
• Verticale
• Horizontal
• ORIGINALE (conserve les dimensions natives de l'image)
• Encadrement Sur Mesure (largeur et hauteur réglées manuellement)

Largeur hauteur:

• S'installer Pixel (px) ou pourcentage (%)
• Basculer le icône de verrouillage maintenir ou rompre le rapport hauteur/largeur

Forme

Stylisez le conteneur d'images avec des améliorations visuelles pour mieux correspondre à votre conception :

Frontière:Ajouter une bordure autour de l'image. Personnaliser :

• Couleur: Choisissez n'importe quelle couleur HEX
• Grosor: Définir la valeur du pixel
• Style de trait: Plein, pointillé ou en pointillé

CORNER: Arrondissez les angles de l'image en ajustant le rayon de la bordure. Vous pouvez :

• Appliquer le même rayon à tous les coins
• Débloquez les valeurs pour styliser chaque coin individuellement

Shadow: Ajoutez un effet d'ombre pour donner de la profondeur ou une séparation avec l'arrière-plan. Configurer :

• Type:Extérieur, intérieur ou centré
• Direction :Contrôler l'angle de l'ombre
• Couleur
• Distance, tache et Taille

Lien

Rendez l'image cliquable en activant cette option, puis sélectionnez l'action que vous souhaitez ajouter après avoir cliqué sur l'image, notamment :

Le SEO

Améliorer l’accessibilité des images et les performances des moteurs de recherche :

• Texte alternatif: Décrivez l'image (utilisée par les lecteurs d'écran et les moteurs de recherche)
• Titre de l'image: Titre facultatif pouvant s'afficher sous forme de texte d'info-bulle

Optimiser le LCP

Aide à optimiser le chargement pour de meilleurs scores de performance :

Qualité:Choisir le niveau de compression :

• Finest (la plus haute qualité)
• Élevée (par défaut, équilibré)
• Moyenne (pour les pages exigeantes en performances)
• Encadrement Sur Mesure (paramètres de compression avancés)

pré-charge: Activer si l'image est au-dessus du pli et contribue au Largest Contentful Paint (LCP)

Aligner

Alignez l'image dans son conteneur : à gauche, au centre ou à droite.

Configurer l'onglet Avancé

Pour une personnalisation plus avancée, veuillez accéder au Avancé onglet et suivez les instructions dans cet article.

Dépannage : L’image ne s’affiche pas sur la page

Si votre image téléchargée n'apparaît pas dans l'éditeur ou sur la page en ligne, essayez les vérifications ci-dessous :

Causes courantes et solutions

Meilleures pratiques en matière d'éléments d'image

Superposer du texte à une image

Si vous souhaitez créer une bannière avec du texte superposé sur une image, nous avons un tutoriel vidéo spécialement pour vous. Regardez la vidéo ci-dessous pour obtenir des instructions étape par étape.

Rendez votre image cliquable

Rendre les images cliquables ou interactives améliore l'expérience et l'engagement des utilisateurs.

En savoir plus: Rendre un texte ou une image cliquable

FAQ sur Image Element

1. Comment puis-je empêcher la mise à l’échelle automatique de mon image ?

Si vous ne souhaitez pas qu'une image soit mise à l'échelle, accédez à la Taille Section « Image » dans les paramètres d'image. Définissez la largeur et la hauteur en pixels (px) plutôt qu'en pourcentages (%). Cela permet de fixer la taille de l'image sur tous les appareils.

2. Où puis-je trouver les paramètres d'image dans GemPages ?

Cliquez simplement sur l'image dans l'éditeur et le Onglet Paramètres apparaîtra dans la barre latérale gauche. Vous pourrez alors ajuster tous les paramètres de l'image, notamment la taille, le cadre, la bordure, l'ombre et les options de lien.

3. Puis-je rendre une image cliquable ?

Oui. Dans l'onglet Paramètres, faites défiler jusqu'à Lien section et activez-la. Vous pouvez lier l'image à une page, une URL externe, une ancre de section, une fenêtre contextuelle, une adresse e-mail ou même un numéro de téléphone.

4. Comment ajouter du texte alternatif à une image pour le référencement ?

Dans l' Le SEO Dans la section « Paramètres de l'image », saisissez un texte alternatif descriptif. Cela améliore l'accessibilité pour les lecteurs d'écran et aide les moteurs de recherche à comprendre votre image.

5. Pourquoi mon image semble-t-elle floue après le téléchargement ?

Si votre image semble floue, vérifiez le Qualité paramètre sous Optimiser LCP. Passage à Finest la qualité résout généralement le problème, mais assurez-vous que le fichier source que vous avez téléchargé est en haute résolution.

6. Puis-je superposer du texte directement sur une image ?

L'élément Image lui-même ne prend pas en charge la superposition directe de texte. Pour cela, utilisez l'option Élément de bannière de héros, qui vous permet de placer du texte, des boutons ou d'autres éléments sur une image.

7. Comment ajouter des images à votre page dans GemPages ?

Pour ajouter des images à un modèle, faites glisser et déposez les Élément d'image dans la mise en page de votre page depuis l'éditeur. Vous pouvez importer un nouveau fichier, en sélectionner un dans votre bibliothèque multimédia Shopify ou coller l'URL d'une image. Cela vous permet de personnaliser visuellement n'importe quel produit, collection ou modèle de page de destination.

8. Comment mettre à jour les images après la publication de ma page ?

Cliquez simplement sur l'image dans l'éditeur. Dans le Source Dans la section « Importer une image », vous pouvez importer une nouvelle image, la remplacer par une image de votre bibliothèque multimédia ou ajuster ses paramètres. Une fois la mise à jour effectuée, cliquez sur Enregistrer Publier pour appliquer les modifications en direct sur votre boutique.

9. Que signifie « Suivre le lien » lorsque je définis l’action après clic sur Ouvrir la page ?

Le paramètre « Suivre le lien : Oui/Non » détermine si les moteurs de recherche sont autorisés à suivre le lien hypertexte associé à votre image.

• Oui: Les moteurs de recherche (comme Google) peuvent suivre ce lien jusqu'à la page cible. Utilisez cette méthode si le lien mène à une page importante que vous souhaitez indexer (par exemple, une page produit ou une page de collection).
• No: Ajoute un rel="nofollow" Ajoutez une balise au lien. Cela indique aux moteurs de recherche. mais suivre le lien ou transmettre l'autorité du lien.

10. Comment puis-je lier WhatsApp en utilisant l'élément Image ?

Vous pouvez transformer n'importe quelle image (comme l'icône WhatsApp) en bouton de discussion. Il vous suffit d'ajouter un élément Image, de télécharger votre logo WhatsApp et d'activer l'option correspondante. Lien option.

Utilisez ce format pour votre lien WhatsApp : https://wa.me/<your-number>. Par exemple: https://wa.me/15551234567.

Lorsque les clients cliqueront sur l'image, une conversation WhatsApp s'ouvrira avec votre numéro.

11. Pourquoi le téléchargement de mon image échoue-t-il sur GemPages ?