Une fois que vous avez ajouté et configuré des blocs standard, vous pouvez également modifier leur version mobile. Pour ce faire, cliquez sur l'icône représentant un appareil mobile située au centre du panneau d'édition de la page.

Dans le menu déroulant, sélectionnez la taille d'écran souhaitée. Si vous souhaitez vérifier l'affichage de la page sur un appareil spécifique, sélectionnez-le ou choisissez l'option la plus proche dans la section « Appareils ».

L'éditeur passera en mode mobile, ce qui facilitera la modification des blocs.

En mode aperçu, cliquez sur l'icône représentant un appareil mobile et sélectionnez la taille d'écran souhaitée.

Pour masquer l'interface de l'éditeur, cliquez sur l'icône représentant des flèches située dans le coin inférieur gauche ou à côté de « Retour à l'édition ».

Pour modifier l'échelle de l'aperçu, cliquez sur l'icône « 100 % » et sélectionnez la valeur souhaitée dans le menu déroulant.

Cliquez sur l'icône en forme de crayon pour revenir à l'éditeur et modifier les blocs.

Chaque bloc dispose de paramètres de remplissage et de typographie spécifiques à la version mobile. Selon le bloc, des paramètres supplémentaires pour certains éléments sur les appareils mobiles peuvent également être disponibles. Ces paramètres sont généralement signalés par des indications dans le panneau de configuration.

Par exemple, un bloc de menu peut disposer d'un onglet de paramètres dédié à cet effet.

Dans les blocs de couverture, les paramètres de la version mobile peuvent être signalés par une icône représentant un téléphone.

Modification de la taille de police et de l'interligne pour les appareils mobiles. Dans les paramètres du bloc, ouvrez la section « Typographie », cliquez sur l'icône représentant un ordinateur de bureau, puis saisissez la taille de police souhaitée pour la version mobile dans le champ associé à l'icône représentant un appareil mobile.

L'interligne se configure de la même manière.

Modification du rayon des coins et de la marge intérieure des images de couverture sur les appareils mobiles. Vous pouvez définir un rayon de coin ou une valeur de marge intérieure distincte pour les appareils mobiles dans les blocs des catégories « Couverture » et « Image ».

Pour modifier le rayon ou la marge intérieure, cliquez sur « Paramètres » et repérez le champ correspondant. Cliquez ensuite sur l'icône représentant un ordinateur de bureau à côté du champ et saisissez la valeur souhaitée pour la version mobile.

Modification de la position de l'image d'arrière-plan. Dans les blocs de couverture et les autres blocs où ce paramètre est disponible, vous pouvez sélectionner la partie de l'image qui s'affichera dans le bloc.

Pour définir un positionnement automatique, sélectionnez la valeur appropriée dans le menu déroulant, par exemple « Centre-centre ».

Pour définir manuellement la position, cliquez sur l'icône située à côté du champ.

L'image comportant des points de repère s'ouvrira. Vous pouvez sélectionner l'un des points prédéfinis ou placer votre propre point à l'endroit souhaité.

Le positionnement permet d'ajuster l'affichage de l'image d'arrière-plan sur la version mobile, afin que la même image s'affiche correctement sur différents écrans.

Dans n'importe quel bloc, ouvrez les paramètres, cliquez sur l'icône située à côté des champs « Espace supérieur » ou « Espace inférieur », puis saisissez la valeur adaptée à l'appareil mobile.

Si vous souhaitez que différents blocs s'affichent sur les smartphones et les ordinateurs de bureau, configurez la plage de visibilité.

Ouvrez les paramètres du bloc et faites défiler vers le bas jusqu'à l'option « Visibilité du bloc sur les appareils ». Indiquez sur quels appareils le bloc doit s'afficher. Enregistrez ensuite les paramètres et republiez la page.

Vous pouvez configurer l'adaptabilité des blocs à différents appareils en les convertissant au format « Zero Block » (Adaptable) à l'aide de l'option disponible dans les paramètres du bloc. Cette option est actuellement disponible dans la plupart des blocs.

Une fois la conversion effectuée, vous pourrez configurer manuellement l'apparence du bloc pour cinq plages de largeur d'écran ou ajouter vos propres plages. Pour en savoir plus sur la configuration du design adaptatif dans « Zero Block », consultez les articles « Zero Block: Comment créer un bloc personnalisé » et « Zero Block: Design adaptatif ».

Si vous désactivez la mise en page adaptative, la page s'affichera de la même manière sur les appareils mobiles que sur les ordinateurs de bureau.

Pour désactiver la mise en page adaptative, rendez-vous dans Paramètres de la page → Options supplémentaires, cochez la case « Désactiver l'affichage mobile », puis republiez la page.