Toutes les collections
Inspirez vous de nos conseils design
Bonnes pratiques
Comment bien utiliser les différents types de conteneurs ?
Comment bien utiliser les différents types de conteneurs ?
Zamenga Mbunga avatar
Écrit par Zamenga Mbunga
Mis à jour il y a plus d’une semaine

Conteneur par grille

Ce type de conteneur peut contenir plusieurs éléments (textes, images...). Il permet :

  • d'appliquer un design commun à ce groupe d'éléments (fond, marges, bords, etc.)

  • de pouvoir déplacer tous ces éléments en gardant la même disposition

Conteneur_par_grille_2

Conteneur_par_grille_1

Conteneur de colonnes

Le conteneur de colonnes permet de :

  • créer plusieurs blocs avec un fond qui aura la même hauteur dans chaque colonne, peu importe la taille du contenu (la taille s'adaptera à celle du bloc le plus haut)

  • appliquer un même design (fonds, marges etc.) à un groupe d'éléments qui sont côte à côte, grâce à la fonction "Appliquer les réglages aux autres colonnes" dans la modification de l'apparence d'un bloc

Conteneur_de_colonnes_1

Conteneur_de_colonnes_2

Conteneur libre

Contrairement au conteneur par grille qui s’adapte à la hauteur de son contenu, il est possible de définir la hauteur du conteneur libre manuellement.

C'est ce type de conteneur qui est utilisé par défaut pour la bannière principale de la page d'accueil et il sert principalement à réaliser certains design très spécifiques.

Attention : si vous souhaitez ajouter plusieurs éléments dans ce conteneur il faudra les placer dans un conteneur par grille. Si vous les placez directement dans le conteneur libre, alors ils auront une position "libre". Il sera donc plus compliqué de les positionner et en fonction des différentes tailles d'écran (et notamment en mobile), ils ne seront pas bien rangés. Nous déconseillons son utilisation, à moins de la maîtriser à 100%.

Conteneur_libre

Conteneur double-face

Comme son nom l'indique, ce type de conteneur a 2 faces. La première que l'on voit en défilant sur le site, la seconde qui apparaît lorsque l'on passe la souris sur le conteneur.

Capture_decran_2020-11-18_a_15.33.10

Conteneur d'onglets

Le conteneur d'onglets permet d'accéder à différents contenus (textes, images..) en sélectionnant un onglet dans un menu secondaire. Cela permet de structurer et de gagner de la place dans un site qui a beaucoup de contenu.

Le rendu pour le visiteur est le même que pour un menu secondaire, la différence étant qu'il n'y a pas besoin de créer de nouvelles pages avec un conteneur d'onglets.

Conteneur_donglets

Conteneur dépliant

Le conteneur dépliant sert à ajouter la mention "Voir plus" ou un pictogramme qui permettra de visualiser plus de texte manuellement, et ainsi de gagner de la place dans un site qui a beaucoup de contenu.

Conteneur_depliant

Avez-vous trouvé la réponse à votre question ?