Affichage d’une liste horizontale par défaut
Lorsqu’on ajoute une liste horizontale dans une page, son affichage se présentera comme ceci par défaut:
Comme vous le constatez, les articles se suivent de façon horizontale.
Nombre de colonnes d’une liste horizontale
Vous remarquerez certainement que lorsqu’on édite ce bloc en mode expert - cocher la case: Afficher les options (mode expert), on dispose alors d’un paramètre: Choisir un nombre de colonnes personnalisé
Ce dernier permet de choisir le nombre de colonnes horizontales sur lequel votre liste va s’afficher et cela pour les 4 types d’affichage de mobile à desktop, vous permettant de profiter d’un affichage responsive adapté à chaque écran.
Affichage vertical d’une liste horizontale
Note: Bien sûr, si vous choisissez d’afficher votre liste sur une seule et unique colonne, votre liste disposera alors d’un affichage vertical. Cela reste néanmoins bien ce que nous appelons une liste horizontale.
Notez toutefois que l’image de chaque élément occupe toujours systématiquement toute la largeur de colonne de cet élément. Le titre et le texte sont alors situés en dessous de l’image.
Astuce: Utilisation d’une liste horizontale
On a tendance à penser que plus l’écran sera large, plus le nombre de colonnes de notre liste horizontale devra être important. Une liste horizontale peut aussi occuper une seule colonne sur Desktop puis deux colonnes sur un affichage moins large et pourtant disposer d’un affichage aéré et élégant. Explications:
Exemple d’affichage sur Desktop
Une liste horizontale dans la zone Navigation de la page:
Cette liste est affichée sur une seule colonne.
Exemple d’affichage sur tablette
Sur tablette, la zone de navigation s’affiche sur toute la largeur de la page à la suite des zones de contenus, ce qui fait que cette zone occupe alors une largeur plus importante.
Voici l’affichage de cette même liste sur deux colonnes et sur tablette:
Modifier le nombre de colonnes nous a permis de bénéficier d’un affichage aéré et agréable sur tablette.