La grille (Grid Flex) : une mise en page intuitive et entièrement responsive

L'éditeur de contenu de Flexit intègre un outil puissant qui vous permet de créer facilement des mises en page avec des colonnes qui s'adaptent automatiquement à tous les formats d'écran. Que vos visiteurs naviguent depuis un ordinateur, une tablette ou un smartphone, votre contenu s'affichera parfaitement sur chaque appareil.

Comment placer une Grid dans votre contenu

1. Placez votre curseur dans le contenu à l'endroit où vous souhaitez placer votre grid
    
2. Cliquez sur l'icône "Ajouter un modèle de Grille"
   
   
    
3. Choisissez un modèle : exemple 2 colonnes de largeur identique
   
   

 

Un tableau vide avec le nombre de colonnes choisi apparaît alors dans votre contenu :

 

 

Comprendre le fonctionnement des Grids

Ce tableau est composé de trois éléments :
Une ligne qui contient des colonnes dans lesquelles vous pouvez mettre du contenu

 

Modifier les Lignes

Il existe 6 modèles prédéfinis, mais ceux-ci peuvent être modifiés selon vos besoins !


Une fois qu'un des tableaux prédéfinis est posé dans votre contenu, vous pouvez le modifier.

En plaçant votre souris au milieu de la grid, une liste d'icônes apparaît !

1. Vous intervenez sur la ligne !
   
   Vous pouvez : 
2. Supprimer la ligne, donc la totalité de la grid 
3. Déplacer la grid vers le haut, pas à pas dans le contenu
4. Déplacer la grid vers le bas, pas à pas dans le contenu
5. Modifier les paramètres d'une ligne

Modifier les paramètres d'une ligne

En cliquant sur la roue crantée, vous entrez dans les paramètres de la ligne : une colonne apparaît à gauche ! 



 

 Pour pouvoir bien comprendre comment les paramètres fonctionnent, nous allons travailler à partir d'une grid ayant déjà du contenu et quelques paramètres renseignés.

 Exemple de Grid 

Ci-dessous une grid 2 colonnes de même taille contenant chacune du texte. Seul le paramètre "Overlay" sur La ligne a été utilisé pour mettre un fond de couleur

 

Les différents paramètres de la ligne

1 - Vous intervenez sur la ligne !

2 - Vous supprimez tous les paramètres de toutes les colonnes de la grid

3 - Vous supprimez tous les paramètres de la ligne

À noter : lorsqu'un paramètre est renseigné, un rectangle orange apparaît à gauche

4 - Espacement

Vous pouvez intervenir sur les marges de la ligne

 

Résultat sur notre exemple

 Votre grille a désormais une marge au-dessus d'elle 

Votre grille a désormais une marge au-dessus d'elle 

et/ou sur les padding de la ligne

 Résultat sur notre exemple

 Votre grille a désormais des paddings (espacements internes) autour de chaque colonne de contenu

