L’élément d’image

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

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

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.