Les images sont l’un des indices visuels les plus utiles pour transmettre vos idées aux internautes de votre site Web. Dans cet article, vous apprendrez à utiliser l’élément Image et certains problèmes courants liés aux images sur votre page.
À propos de l’élément Image
L’élément Image vous permet d’ajouter des images à votre page afin d’augmenter votre taux de conversion. Vous pouvez utiliser cet élément pour créer une image de bannière pour votre page, pour ajouter une preuve visuelle supplémentaire pour quelque chose dont vous parlez sur la page ou pour simplement décorer votre page.
Dans la dernière mise à jour, l’élément Image n’a qu’une seule option de conception, cependant, gardez à l’esprit que vous pouvez personnaliser cet élément plus précisément en utilisant les onglets Général et Style.
Faites glisser une variante sur la mise en page et voyez comment elle peut être configurée.
Vous pouvez vérifier plus de détails dans le didacticiel vidéo ci-dessous.
Configuration des éléments d’image
L’élément Image est livré avec de nombreux paramètres de réglages vous permettant d’affiner l’apparence du contenu pour atteindre le meilleur taux de conversion possible.
Sélectionnez l’élément dans la présentation pour voir ses paramètres.
Les paramètres des onglets Général et Style sont spécifiques à cet élément
Paramètres de l’onglet Général
| Paramètres de l’onglet Général | |
| 1. CONTENU |
|
| 2. ACTION | Mis à part les actions de 5 clics comme d’autres éléments (Lire la suite ici), l’élément Image a une action de clic spéciale nommée Open Lightbox qui permet aux utilisateurs d’afficher les images d’écran en taille réelle.
|
| 3. SUIVI | C’est un endroit à mettre en place:
|
| 4. ATTRIBUTS | Il s’agit d’un paramètre que tous les éléments possèdent. Vous pouvez lire plus ici. |
| 5. VISIBILITÉ | Il s’agit d’un paramètre que tous les éléments possèdent. Vous pouvez lire plus ici. |
| 6. ANIMATION | Il s’agit d’un paramètre que tous les éléments possèdent. Vous pouvez lire plus ici. |
Remarque importante 1: utilisez une seule image pour tous les appareils
Depuis la version PageFly 2.8.0, vous ne pouvez utiliser qu’une seule image sur différents appareils. Pour changer l’image, vous devez vous rendre dans la vue «Tous les appareils» et resélectionner l’image souhaitée dans le paramètre CONTENU.
Si vous utilisez les anciens éléments d’image dans vos pages créées avec les versions précédentes de PageFly, vous pouvez toujours modifier les images pour différents appareils comme vous le souhaitez.
Il vous suffit de basculer vers chaque vue de périphérique et de resélectionner l’image dans le paramètre CONTENT de l’onglet Général.
Remarques importantes 2: utilisez «Masquer» pour afficher l’image sur différents appareils
Lorsque vous devez afficher différentes images pour différents appareils, veuillez suivre les étapes ci-dessous:
- Dans la vue Tous les appareils, ajoutez les images que vous souhaitez afficher sur différents appareils.
- Sélectionnez chaque image, et dans l’onglet Général, vous verrez le paramètre VISIBILITÉ.
- Pour l’afficher sur un appareil spécifique, masquez-le simplement sur d’autres appareils.
- Cliquez sur les boutons Enregistrer et Publier, et vous verrez différentes images sur chaque appareil.
Vous pouvez voir cette image comme une illustration:
Voici à quoi cela ressemble sur le périphérique portable:
Voici à quoi cela ressemble sur l’appareil mobile
Paramètres de l’onglet de style
| Paramètres de l’onglet de style | |
| Vous pouvez choisir de styliser l’image dans les préréglages de style avec 4 variantes | |
| 1. ESPACEMENT | Vous pouvez lire sur le paramètre ESPACEMENT ici. |
| 2. TYPOGRAPHIE | Vous pouvez lire sur le paramètre TYPOGRAPHIE ici. |
| 3. ARRIÈRE-PLAN | You can read about the ARRIÈRE-PLAN parameter here. |
| 4. BORDURE | Vous pouvez lire sur le paramètre BORDURE ici. |
| 5. AFFICHER | Vous pouvez lire sur le paramètre AFFICHER ici. |
| 6. CSS PERSONNALISÉ | Vous pouvez lire sur le paramètre CSS PERSONNALISÉ ici. |
Quelques problèmes courants avec les images
Les images ne sont pas pleine largeur sur les appareils mobiles
Dans de nombreux cas, lorsque vous ajoutez des images sur votre page et que vous voyez qu’elles sont pleine largeur sur le périphérique de bureau, mais lorsque vous les visualisez sur les téléphones mobiles, elles sont plus petites et pas pleine largeur.
La raison de ce problème est que les images sur l’appareil mobile utilisent un remplissage à gauche ou un remplissage à droite venant de la configuration générale de tous les appareils et qu’elles ne sont pas configurées sur toute la largeur – option 100%.
Pour résoudre ce problème, vous devez vérifier le remplissage de l’image en basculant vers l’appareil mobile et remplacer le remplissage actuel à 0 px dans l’onglet Style ou le définir sur toute la largeur – option 100% dans l’onglet Général comme l’image ci-dessous:
N’oubliez pas de publier et accédez à la vue en direct pour voir le résultat:
Si vous avez essayé ces méthodes mais qu’elles ne fonctionnent toujours pas, n’hésitez pas à nous contacter via la fenêtre de chat en direct afin que nous puissions vous aider immédiatement.
Certaines images ne s’affichent pas sur le navigateur Safari
Dans de nombreux cas, les images de vos pages ne s’affichent pas sur le navigateur Safari, mais elles fonctionnent toujours sur le navigateur Chrome.
L’une des raisons les plus courantes est que les images que vous utilisez sont au format webp. Dans ce cas, Safari ne prend pas en charge ce format.
Vous pouvez voir cette image par exemple:
Cependant, si vous vérifiez sur le navigateur Chrome, l’image s’affiche:
Si vous souhaitez toujours que l’image soit affichée sur le Safari, vous devez convertir l’image au format JPG ou PNG. Dans ce cas, l’image a été convertie en JPG et cela fonctionne sur Safari:
Nous vous recommandons fortement d’utiliser uniquement Chrome pour une expérience optimale. Vous pouvez vérifier cet article pour savoir que PageFly fonctionne mieux avec la dernière version du Navigateur Google Chrome.
Assurez-vous que vous n’utilisez pas le format webp si vous souhaitez que l’image soit affichée sur le Safari. Si vous convertissez l’image en JPG mais que le problème persiste, n’hésitez pas à nous contacter via la fenêtre de chat en direct afin que nous puissions vous aider à résoudre le problème.
Vous voulez superposer le texte sur l’image
Dans le cas où vous souhaitez que le texte superpose l’image, veuillez utiliser l’élément Image avec superposition de texte (la section prédéfinie):
Lire la suite ici pour plus de détails.