5 - Affichage
Vous pouvez définir une hauteur minimum de la ligne (même si elle n'a pas de contenu)

Résultat sur notre exemple

 Votre Grid fait 400 pixels de haut même si le contenu est plus court

 

Vous pouvez indiquer que votre grid n'apparaît pas sur certains formats d'écrans (Ordinateur, Tablette, Mobile)

 Votre Grid est bien présente lorsque vous regardez sur votre ordinateur, mais elle n'apparaît pas en version mobile

6 - Bordure

 Vous pouvez définir une apparence (linéaire, tirets ou pointillés) une couleur de bordure et des épaisseurs différentes à votre ligne

Résultat sur notre exemple

 Une bordure linéaire orange tout autour de la ligne apparaît avec 4 épaisseurs différentes

 

7 - Arrondis

 Vous pouvez mettre des coins arrondis à votre ligne (identiques ou différents)

Résultat sur notre exemple
Les coins sont composés d'arrondis de différentes tailles

8 - Options de fond

 Vous pouvez afficher une image dans le fond de votre ligne

Résultat sur notre exemple
Dans le fond de notre ligne apparaît maintenant une image d'eau. Les paramètres utilisés font en sorte que l'image se centre et s'agrandisse pour remplir l'ensemble de la ligne, quitte à être coupée. À vous de tester les autres paramètres pour découvrir les autres résultats. 

 

9 - Overlay

 Vous pouvez mettre une couleur en filigrane dans votre ligne

Résultat sur notre exemple
Dans le fond de notre ligne apparaît la couleur orange avec une opacité de 45 %. 

 

Modifier les colonnes

Une fois la ligne paramétrée correctement, vous pouvez intervenir sur les colonnes

 

Si vous placez votre souris sur une colonne, vous verrez une liste d'icônes apparaître


 

1. Vous intervenez sur la colonne !
   
   Vous pouvez : 
2. Ajouter une colonne supplémentaire
3. Supprimer la colonne 
4. Diminuer la colonne d'1/12^e
5. Agrandir la colonne d'1/12^e
6. Déplacer la colonne vers la Gauche
7. Déplacer la colonne vers la droite
8. Modifier les paramètres de la colonne
9. intervenir sur la ligne

Utilisation des icônes sur notre Grid d'exemple
Si vous voulez transformer notre grid en 3 colonnes identiques, il faut : 
1- cliquer sur le + pour ajouter une colonne
2 et 3 - jouer avec les >< et les <> pour équilibrer les largeurs 

 

Si vous cliquez sur la flèche vers la gauche, votre colonne va s'intervertir avec la colonne à sa gauche

Voici le résultat :
 

 

 

 Voici le résultat :
 

Modifier les paramètres d'une Colonne

En cliquant sur la roue crantée, vous entrez dans les paramètres de la colonne : une colonne apparaît à gauche ! 

 

 

Intervenir sur l'aspect de la colonne


 

1 - Vous intervenez sur la colonne !

2 - Vous supprimez tous les paramètres de la colonne

3 - Largeur de la colonne Voir explication ci-dessus

4 - Espacements
 Même principe que pour une ligne Voir explication ci-dessus

5 - Affichage
 Même principe que pour une ligne Voir explication ci-dessus

6 - Alignement

Vous pouvez aligner vos colonnes dans la ligne horizontalement et verticalement
Remplir toute la place disponible 


Positionner la colonne  


7 - Bordure
 Même principe que pour une ligne Voir explication ci-dessus

8 - Arrondis
 Même principe que pour une ligne Voir explication ci-dessus

9 - Options de fond
 Même principe que pour une ligne Voir explication ci-dessus

10 - Overlay
 Même principe que pour une ligne Voir explication ci-dessus

 

Modifier les paramètres des contenus d'une colonne

Intervenir sur le contenu de la colonne


 

1 - Vous intervenez sur le contenu de la colonne !

2 - Vous supprimez tous les paramètres de contenu 

3 - Espacements
Même principe que pour une ligne et la colonne Voir explication ci-dessus
 

4 - Alignement
Même principe que pour la colonne Voir explication ci-dessus

5 - Bordure
Même principe que pour une ligne et la colonne Voir explication ci-dessus

6 - Arrondis
Même principe que pour une ligne et la colonne Voir explication ci-dessus

8 - Option de texte
Vous pouvez déterminer la couleur du texte pour cette colonne


8 - Options de fond
Même principe que pour une ligne et la colonne Voir explication ci-dessus




Exemple de ce que l'on peut faire avec l'outil Grid
 

 Affichage par défaut en mode "mobile"
 

 

Paramétrez l'apparence de votre grid selon la taille des écrans

Vous venez d'apprendre à utiliser les différents paramètres de votre grid. Il est évident que le travail que vous venez de réaliser a été fait et vérifié sur l'écran d'un ordinateur. Mais avez-vous regardé ce que cela donne sur un mobile ?
Il ne faut pas oublier qu'environ 70 % des sites web sont consultés sur un téléphone portable, alors que nous les créons sur des ordinateurs de bureau avec des écrans confortables pour travailler. Le rendu entre ces deux types d'écrans peut être totalement différent.
C'est pour cette raison qu'il faut prévoir un affichage qui s'adapte correctement à tous les cas de figure. Cette approche s'appelle le responsive design (ou design adaptatif).

Choisir un mode d'affichage dans l'interface d'administration

Lorsque vous travaillez sur votre mise en page dans l'interface d'administration, l'affichage est configuré par défaut en mode bureau (écran d'ordinateur). Pour optimiser l'expérience utilisateur sur tous les appareils, vous avez la possibilité de basculer vers le mode d'affichage mobile.

Prévisualisation en mode "bureau" ou "mobile"

Le mode d'affichage mobile vous permet de visualiser en temps réel comment votre contenu s'adaptera et apparaîtra sur les écrans de smartphones et tablettes. Cette fonctionnalité est essentielle pour garantir une expérience utilisateur optimale sur tous les supports.

Affichage par défaut en mode "bureau"

Affichage par défaut en mode "Mobile"


On s'aperçoit dans cet exemple que l'image avec le colibri n'est maintenant pas assez haute en version mobile :

Il faudra donc forcer sa taille dans ce mode d'affichage !
Cliquez sur la roue crantée : La fenêtre des paramètres que vous connaissez déjà apparaît, mais elle est accompagnée d'un message : Attention les modifications effectuées ne seront visibles que pour le média mobile !

Dans cet exemple nous allons donc donner une taille minimum à la colonne que contient la photo du colibri mais seulement pour la version mobile :

Pour tricher, il faudra mettre au moins un caractère dans la colonne du colibri, un point par exemple

voici le résultat :

 

 

Maintenant, à vous de Jouer !