Par défaut, la version mobile du site web affiche les éléments dans l'ordre où ils ont été ajoutés sur la version de bureau. Même si, par la suite, vous réorganisez les éléments sur le bureau, ces modifications ne sont pas automatiquement appliquées à la version mobile. Vous pouvez trier manuellement les éléments sur la vue mobile. De cette façon, vous pouvez disposer les éléments différemment sur les vues desktop et mobile.
Pour obtenir un résultat optimal, évitez de déplacer des éléments entre les sections : cela affecte les versions mobile et de bureau et risque de déformer la mise en page de votre site web ; n'hésitez pas à repositionner les éléments à l'intérieur d'une section 💡
Accéder à l'éditeur mobile
Passez d'une vue à l'autre en cliquant sur l'icône mobile ou bureau dans la barre d'outils supérieure :
Réorganiser les éléments
Pour réorganiser les éléments, entrez dans la vue mobile, et faites simplement glisser et déposer les éléments :
Redimensionner les éléments
Pour redimensionner des éléments, entrez dans la vue mobile et utilisez les poignées de redimensionnement sur les bordures des éléments :
En savoir plus : Comment redimensionner les éléments et les sections
Redimensionner le texte
Vous pouvez redimensionner le texte de deux manières :
Globalement - affecte tous les textes d'un style particulier (par exemple, tous les textes écrits en l'entête 1) sur l'ensemble de votre site web en vue mobile
Localement - affecte un élément de texte particulier sur la vue mobile
Pour redimensionner le texte de manière globale sur le mobile, accédez à la vue mobile et modifiez la taille de la police d'un style de texte particulier dans les paramètres du style de texte global :
Pour redimensionner le texte localement sur le mobile, entrez dans la vue mobile, cliquez sur un élément de texte particulier et modifiez la taille de sa police :
Vous pouvez définir les paramètres suivants de manière à ce qu'ils soient différents sur l'ordinateur de bureau et sur le téléphone portable :
Taille de la police ; par exemple, desktop : 20 PX, mobile : 18 PX
Alignement du texte ; par exemple, bureau : gauche, mobile : centre
Hauteur de la ligne ; par exemple, desktop : 2, mobile : 1.5
Cela signifie que dès que vous modifiez un autre paramètre - famille de polices, gras, italique, souligné, etc. - la modification sera répercutée à la fois sur l'ordinateur de bureau et sur le téléphone portable. Il en va de même si vous modifiez l'ensemble du style de texte. Par exemple, si vous définissez l'intitulé 2 pour le mobile alors qu'il s'agit de l'intitulé 1 pour le bureau, l'élément de texte dans l'affichage du bureau passera également à l'intitulé 2.
Vous pouvez dupliquer un élément ou une section et rendre une version visible sur le bureau et une autre sur le mobile. De cette façon, vous avez plus de liberté pour styliser le contenu sur l'ordinateur de bureau et sur le mobile individuellement, car, normalement, certains paramètres (par exemple, le style de texte) s'appliquent à la fois à l'ordinateur de bureau et au mobile. En savoir plus : Comment masquer des éléments ou des sections sur un ordinateur de bureau/mobile
Modifier la position du menu
Pour modifier la position du menu, entrez dans la vue mobile, cliquez sur la section d'en-tête et ouvrez ses paramètres :
Dans l'onglet Mise en page, modifiez la position du menu :
Si vous ne voyez pas la section de l'en-tête, il est probable que toutes les pages de votre site web soient masquées dans le menu de navigation 💡
Modifier la position du logo
Pour modifier la position du logo, accédez à la vue mobile, cliquez sur la section de l'en-tête, puis sélectionnez Changer le logo :
Dans l'onglet Logo, modifiez la position du logo :
Si vous ne voyez pas la section de l'en-tête, il est probable que toutes les pages de votre site web soient masquées dans le menu de navigation 💡