1. Pourquoi différencier l’affichage selon l’appareil ?
Chaque écran a ses contraintes.
Une image de grande taille s’affiche bien sur desktop, mais surcharge un mobile
Un bouton peut être plus large sur ordinateur, plus compact sur téléphone
En créant deux versions d’un même bloc (desktop + mobile), vous améliorez :
L’ergonomie
La vitesse de chargement
Et donc… vos conversions
🐝 L’astuce de Beezy : Ne vous contentez pas de “redimensionner” un élément ! Offrez une expérience pensée pour chaque format.
2. Étape par étape
Étape 1 – Dupliquer l’élément à adapter
Dans l’éditeur de page BizzBizz.io :
Créez 2 blocs, colonnes ou sections (ex. : une image adaptée au desktop et une image adaptée au mobile)
Adaptez chaque version à son support
Exemple :
Bloc 1 → Image paysage haute définition pour ordinateur
Bloc 2 → Image portrait légère pour smartphone
Étape 2 – Gérer la visibilité dans les paramètres
Pour chaque bloc :
Affichage uniquement sur ordinateur
Cliquez sur le bloc à afficher seulement sur desktop
Allez dans Paramètres > Styles
Dans la section Visibilité, décochez l’icône mobile. Le bloc sera invisible sur téléphone
Affichage uniquement sur mobile
Cliquez sur le bloc destiné au mobile
Dans les mêmes paramètres > Styles > Visibilité
Décochez l’icône ordinateur. Ce bloc s’affichera uniquement sur mobile
Étape 3 – Tester l’affichage
Utilisez le bouton Aperçu en haut de l’éditeur :
Passez en vue ordinateur puis en vue mobile
Vérifiez que seul le bloc voulu apparaît sur chaque format
🐝 L’astuce de Beezy : Ne vous fiez pas uniquement à l’aperçu. Testez aussi en navigation privée sur votre smartphone réel pour vérifier les temps de chargement.
3. Cas d’usage concrets
Élément à adapter | Desktop | Mobile |
Image bannière | Grand visuel en HD | Image optimisée légère |
Titre principal | H1 long et centré | Titre raccourci sur 2 lignes |
Bouton d’action | Large avec icône | Petit bouton compact |
Section témoignages | 3 colonnes | 1 colonne empilée |
4. Ce qu’il faut retenir
✔️ Dupliquez le bloc que vous souhaitez adapter
✔️ Cachez l’un pour mobile, l’autre pour ordinateur via les paramètres avancés
✔️ Testez en aperçu ET sur un vrai smartphone
✔️ C’est la meilleure solution pour un design responsive & rapide