1. Accueil
  2. Docs
  3. Guide utilisateur
  4. Ajout de mise en forme
  5. Gestion du responsive

Gestion du responsive

Le responsive vous permet de gérer l’affichage de votre site internet sur toutes les tailles d’écrans. Il s’agit d’une fonctionnalité très utile lorsque votre contenu possède plusieurs colonnes, afin qu’il s’adapte à la taille de l’écran du visiteur et que rien ne soit coupé. 

Pour gérer le responsive de votre contenu, ouvrez les paramètres du plugin Colonne. 

Nous nous intéressons à la ligne “Column size”.  Si vous ne remplissez que la case tout à gauche, c’est cette taille qui s’appliquera à tous les types d’écran. 

Note : Il y a deux choses primordiales à connaître pour utiliser le responsive avec les colonnes :
1 – Le responsive est géré sur 12 colonnes (la valeur maximale est donc 12).
2 – Les cases sont organisées de gauche à droite en fonction de la taille d’écran : la plus petite à gauche, jusqu’à la plus grande à droite. Tout à gauche, c’est la taille “xs” : celle d’un smartphone, et à droite c’est la taille “xl”, qui correspond à la taille d’un téléviseur.

Nous pouvons établir des correspondances de tailles d’écran avec les cases comme suit : mobile, tablette, ordinateur portable, ordinateur fixe, et enfin téléviseur. Si vous ne saisissez une valeur que dans la première colonne, elle s’appliquera à sa taille d’écran, et à toutes les autres plus grandes.
Inversement, si vous n’entrez de valeur que dans la dernière colonne, elle ne s’appliquera que sur une télévision. 

Afin de régler la taille attribuée à vos colonnes, vous devez choisir une valeur entre 1 et 12, et régler ces paramètres sur chaque colonne. N’oubliez pas que la taille totale de l’écran est de 12. Si une colonne contient « 12 » sur chaque case, l’autre aura 0 et passera à la ligne au-dessous.

Il est intéressant de choisir la valeur 12 pour les 3 premières cases, qui correspondent aux petits écrans. Pour les deux dernières cases, libre à vous de jouer sur le responsive afin d’adapter votre mise en forme et de jouer sur la disposition des éléments.

responsive settings du plugin colonne

Note :  Il faut savoir que modifier la valeur d’une colonne va modifier la taille de vos images selon l’espace qui est attribué à celle à laquelle elle appartient. Si vous voulez rogner l’image, il vous faut aller dans ses paramètres.

Nous vous proposons de regarder trois vidéos pour vous aider : gérer le responsive d’une colonne, modifier la largeur d’une colonne grâce au responsive et une vidéo pour voir comment s’appliquent les paramètres de responsive.

Tutoriel Vidéo – Gérer le responsive

Tutoriel Vidéo – Modifier la taille des colonnes avec le responsive

Tutoriel Vidéo – Application du responsive

Cet article vous a-t-il été utile ? Oui Non

Comment pouvons-nous aider ?