Tous les blocs que vous pouvez ajouter à votre site dispose de cette option.
Elle vous permet de gérer de façon précise l’espace qu’occupe un bloc en fonction du terminal utilisé pour consulter votre site.
Présentation générale: largeur de bloc
Vous pouvez choisir d’afficher un bloc sur:
- La moitié de la largeur d’un grand écran Desktop (6/12 de large),
- Deux tiers d’un écran moins large Laptop (8/12 de large),
- La totalité d’un écran de Tablette (12/12 de large),
- Ne pas afficher le bloc sur Mobile (caché sur cette résolution d’écran),
Cas 1: suppression d’un bloc en fonction de la largeur d’écran
Utiliser cette fonctionnalité, c’est un peu comme construire un site avec des pièces de Légo qui ne font pas toutes la même taille, cela vous permet coller côte à côte plusieurs blocs, comme par exemple dans la zone d’entête de votre site ou vous souhaitez faire figurer:
Affichage de 3 blocs successifs sur Desktop
- Votre Logo
- Vos coordonnées
- Vos liens vers les réseaux sociaux
Dans cette zone d’entête, nous disposons de 3 blocs:
- Logo: 5/12 de large
- Adresse: 5/12 de large
- Menu social: 2/12 de large
Affichage de 2 blocs sur Tablette
Pour ce même site, lorsqu’on affiche le site sur tablette, la largeur ne permet plus d’afficher 3 blocs distincts
Nous n’en affichons donc plus que 2:
- Logo: 3/12 de large
- Adresse: 9/12 de large
Cas 2: Empilement des blocs sur écran moins large
Vous souhaitez faire apparaître le même contenu quelque soit la largeur de l’écran utilisé pour consulter votre site.
La largeur de l’écran ne permet pas toujours d’afficher les blocs successifs avec un graphisme adapté
Affichage de 2 blocs successifs sur Desktop
- Bloc 1: Liste horizontale 8/12 de large
- Bloc 2: Liste verticale 4/12 de large
Affichage de ces 2 mêmes blocs sur tablette
- Bloc 1: Liste horizontale 8/12 de large
- Bloc 2: Liste verticale 4/12 de large
Ici, l’affichage de la liste de droite est trop étriqué
Affichage de ces 2 mêmes blocs "empilés" sur tablette
- Bloc 1: Liste horizontale 12/12 de large
- Bloc 2: Liste verticale 12/12 de large
L’affichage est plus aéré et agréable à consulter