Dans cet article :
La version mobile de votre page d’atterrissage est conçue pour s'afficher de manière fluide sur des appareils mobiles tels que les cellulaires et les tablettes. L'objectif est d'assurer une expérience utilisateur optimale, en adaptant les éléments de la page (textes, images, boutons) à la taille plus petite de l'écran.
Par défaut, l’affichage mobile réorganise automatiquement les contenus de votre page sur une seule colonne. Les éléments sont affichés les uns en dessous des autres, dans l’ordre suivant : de haut en bas et de gauche à droite.
Avant de commencer
Pourquoi est-il important d'avoir une version mobile de ma page d’atterrissage ?
Une grande majorité des utilisateurs accède à internet depuis leurs appareils mobiles. Avoir une version mobile bien conçue permet de :
- Offrir une meilleure expérience utilisateur, avec un contenu facilement lisible et des éléments interactifs accessibles.
- Assurer une navigation fluide pour tous les utilisateurs, qu'ils utilisent un téléphone, une tablette ou un autre appareil mobile.
- Adapter l’affichage mobile sans affecter la version bureau : les modifications faites en mode mobile sont indépendantes, ce qui vous permet d’optimiser la lisibilité sur petit écran sans impacter l’expérience sur ordinateur.
Comment faire
- Créez une nouvelle page d’atterrissage ou modifiez une page existante. Accéder à l'éditeur de votre page d’atterrissage.
- Cliquez sur le bouton Mobile pour basculer l’aperçu de votre page en version mobile.
- Cliquez directement sur une section, une colonne ou un élément (comme un texte ou un bouton) pour le modifier. Un encadré bleu vous indique l’élément actuellement sélectionné.
- Ajustez la taille des images, des titres, des paragraphes et des boutons pour qu'ils soient bien proportionnés à un écran mobile.
- Définissez l’espacement et alignement intérieur pour chaque colonne.
- N'oubliez pas d'enregistrer fréquemment vos changements et avant de quitter l'éditeur.
Définir et rétablir le thème du texte en mobile
Le thème appliqué à votre page d’atterrissage prévoit, par défaut, des tailles de texte adaptées à chaque type d’écran : plus grandes sur ordinateur, plus compactes sur mobile. Cela permet d’assurer une lecture confortable, peu importe l’appareil utilisé.
Si vous modifiez manuellement la taille d’un titre ou d’un paragraphe en version mobile, vous pouvez à tout moment revenir à la taille prévue par le thème.
Appuyez sur le bouton Rétablir situé à droite de la taille de vos titres ou textes pour revenir à la taille par défaut du thème pour les appareils mobiles. Le bouton rétablir n'apparaît que si vous avez modifié la taille par défaut du thème.
Masquer des éléments en mobile
Certains éléments peuvent être masqués en version mobile pour simplifier l’expérience utilisateur. Pour masquer un élément :
- Cliquez sur l’élément en mode mobile.
- Accédez à ses propriétés (panneau de droite).
- Désactivez l’option Visible sur mobile.
Les éléments masqués en mobile apparaissent hachurés dans l’éditeur.
Si vous ne voyez pas un élément masqué, cliquez sur l’icône Œil dans le haut de l’éditeur pour afficher ou masquer temporairement les éléments cachés.
Que se passe-t-il si tous les éléments d'une colonne sont masqués ?
Si tous les éléments d'une colonne sont masqués, la colonne entière sera automatiquement masquée à l'affichage mobile. Cela permet d'éviter des espaces vides inutiles dans la page.
Exceptions mobiles
Lorsque vous modifiez un élément en mode mobile, une exception mobile est créée. Cela signifie que l’élément conservera un style différent de celui de la version bureau.
Supprimer une exception mobile
Pour supprimer une exception et revenir à la version de bureau :
- Cliquez sur l’élément.
- Appuyez sur le X sur le bouton Mobile. L’élément reprendra alors l’apparence de la version fureteur.
Espacement en mode mobile
Par défaut :
- L’espacement des sections et colonnes est supprimé.
- Un espacement automatique de 30 px est ajouté autour des colonnes pour que le contenu ait un bon alignement et soit lisible.
- L’espacement entre les éléments est conservé tel qu’en version fureteur.
Vous pouvez personnaliser ces espacements à tout moment en sélectionnant l’élément souhaité et en ajustant les marges et les espacements intérieurs dans les propriétés.
Pour sélectionner une section ou une colonne, sélectionnez une colonne en cliquant sur son onglet, situé dans l’éditeur. Ces onglets ne s’affichent que lorsque la section correspondante est sélectionnée. Pour les faire apparaître, cliquez soit sur un élément de la section, soit dans un espace vide de celle-ci.
Vous verrez alors ses propriétés apparaître dans le panneau latéral.
Tester votre version mobile
Utilisez le bouton Aperçu pour obtenir un aperçu rapide de votre page sur mobile. Cliquez sur Voir en ligne si vous souhaitez prévisualiser votre page à l’aide d’un lien temporaire, avant de la publier. Une fois votre page prête, publiez-la pour la rendre accessible à tous.
En savoir plus sur la personnalisation des pages d’atterrissage >