Comment optimiser un site web pour qu'il puisse être consulté sur des appareils mobiles ?

En outre, vous pouvez modifier la taille des intercalaires entre les blocs pour les appareils mobiles, ajuster la visibilité des blocs sur différents appareils, créer votre propre version adaptative à l'aide de l'éditeur Zero Block ou désactiver l'adaptabilité du site web.

Ce paramètre détermine quels blocs peuvent ou ne peuvent pas être affichés sur certains types d'appareils. Vous pouvez ajuster cette fonction dans les paramètres de n'importe quel bloc.

Pourquoi vous pouvez en avoir besoin et comment cela fonctionne

Si un bloc est bien visible sur un ordinateur de bureau mais pas sur un appareil mobile, vous pouvez régler la visibilité du bloc sur 980px ou plus. De cette façon, le bloc sera orienté vers l'ordinateur de bureau et n'apparaîtra pas sur les appareils mobiles.

Vous devez ensuite copier ce bloc et l'optimiser pour l'affichage sur mobile en ajustant ses paramètres (tels que la modification de l'image, de la taille de la police, etc.) Réglez la visibilité du bloc sur "0-980px". Vous obtiendrez une version mobile du bloc.

Ainsi, les personnes qui accèdent à votre site web depuis un PC verront la version de bureau et les utilisateurs mobiles la version mobile.

La visibilité du bloc (différentes valeurs des paramètres) est utile pour que vous puissiez ajuster l'apparence du bloc pour un appareil spécifique en sélectionnant la résolution, si vous le souhaitez. Par exemple, si certains blocs ne s'affichent pas bien sur les tablettes ou sur certains téléphones mobiles.

Comme nous le voyons, la photo est recadrée sur un téléphone portable et n'est pas très belle.

Réglez la visibilité du bloc sur "> 980px". Désormais, les utilisateurs mobiles ne le verront plus.

Copier le bloc.

Ajustez le bloc pour la version mobile - modifiez l'alignement de la photo et du texte.

Réglons la visibilité de ce bloc sur "≤ 980px", il n'apparaîtra pas sur les appareils dont l'écran est plus large que 980px.

C'est fait ! La couverture s'affiche désormais différemment sur les différents appareils en fonction de la largeur de l'écran.

Dans n'importe quel bloc, ouvrez les paramètres, cliquez sur l'icône à côté des options "Top padding" et "Bottom padding" et définissez l'espacement pour l'appareil mobile.

Pour ce faire, cliquez sur le bouton "Paramètres" du bloc et trouvez l'onglet "Typographie". Dans cet onglet, cliquez sur l'icône de l'ordinateur à côté du champ. Un champ apparaît alors dans lequel vous pouvez spécifier la taille de la police pour la version mobile.

Le même ordre d'actions est appliqué pour modifier l'interligne.

Vous pouvez définir votre propre valeur de rayon de bordure ou de remplissage extérieur pour les couvertures destinées aux appareils mobiles dans tous les blocs des catégories "Couverture" et "Image".

Pour modifier le rayon ou le remplissage, cliquez sur le bouton "Paramètres" et recherchez le champ correspondant. Cliquez sur l'icône de l'ordinateur à côté du champ et tapez la nouvelle valeur dans le nouveau champ.

Une fois le bloc converti, vous pouvez ajuster manuellement son apparence pour cinq versions de largeurs d'écran. Pour en savoir plus sur la mise en place de l'adaptabilité dans Zero Block , consultez les pages "Zero Block: Comment créer un bloc personnalisé" et "Zero Block: Responsive Design".