Adapter votre mise en page aux téléphones.

Vos pages s’adaptent seules aux téléphones et tablettes : les colonnes s’affichent côte à côte sur écrans larges et s’empilent sur petits. Cette page montre comment prendre le contrôle. Vous définissez une mise en page de colonnes par taille d’écran, inversez l’ordre sur écrans larges et montrez des éléments seulement sur certains appareils. L’exemple transforme une ligne de quatre colonnes en deux par deux sur tablettes.

La vidéo masque une photo sur téléphones, puis rétrécit la fenêtre pour la voir disparaître.

Avant de commencer

• Une ligne à quatre colonnes égales sur la page ; voir Lignes et colonnes.

Choisir une mise en page par taille d’écran

1. Survolez la ligne et cliquez l’icône de grille dans sa barre de contrôle. Le dialogue de mise en page s’ouvre avec un panneau Medium devices (≥ 768px).
2. Cliquez sur Add screen size. Un second panneau s’ouvre, réglé sur Extra small (< 576px).
3. Dans le menu déroulant de ce panneau, choisissez Small devices (≥ 576px).
4. Cliquez sur Custom Layout, saisissez 1/2 + 1/2 + 1/2 + 1/2 et cliquez sur Save.
5. Cliquez sur Save sur la barre d’outils.

Quatre moitiés gardent les quatre colonnes et en mettent deux par ligne. La tuile à deux colonnes égales réduirait plutôt la ligne à deux colonnes sur chaque taille d’écran.

Ce que vous voyez

Sur un ordinateur, les quatre colonnes restent sur une ligne. Rétrécissez la fenêtre du navigateur sous 768 pixels et elles passent deux par deux. Sous 576 pixels, elles s’empilent, une par ligne, dans l’ordre vu dans l’éditeur.

Une mise en page s’applique depuis sa taille d’écran vers le haut, jusqu’à ce qu’une taille plus grande ait sa propre mise en page. Chaque nouvelle ligne démarre avec une mise en page pour Medium devices (≥ 768px), donc ses colonnes s’empilent sur téléphones et petites tablettes. Remove screen size dans un panneau supprime cette mise en page.

Inverser l’ordre sur écrans larges

Ouvrez le menu More de la ligne, choisissez Settings et activez Mirror row. À partir de 768 pixels, les colonnes s’affichent dans l’ordre inverse ; sur les écrans plus petits, elles s’empilent dans l’ordre de l’éditeur.

Servez-vous-en pour des lignes alternées d’image et de texte. Mettez l’image en premier dans l’éditeur, pour que les téléphones la montrent au-dessus du texte, et inversez une ligne sur deux pour que les ordinateurs montrent l’image à droite.

Montrer ou masquer un élément par taille d’écran

1. Ouvrez le menu More de l’élément et choisissez Settings.
2. Sous HTML classes, choisissez une pastille du groupe Responsive Visibility, par exemple Hidden on extra small devices, phones (<576px).
3. Cliquez sur Save.

Chaque pastille Hidden on masque l’élément sur une seule taille d’écran. Chaque pastille Visible on le montre sur cette taille et le masque partout ailleurs.

Tailles d’écran

Un élément Positioned layers a son propre interrupteur Responsive, désactivé par défaut. Activez-le pour mettre la hauteur du canevas et son texte à l’échelle de la largeur de la fenêtre, pour que la composition garde ses proportions.

Si vous ne voyez pas le changement

• Les colonnes restent empilées sur une tablette. La ligne n’a aucune mise en page pour cette taille d’écran, donc les colonnes s’empilent sous 768 pixels. Ouvrez l’icône de grille de la ligne, cliquez sur Add screen size et choisissez Small devices (≥ 576px).
• Un élément a disparu sur chaque taille d’écran. Il porte deux pastilles Visible on, et chacune le masque là où l’autre le montre. Gardez-en une, ou utilisez des pastilles Hidden on, une par taille à masquer.
• Mirror row ne fait rien sur un téléphone. Mirror row s’applique à partir de 768 pixels. Pour changer l’ordre sur téléphones, déplacez plutôt les colonnes dans l’éditeur.

Et ensuite ?

• Lignes et colonnes : construire les lignes que vous rendez responsives ici.
• Modifier une page sur votre téléphone ou tablette : vérifier et corriger les pages sur petit écran.
• Faire aller une section de bord à bord : décider de la largeur de votre contenu.