Problème
Vous souhaitez afficher deux versions d'une image (une pour ordinateur, l'autre pour mobile), mais de manière optimisée afin que chaque image s'affiche uniquement sur l'appareil correspondant.
Solution avec CrocoClick
Ajout des deux blocs "Image" :
Dans votre éditeur de site CrocoClick, ajoutez deux blocs "Image" à votre section, l’un sous l’autre.
Exemple :
Bloc 1 : Image d’un chat pour ordinateur (plus large, résolution adaptée au desktop).
Bloc 2 : Image d’un chien pour mobile (plus compacte, résolution adaptée au mobile).
Configurer la visibilité dans les paramètres avancés :
Image pour ordinateur :
Cliquez sur le premier bloc image dans votre éditeur.
Allez dans les paramètres avancés.
Dans la section Visibilité, décochez l’icône "Mobile". Cela garantit que cette image ne sera visible que sur les appareils desktop.
Image pour mobile :
Cliquez sur le deuxième bloc image.
Allez dans les paramètres avancés.
Dans la section Visibilité, décochez l’icône "Ordinateur". Cela garantit que cette image ne sera visible que sur les appareils mobiles.
Testez votre mise en page :
Utilisez l'outil Preview (Aperçu) dans CrocoClick pour voir le rendu sur différents appareils (ordinateur, tablette, smartphone).
Assurez-vous que :
L'image destinée aux ordinateurs apparaît uniquement sur desktop.
L'image destinée aux mobiles apparaît uniquement sur smartphone.
Pourquoi utiliser cette méthode dans CrocoClick ?
Optimisation visuelle : Vous proposez une expérience adaptée à chaque appareil.
Facilité d'implémentation : CrocoClick rend cette option intuitive avec les paramètres de visibilité.
Performance améliorée : Les appareils ne chargent pas inutilement des images qui ne leur sont pas destinées.